WordPress Optimization Checklist

WordPress optimization is the art of making your website run as fast as possible, improving your user experience, reducing server costs and has SEO benefits.

Many studies show that visitors do not wish to wait for a website to load, and are inclined to jump away from your website if it takes too long to load.

A fast loading website is especially important for you if you have a webshop and wish to improve your conversion rates.

Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1% (Kohavi and Longbotham 2007)

Source: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

The loading speed of your website is also hugely important to your rankings on Google, making website optimization a part of your SEO strategy.

But, my website loads really quickly!

Sure it does. At least for you. But have you tried visiting your website for the very first time in a long time?

When you navigate around on your website, most of it will be cached in your browser. If you want to get the first-time experience, clear your cache or use a completely different browser.

There are a lot of things to do that can improve the speed of your WordPress website, let’s get started.

Minifying scripts

WordPress websites are a combination of HTML, CSS, JavaScript and imagery. The HTML code is loaded first and it then has information about other files of CSS style sheets, JavaScript files and the images.

Each file is loaded in turn. A browser normally has a limit of 2-4 “pipes”, meaning the browser will only load up to 2-4 files at the same time from the server the files are hosted on.

If you look through your HTML code of your WordPress website, you will notice many different .css and .js files. Each of these are usually from different plugins, each adding either .js or .css files to the mix.

In some cases the plugin will even inject JavaScript or CSS styles directly in to the HTML 🙁 Most WordPress plugin developers or theme authors are clever enough not to do this.

This is just a sample from a normal WordPress website. The HTML code has links to several other files. In this simple example 4 JavaScript files are loaded, one by one.

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script>

WordPress has internal functions that allows plugin and theme authors to embed necessary JavaScript and CSS files.

wp_enqueue_script() and wp_enqueue_style(). The names of the functions give a solid clue to what they do. By using either of these to embed necessary files, plugin and theme authors queues their files together with all the other plugins and even WordPress itself.

It’s also possible to instruct the functions of any dependencies of other libraries, usually a JavaScript include file is depending on jQuery to be loaded first.

I usually find and install a minifying plugin, activate and then see if anything breaks on the site. From there I go to pinpoint what exactly is failing and if I just need to change a couple of settings to fix it.

Minifying plugins tend to have exclude settings for specific files that do not play nicely when loaded with others or for changing where files are loaded, in the header or footer of the document.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Note: In the code sample I store the url of the theme in to a variable and then parse that to the wp_enqueue_script function. This reduces the number of PHP and/or database calls needed, adding to increased speed.

In the quest for extreme loading speeds I could choose to hard-code the absolute url path, but this would limit the theme to just a single domain, and it would make it harder to re-use the code on another site.

After installing a minifying plugin, JavaScript and CSS style sheets are now joined into fewer HTTP calls.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

This combines the 4 files in to a single “file”/request for your browser.

I have come across WordPress based websites which had 22 .css files loaded as well as 15 .js. All on the frontpage. The change in speed can be amazing if you can reduce the amount of external files.

Although minifying scripts tend to have huge speed improvements, it is also one of the techniques I use which tend to bring most problems in setting up.

Optimize header.php

The header.php in your theme is called on each and every page on your WordPress website. This file usually has a lot of elements that can be optimized.

A classic example is the bloginfo(‘template_directory’) which is usually called several times in the header to return the url of the theme for including external files.

A more efficient method is to make a single request for the url, and then store it as a variable.

$template_directory = get_bloginfo('template_directory'); 

The url of the theme directory is now stored in the variable $template_directory.

More examples of how to improve the header.php efficiency can be read in the blogpost WordPress header.php Optimization Tips

Reducing the number of plugins

Another important part in WordPress optimization is keeping the number of activated plugins as low as possible. It is tempting for many users to test and experiment with different plugins, which indeed is one of the benefits of WordPress.

However, having a lot of plugins active can reduce the speed of your WordPress website. Many plugins have a single function which could just as easily be handled by a piece of code put in your functions.php.

