Salvaging WordPress websites
Since I moved my website to WordPress in 2014, I've been amazed by how slow a stock WordPress website is, and how really, awful they can become if you don't know what you're doing. So here I present you with a list of options to improve the speed of your website.
It's good to point out that one of the many problems is that a lot of WordPress “developers” just build a site, and never bother to offer maintenance. Also, quite often they take decisions based on what they think helps them set up the site quickly, and gives the customer the most options to customise their website (which they won't understand and never use). WordPress is a very flexible system, but unfortunately this same flexibility is also its downside. It's way too easy to overload it with unnecessary overhead, making it exponentially slower to use with every functionality added.
The amount of knowledge to build a good website is not trivial. The ease with which a WordPress websites can be deployed belies the actual complexity of doing it well. It requires you to understand the complete stack of the website, from user experience design to server performance, from security headers to content strategy.
This is why you tend to see the same problems in WordPress websites.
Before any of these things, run a scan with Google Developer tools, using the Lighthouse functionality. This will give you a nice overview of any performance issues your website might have. It will generate a lovely report, as show below.
The most important metrics are First Contentful Paint and Speed index. Both should be below two. It's good to keep in mind that for WordPress, First Contentful Paint is a good indication of how bloated your installation is. I've seen websites with a number of 14 seconds or higher. They usually use Elementor.
The following is a list of specific optimizations, in no particular order, to at the very least make your website load a bit faster.
Advised WordPress optimisations.
- Perform all necessary updates. If your website was never updated since launch, all these old plugin will slow you down. Also, this introduces security risks.
- Delete all unnecessary plug-ins. People love installing plug-ins. Lots of them are not needed, and it happens quite often that your developer installs one, but never configures it. This puts extra load on the system. Even de-activated plug-ins have a (albeit minor) impact on performance.
- Delete all front-end rendering plug-ins. There are better and simpler ways to code front-end behaviours, integrated plugins are regularly complete overkill or just badly coded, using unnecessarily complicated frameworks. Vanilla JavaScript is the way to go.
- If you must download a template, use as few configuration options as possible on your template. Parallax scrolling, and all kinds of shiny motion effects may sound nice, they are generally very bad for usability. Also, every customisation increases the amount of code needed to load the template. Ideally, you chose a template with as few customisation options as possible. This also means there are fewer things that can break during updates of the template.
- Temporarily install a cleaner plugin like WP Optimize. Use it to clean up the database tables, as the old plugins will have left a lot of mess in them, hampering performance. Most of the other optimization functions are paid options, but there are better and cheaper plugin for those.
- Remove the Elementor plugin. This plugin adds customisation options to pages. Unfortunately, it does this in an incredibly bad way, adding seconds to the load times of pages. There are ways to tweak the settings of Elementor to make it marginally less awful, yet the best is just to remove it altogether. Most customisations are either completely unnecessary and possible to implement with the WordPress block editor. Keep in mind that every single post and page will need to be converted before you can switch Elementor off.
- Find a better template, or better yet, get a custom-made template. Most templates I've seen could lose around 60% of the code and complexity, which would help their performance a lot.
- Limit the amount of Fonts used in the theme. Sure, they might offer all kinds of options. But every single font adds roughly 50kb to the site load. Use web-safe fonts or limit the customs fonts to the bare minimum.
- Convert images to WebP. And don't use one of those plugins that creates additional images, but actually only upload WebP images. You don't need the additional JPGs, and they will fill up your server real quick, fast in a hurry. All modern browser of the last few years support WebP.
- Install WP Total Cache plugin, and configure it for optimal use on your hosting platform. It caches pages, and minifies and combines scripts, so they load faster. Now, if you have a template that performs really well, this plugin is actually too heavy. You're better off using something like Redis object cache and a dedicated minification plugin like Autoptimize.
- Make sure your hosting platform is running the latest version of PHP. The later versions tend to have all kinds of performance tweaks that help the whole system to perform better.
- Check which PHP extensions are available to you on the server. Extensions like Redis cache can increase the websites' performance dramatically.
Premium tip
Add the following to the functions.php file. It removes a lot of standard WordPress code from the template header that you usually don't need, yet slows your website any way. This will be overwritten at the next update if you use a downloaded theme, so probably best to use only on custom templates that you manage yourself. I wish WordPress would make it easier to manage all these scripts, and would not include them by default.
add_action( 'init', 'j0e_remove_large_image_sizes' );
// remove large unused images
function j0e_remove_large_image_sizes() {
remove_image_size( '1536x1536' ); // 2 x Medium Large (1536 x 1536)
remove_image_size( '2048x2048' ); // 2 x Large (2048 x 2048)
}
function wdv_cleanup () {
remove_action( 'wp_head', 'wp_resource_hints', 2 );
remove_action('wp_head', 'wlwmanifest_link'); // remove wlwmanifest.xml
remove_action('wp_head', 'wp_generator'); // remove wordpress version
remove_action('wp_head', 'rsd_link'); // remove really simple discovery link
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0 ); // remove shortlink
remove_action('wp_head', 'print_emoji_detection_script', 7 ); // remove emojis
remove_action('wp_print_styles', 'print_emoji_styles' ); // remove emojis
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head'); // remove the / and previous post links
remove_action('wp_head', 'feed_links', 2); // remove rss feed links
remove_action('wp_head', 'feed_links_extra', 3); // removes all extra rss feed links
remove_action('wp_head', 'rest_output_link_wp_head', 10 ); // remove the REST API link
remove_action('wp_head', 'wp_oembed_add_discovery_links' ); // remove oEmbed discovery links
remove_action('template_redirect', 'rest_output_link_header', 11, 0 ); // remove the REST API link from HTTP Headers
remove_action('wp_head', 'wp_oembed_add_host_js' ); // remove oEmbed-specific javascript from front-end / back-end
remove_action('rest_api_init', 'wp_oembed_register_route'); // remove the oEmbed REST API route
remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10); // don't filter oEmbed results
remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action('wp_footer', 'wp_enqueue_global_styles', 1 );
remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
}
function dm_remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'dm_remove_wp_block_library_css' );