Optimize WordPress for speed – advanced techniques

In this second part of our tutorial on how to optimize WordPress for speed, we will dive deeper into advanced techniques that will help you to overcome the most common issues when it comes down to fast loading times. Contrary to the first part, where we discussed the basic prinicples, a deeper knowledge of coding and php is required since we will alter the default code in your WordPress files. Don’t forget to make a back-up of your website before you start changing anything or make a copy on a local installation.

What kind of issues require in-depth solutions?

Two very common things you will have encounterd when conducting a speed test are probably these:

• Reduce the number of server requests
• JavaScript and css-files above the fold blocking content

Unlike the other topics we tackled in the previous tutorial, these two cannot be fixed by installing a simple plugin. So let’s deal with these one after the other.

1. Reduce the number of server requests

Every external file or dependency that has to be loaded into your webpage slows that page down and deteriorates the user experience. Most of the times, it will be image files and external css files and JavaScript files.

Use sprites for icon images

Every website is loaded with small icons. Think about social media icons like you find in the header of this website, icons for a link to the homepage, arrows for slider navigation etc. If every one of these icons were a separate file, they would all have to be loaded separately, invoking a server request for every icon, regardless how small it is. A better solution is to put all the icons into one file (.png, .gif or even better .svg). Now you only have to load a single file. You can then position every icon as a background image with css. For instance, the sprite for this website looks like this:

This reduces the amount of server requests dramatically. Note I have added a background colour here, just for the visibility in this post. The actual sprite is transparant, obviously.

2. JavaScript and css-files above the fold blocking content

By default, many WordPress themes will load all css files and JavaScript dependencies in the header. This is not the perfect place to do so because it prevents the rest of the page being loaded. There are two ways to get around this: you can load all css and JavaScript in the footer or you can choose to put all css and JavaScipt code embedded in the webpage. There are some pros and cons for each solution.

Load JavaScript in the footer

WordPress is a top-class CMS system, so it does a lot things for you by default. It comes with its own jQuery library and al lot of themes have their own JavaScript libraries included.

Dive into the functions.php file of your theme and locate where the styles and scripts are enqueued. Probably you will find something similar like this:

wp_enqueue_script( 'anygivenwordpresstheme-skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), array(), '1.0');

By adding ‘true’ at the end, you specify this resource has to be loaded through wp_footer() rather than through wp_header().

wp_enqueue_script( 'anygivenwordpresstheme-skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), array(), '1.0', true );

Take care! Many jQuery plugins have certain dependencies and require other libraries to load first. The only way to find out is through a step-by-step debugging process. It is also worth noticing that WordPress’ latest default twentyseventeen theme does load JavaScript in the footer where possible.

Use embedded css or load external css files in the footer too

As is the case with JavaScript libraries, many external css files are also queued via your functions.php file. However, you cannot load these in the footer the same way as you can with your js-files. The alternative is that you copy-paste the entire contents of your external css-files into the head of your webpage as embedded css. This wil again eliminate every server request for the external file but it can make your code bloated. This can make work harder if you have to make to future changes to your code. You could still opt for external css-files but call them in the footer manually.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('url') ?>/wordpress/wp-content/themes/anygivenwordpresstheme/css/style.css">

You can minify these external files again, reducing the file size even further. There are tons of minifying tools out there, both for JavaScript and css.

You see you can optimize loading times pretty easily by tuning some code in WordPress. Faster loading times will definitely have a positive effect on the overall user experience of your website.