In many cases you might only need a single function, but the plugin you use have several other options which you never use.

Analyze each plugin on your site, and make sure you need them. If you do not need them or the functionality can be replaced by functions.php code, deactivate and delete the plugins.

Don’t use images – use CSS3

The design of websites use images to help make the user interface.

After the introduction of CSS and in particular CSS3, many effects that are used for web interfaces can be mimicked by using CSS and HTML code.

[box]Note: Most of these effects are not compatible across all browsers, in particular older Internet Explorer (yes, always the problem child for any web developer). If you wish to optimize the speed of your website, using CSS effects can be a fast and quick solution, but not a good choice if the major audience of the client uses outdated browsers.[/box]

If you are working for a client that targets B2C (business to consumer), you should check their Google Analytics or ask them about which kind of clients they have (or wish to target). This can influence if you can use CSS3 effects if the customers audience generally use outdated browsers.

When Elegantthemes.com released a new version of their shortcode plugin it had a huge impact on loading time for my customers due to the CSS3 effects and putting multiple images into a single sprite.

The shortcodes/images folder, which used to contain 90 images, now has a single PNG sprite, taking the overall size down from 140kb to 15kb!
(That is about a 90% reduction in size.)

Images to sprites

Sprite optimization of an existing theme can be a bit time-consuming, but it can also bring a big speed improvement for your website.

A sprite is a single image, usually in .PNG format that has several elements of your visual design/layout. Instead of loading each graphical element individually, all images are joined into one or as few sprites as possible.

This technique should only be used for the images used to layout the design, and not for individual post featured images, thumbnails etc. The only images you should try to put in a sprite are the images that are used throughout your website on every page.

Instead of loading each individual image (a different http request), all images are grouped into one file, and the CSS displaying each image is modified to simply nudge the background to where in the sprite the part needed is.

SpriteMe.org is an excellent ressource for creating sprites. The best method is to plan ahead and build your sprites first, but if you need to fix up an existing website, the spriteme.org site has a bookmarklet that makes the process very easy.

Example of CSS styles in combination with a sprite:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Each css style references the same file, but the background position is different, showing the different parts of the image.

Distribute – Use a CDN

There are two main benefits for using a CDN (Content Distribution Network) for hosting your theme files and elements of WordPress.

Your files are loaded faster since they are on a different domain. The browser limit of 2-4 concurrent download of files is for each domain.

So if your files are hosted on a different domain, a browser will load these files by themselves, in fact making your website to load faster as well as reducing load stress on your domain and your host.

Another benefit is if you are using a major CDN, they will have servers distributed throughout the world which then detects where your visitor is from and then serving them your files from the closest server in their network.

The right server for your website

The server hosting the website needs to be located close to the target audience. So if a website is targeted towards the German market, it is best to find a server with a hosting company in Germany, or at least in Central Europe.

This has a big impact for your visitors that load from a server much closer to where they are located, making browsing your website a lot faster.

This also has a SEO influence, not only because the site loads faster, but also because it adds to the importance of the website for the German audience and hence also should have a higher ranking.

The real effect in terms of SEO is debatable  but if you are trying to improve your websites performance, it is worth considering.

This is well-known for SEO’s, but once a site has been set up, it is rare to see it moved to another server for purely SEO reasons. It is worth keeping in mind for your next project though.

Fix 404 errors

You should be running a check of your website regularly to ensure you have no 404 – not found pages anyways. Reducing bad links on your website can reduce server load and will give a better user experience. Not only can links and pages go missing, sometimes a typo or another kind of mistake can lead to content not found on your website.

Tip: Check out this piece of code to automatically 301 redirect not found pages.

[box]
This page is far from finished and does not cover all details of WordPress optimization – yet. The goal is to create a resource of tips and tricks for getting the most out of your WordPress site.

Some or most of the tricks will be difficult to implement unless you are a developer, but every one of them will make your WordPress site run faster.
[/box]

The checklist

This is the checklist, please note each website and project is different. Not all steps can be used on all websites.