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
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
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.
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 );
Use embedded css or load external css files in the footer too
<link rel="stylesheet" type="text/css" href="<?php bloginfo('url') ?>/wordpress/wp-content/themes/anygivenwordpresstheme/css/style.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.