Website Speed Test? How To Increase Slow Page Load Time For WordPress

You spend time and money developing content, marketing it, and ensuring your conversion rates are as high as possible. As a business owner or website manager, your job is to keep the traffic flowing and meeting your business goals and KPIs. If you haven’t given any thought to your website’s speed you could be leaving money on the table. Imagine if you could lower you bounce rate by 10%? How many more customers would that mean and what affect would that have on your bottom-line?

Your users probably won’t complain if the homepage is a bit sluggish. You won’t get a support request because your shopping cart didn’t load in a second. But you won’t have that user back again; and you will have that abandoned shopping cart sitting there, never to be recovered. Speed, or perceived speed, is a key ingredient in user satisfaction: a fast site is a big step towards a happy visitor and a positive brand interaction.

It’s not only people that love fast websites: robots love them too! While you might not care about the feelings of Google’s search engine spiders, you do care about search engine rankings —and speed is a key factor in the algorithm . An increase in website speed will, assuming everything else stays equal, lead to an increase in organic traffic rankings.

So while website speed is a step removed from the daily work of content marketing and e-commerce, it’s actually one of the foundations that hold up the entire operation. Let’s spend some energy improving your site’s speed to see positive knock-on effects across your entire online operation.

In this guide, we’re going to look at a wide range of factors that can improve your site’s speed and user experience. Many of these concepts will apply equally to all sites, but we’re going to focus on the CMS (Content Management System) that powers around 25% of the World Wide Web: WordPress. We will give code examples and address hardware and software issues that are specific to improving WordPress site speed, but the general principles will help any site pick up their game.

This guide will also walk through making changes to your WordPress theme, database, and media. We highly recommend backing up your site and working on a local staging environment. We can take no responsibility for any loss incurred when following these recommendations. If you happen to make a lot of money from speeding up your website, we’ll gladly accept a bottle of wine!

We want the quickest return for your investment, so this guide will proceed in an order that gives you the biggest gains for the smallest or simplest effort. Each section starts easy and becomes progressively more complex, so if one concept seems too hard, skip it and take a look at the next. We’re not looking too closely at server optimization, as for many people that’s out of their control: we’re focusing on WordPress application-level improvements.

Website Speed Test: Benchmarking

We’re going to start by finding out how fast your site actually is, using three different tools. Each has its strengths and weaknesses, and we’re going to continue using them to diagnose and improve your site’s performance throughout this tutorial.

First, load Pingdom and GTmetrix: these are our two web-based technologies. Secondly, we’re going to use the Query Monitor plugin, freely available from the WordPress repo, to look under the hood of your site.

Before we move forward, here’s an important question: where is your most-valuable audience located? Your website can load quickly in Dallas and in Dunedin, but it’s more likely to load faster in one or the other. If you sell products or services online, your client list or shopping cart analytics will give you the most insight. A blogger or publisher might have a larger audience on the US west coast while being based in the UK. In this case, you might choose to focus on what your advertisers are after: worldwide numbers, or access to a specific audience demographic.

While we should see speed improvements across the world, we want to be focused in on that primary geographical market for the best return on your investment.

Benchmark one:

Now we know our key market, we can start our benchmarking. Go to http://tools.pingdom.com/fpt/ and write in your site’s address. Unless you have a specific page you want to test, we recommend you start with the homepage.

Make sure you hit the ‘settings’tab and choose a location close to your target market. In the image below we see a comparison between Dallas, Texas and Melbourne, Australia:

Keep this browser tab open and move on to the next stage.

Benchmark two:

Our second online test is GTmetrix. In order to choose your location on this site, you must become a registered user. There is a free registration option that will give you access to the following options:

Website Speed test options available to logged in users of GtmetrixGo ahead and run your website speed test with the options that best fit your market. Make a note of your speed and the technical scores given in the GTmetrix and YSlow tabs.

There’s going to be variation between all of these tools, for the rest of the article we’ll refer to the platforms as Pingdom, GTmetrix, and YSlow. Keep this tab open and let’s do your last benchmark.

Benchmark three:

The previous tests have shown your apparent page speed from a user’s point of view. Now, we’re going to get under the skin a little bit and look at your WordPress installation itself. Performing these stages on a local copy of your site or a separate staging server will give more-consistent results than running it on the live website. If you can make a development copy on your own computer, we highly recommend it . It will also ensure you can test any changes instead of running the risk of breaking your own site. However, if that’s not possible, you can safely perform this on the live site.

Go to your Dashboard > Plugins > Add New and search for Query Monitor by John Blackbourn. Install this and activate the plugin. You’ll now have access to a set of diagnostic reports in the Admin bar. First, you’ll see the time taken to load the page, the peak memory usage of the page in megabytes, the database query time, and the number of database queries. This is how it looks in a fresh install of WordPress 4.1.1 with the default 2015 theme and no plugins installed.

Query Monitor showing WordPress 4.1.1 and the Twenty Fifteen theme.Make a note of your key statistics, and let’s start improving them!

Low hanging fruit —the front end

The quickest way to improve site speed is to remove broken and redirecting links. Pingdom gives us a great overview of this in the Page Analysis screen. We want everything to be in the 2xx Success column.

If you have redirects and errors, click back into the first Pingdom tab, labeled Waterfall, and sort by longest load time. You’ll likely find 90% of these at the top of the list. Redirects will be highlighted in light blue, while broken links will show up red.

In this example, the site is linking out to a wide number of outside websites using widgets provided by blog and advertising networks that are then redirecting the resources. In some cases, the best answer is to remove the widget. The next-best answer is to save the image or script resource locally and update the code, or to reach out to the provider and see if the redirect is really necessary.

Fixed your broken links and removed as many redirects as you can? The Waterfall, sorted by time to load, gives us plenty more to do.

What type of file is causing the slowest loads? Images, Javascript? Tackle them next for the fastest road to success.

In this case, the first 13 items to load slowest are coming from third-party domains! This means that it’s not you, it’s them! We can see static resources like Javascript and images which can be copied to our server and the code adjusted to load from there. You have to change some code to improve enqueuing, and we’ll look into that in the ‘more complex’section below.

Low hanging fruit —the database

How many spam and pending comments do you have? More than 100? Knock ‘em out.

How often do you use the Revisions feature? How far back do you go? Add the following line into your wp-config.php file to limit the number of revisions to three per post.

<code>

/** Disable the post-revision feature */

define('WP_POST_REVISIONS', 3);

</code>

What plugins don’t you use? Deactivate and delete them.

Now download and run the database scan on WP Optimize and follow their guidelines to remove old revisions, orphaned plugin data, and other database cruft.

Doesn’t that feel better? Your database is going to be running more smoothly now!

Image Optimization

For many sites, images will top the Pingdom waterfall list. While it’s helpful to see that they are slow, GTmetrix gives us more details on how to improve them.

In our experience, the three most-common high-priority issues regarding images that GTmetrix identifies are:

1. Served scaled images

2. Optimise images

3. Specific image dimensions

Along with these, we’ll look into image spriting to improve the number of resources used on each pageload.

The more images your page loads, the more impact image optimization is going to have. A blogger’s photo essay can be cut down by huge multiples, while a minimalistic text-based site isn’t going to have the same gains.

Served scaled images

Every time a browser loads an image, it downloads it from the server, then tries to fit it into the space that the page tells it to. If the image is bigger than the space available, it has to resize it. There are two ways we’re losing performance here: the first is in downloading the larger image. Imagine you’re buying a new kitchen cabinet: if you could get the same model and brand for $300 or $1,200 which would you choose? If you’re rational, you’ll pick the $300 option for a 4x saving.

WordPress makes it really easy for us to pick the right-sized image most of the time through its use of thumbnails. Every time you upload an image, WordPress will generate several different sizes. The default set can be changed in Dashboard > Settings > Media and are called Thumbnail, Medium and Large. Themes and plugins can add other image sizes through the add_image_size() function.

This gets a little tricky when it comes to responsive design: we load the same image on a 1200px laptop screen as we do on a 480px mobile. There are ways around this, but it’s not a quick fix: see the ‘more complex’ section below.

If you’re after the quick fix, which gives 80% of the results for 20% of the workload, here’s how we do it. Open your website on the largest screen your site will expand to (most sites have a maximum width for most of their content). Choose a photo from a post and right-click then “Inspect Element”.

We can see the page content is 715px wide, but the image is loading at 825px wideIn this example, we’re using Google Chrome, but all browsers have these tools available. We can see the width of the content is 715 pixels, but the width of the image is 825 pixels. The image is 15% larger than it needs to be for no good reason.

Back in the query monitor plugin, we can see this page template is single.php, so open your theme’s single.php file in a text editor to find out what image size is being used, doing a search for the_post_thumbnail and checking the first part of the arguments between the brackets. If this is a set of numbers rather than a word, you can adjust the numbers, but it’s often going to read ‘medium’, ‘large’or ‘full’. If it’s empty, that means it’s loading the full-size image, and we probably want to make it ‘large’if it’s the width of your content, ‘medium’ if it’s half-size, or ‘thumbnail’ if it’s a small image.

Finding the featured image size your theme is using in Twenty Fifteen. Here, we traced it from single.php to template-tags.php, and we can see it will use the full-size image that’s uploaded.From here we jump back into the WordPress media settings and can adjust our size accordingly. This is going to change the size of thumbnails that are created in the future…But how do we fix the backlog? Install and run Regenerate Thumbnails and then Imsanity plugins to resize your old images, then get rid of oversized originals that are taking up room on your server and causing them to be sluggish. When finished, deactivate and delete both plugins.

You might still see GTmetrix’s ‘serve scaled images’ warning when testing on smaller screens, but we know that the larger screens are getting the right-sized images.

Optimize images

We’ve got your images to the right size, but we’re still seeing this ‘optimise images’warning. Now, we’re buying a kitchen cabinet that’s got all the add-ons. The question is, will anyone notice?

Here, there’s a much bigger question to be asked: if you sell photography (or sell your products on the strength of visual imagery) you’re probably happy to take a hit on speed…of course, you’re also likely to know how to manipulate your Lightroom exports to remove metadata and change image quality. You can skip this section.

But if you’re not a photography professional, you’ve probably uploaded images from stock galleries and your own camera, screenshots, and images sourced through agencies or freelancers. All of these images have metadata that isn’t needed for web display, and probably has a non-optimized color compression that we can fix without causing too much damage.
We’re going to make a suggestion for the 90% here, and suggest a non-technical way to improve photo optimization without noticeable changes to the image quality.

Using an app like JpegMini or Image Optim, you can set a maximum image width and output directory, then drag and drop the jpg images you want to use and they will upload into it. This will quickly resize the photos, strip them of metadata, and do some compression wizardry to make the photos 20-60% smaller. Upload away! Other image types can be compressed using a variety of free or cheap software such as ImageOptim or a tool such as Codekit.

If you have a smaller number of images on your server, you might be well served by using rsync or sftp to download your /uploads/ folder, running them through jpegmini, then re-uploading them.

If this isn’t possible, use a plugin like EWWW or SmushIt once to deal with older images. We highly recommend deactivating and deleting these plugins afterwards. Ideally, you should do the compression before you upload and let your server do the work of serving pages faster, rather than the admin work of compressing images after.

Specific image dimensions

If serving scaled images is buying a kitchen cabinet for a better price, specifying image dimensions is choosing a kitchen cabinet that fits into the right space, rather than having to wait until you get it home and carving bits off the side to get it into place.

If a browser knows the image size, and that size matches the actual image, the browser doesn’t have to re-render the page. It can do it once and be happy.

This is easily done on non-responsive websites with the following additions to the image tag —WordPress should handle this by default for content posted using the media uploader if your Media settings are correct. Some themes and plugins remove this functionality for better responsive behaviour.

<img src="" alt="" title="" width="300px" height="300px" />

Once again, don’t load a 1,000px image and squeeze it down to 300px using this technique: scale your images properly.

Image sprites

Spriting is the fine art of having one image with multiple parts, then using CSS to show the part of the image we want in any situation. Because WordPress themes often load the same elements, it can be very helpful to add these into a sprite, rather than loading them individually.

Anything that loads on most pages and doesn’t change often can be added to a sprite: icons, small background images, logos, navigation backgrounds. By loading one image instead of multiple images, we can reduce the number of http requests. Here’s a guide on spriting best practice.

If you’ve followed the stages so far, you’ve probably stripped several seconds from your pageload time, and are looking around for the next step. Here’s where things can get pricy, so hold onto your hat and we’ll see what’s next, while helping keep prices down by providing some free and premium options.

Get Closer With a CDN

Our images are the right size, and have slimmed down so they load faster. So what’s the next step? Getting them closer to our audiences.

A Content Delivery Network (or CDN) is a tool used to ‘push’your static content —like your theme files and images —to multiple points around the world. These are normally charged on the amount of bandwidth you use, so smaller sites can get good speed bumps for $20 or less a month. Larger sites will be looking at larger CDN bills.

Compress all the things

Computer code is normally written in a nicely spaced and formatted style, with multiple line breaks, spaces and tabs. By removing all of those, we can often make the page size 10-30% smaller. This is often called minifying, uglifying or just plain compressing the scripts. Related, is gzipping —which compresses the rendered html on the server, to be decompressed in the browser.

Cache all the things

There are multiple layers of caching that can be applied to WordPress, at the webserver, database, application and browser level. We want to cache as much as we can without affecting the user’s experience of the site.

Lazy load all the things

Have you ever seen Facebook show an image a half-second after you scroll down the page? This technique is called lazy loading: we tell the browser not to bother downloading the image until the user is about to scroll to that point. It makes the initial page load much quicker, and doesn’t detract from the rest of the experience.

Async all the things

Normally browsers stop and wait whenever they come across a piece of Javascript (.js files ). This is because they can affect how the page has to be laid out. In many cases, like Analytics tracking, these can be loaded asynchronously (after the page is rendered). If you get this warning within GTmetrix, ask the code provider if they have updated code for you to run.

How to do all the things?

That’s great, you say, but how do I do all of these things? There are multiple paths, but the simplest is an all-in-one solution: Cloudflare.com.

Cloudflare is a CDN, optimizer, and security suite rolled into one. They have a free tier, and their first paid tier is only $25/month. This price drops dramatically if you have multiple sites under one account.

When you run your site through Cloudflare it can do all of the performance improvements above automatically on their servers, without you having to touch any code.

If you’d prefer to avoid using a third party, then WP Rocket, WP Super Cache and W3 Total Cache are three WordPress caching plugins that can do each step.

Caching Plugins

A caching plugin can help reduce server load and make sure pages get to your users more quickly. They normally work by taking the php and database entries for each page and turning them into a static page. They can also do some of the optimization workflows listed above.

There are dozens of caching tools, and choosing the best one for your site needs doesn’t need to be tricky. Each provides similar benefits, but can be tuned to different servers for best results. In order of ease of use, we’d recommend:

– WP Rocket
– WP Super Cache
– W3 Total Cache (W3TC)

Although these are listed in order of ease of use, and each can break your site when certain settings are activated. It’s important to test your real speeds using our benchmarking tools to see if a change has made your site faster or slower.

Set up guides will vary from host to host, but there are good walkthroughs which will suit a large number of hosting providers.

For WP Rocket
For WP Super Cache
For W3 Total Cache

When looking for set up guides for W3TC, make sure you find a match with your own server system, or your site might start loading more slowly or break. This is less likely with the other two options.

Note, that these plugins aren’t CDNs themselves, but each plugin will help you integrate a paid CDN: MaxCDN is a popular choice for WordPress users due to its pricing and ease of set up, while several specialist WordPress hosts will include some CDN bandwidth in their packages.

Hosting

Have you done all of this and are still seeing slow page loads? It might be your server. Every server has a certain amount of resources at its disposal to load your page and do all of its other tasks.

I highly recommend choosing a host that specializes in a WordPress environment, doesn’t process email on the same server, and doesn’t run a heavy management environment like cPanel. You want your server focused on doing one thing: serving WordPress pages as fast as it can. If your site is important to you, you also want to make sure your server (or virtual server) is only focused on loading your site —so you want a Virtual Private Server (VPS) or Dedicated Server (DS) at your disposal.

This is why the additional cost of a specialized WordPress host can make the biggest difference to your website speed. The three biggest are:

• Pagely
• Web Synthesis
• WPEngine

You can also manage your own virtual server: there are cheap but stable SSD VPS options from Linode and Digital Ocean that are worth looking into for small- and medium-sized sites. If you’re unsure about this, start here and prepare for a steep learning curve.

Needless to say, the closer your server is to your geographical target audience, the faster your page will load for those users.

Backups

Not mentioned above, backup plugins can be the cause of many WordPress slowdowns due to the server resources used. Dozens of plugins fail due to server timeouts, and sites go down because a poorly configured plugin used all the available space. We can recommend two options. The first is VaultPress which starts at only $5 a month for a backup run every 24 hours. If the backup fails, they’ll email you to let you know.

The second is a server-side option using a combination of WP CLI, Rsync or similar, and perhaps a versioning system like Git. All of the managed WordPress hosts mentioned above include a server-side tool that automatically handles backups for you —you just need to remember to log in every so often and download a copy: put it in your calendar.

Advanced Speed Optimization Advice

By now, your WordPress site should be loading in the 1-3 second mark; you might have even dropped down under one second. Nice work! The following set of tools can take you to the next level.

There are some points below where we look at code examples and more complex plugins that might be beyond your comfort level. Once again, we highly recommed having a backup of your site and testing these changes in a local development environment, not on your live site. If you’ve got this far and are still not happy with your website speed, but are getting out of your comfort level, consider hiring a professional to help you further with speed optimization.

Responsive image sizes

Remember how we optimized our images’scale, dimension and file size for the desktop? Now what happens if you load the image on your mobile? The 1000px wide image is now going to load at 480px wide (and that’s not worrying about Retina displays).

For non-developers, there are some different approaches to take. The easiest is to use Cloudflare’s Mirage tool, which resizes the images according to screen resolution between your server and the user’s device.

A similar approach within WordPress itself is the one outlined by CSS Tricks and turned into the official WordPress plugin of the Responsive Images Community Group.

Finding problem plugins

The most-common WordPress speed issues are around plugins. “Try removing plugins”has to be one of the most-common pieces of advice. It’s good, but not very scientific.

Things are further complicated by the range of different hosting environments available: a plugin might use a high number of database queries, but one host could cache these (eliminating speed issues) while another host doesn’t. Server side technologies like Varnish and APC could help here, and plugins and theme could make use of WordPress’s internal cache tools too. In any case, fewer database queries normally means more speed.

Two plugins might need a certain CSS library, and (if they’re poorly coded) might load them separately —effectively doubling the download size. What a pain!

There’s no silver bullet, but here is the resource to determine what’s causing all these issues: Query Monitor. If you’ve been following from the start, you’ll already have this installed and have some benchmark figures.

By monitoring the pageload, page size, resources, and database queries of each pageload with plugins activated and deactivated you can clearly see what’s taking up the load time.
More-technical users will enjoy taking a look at the ‘Queries by Caller’and ‘Queries by Component’section, where you can see the number of database queries and the time it takes to load them. You can also isolate slow queries by plugin function and remove or patch.

And if you’re after a cheat-sheet, here is the banned plugins list from Pagely and WPEngine. These are banned for all sorts of reasons, not only performance; but a wide range of them will use excessive amounts of resources.

It’s not only database queries that can cause plugins to slow down your site. Most will have their own CSS or Javascript that they load in order to function. You can see some ways to improve this below.

Enqueueing, not importing scripts

In the past, WordPress child themes often started with a standard php block with the plugin’s name and details, and then the command <code>@import ../parent-theme/style.css</code>, but it has been proven, importing in a CSS stylesheet is much slower than linking directly to the CSS in the HTML. The use of @import will show up in GTmetrix results, so we can quickly find and fix them.

Because of this, the new WordPress standard is to use an enqueue function like this: [http://codex.wordpress.org/Child_Themes]

<code>

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style',

        get_stylesheet_directory_uri() . '/style.css',

        array('parent-style')

    );

}

</code>

Depending on how much upkeep you’re likely to do, consider forking your parent theme rather than creating a child theme…Just remember to keep up with security patches.

Loading resources locally or from third parties when your server is faster

The number and relative speed of each of these external resources were slowing down this page:

[Image 6. Caption: External resources are loading more slowly than resources from our own server]

It’s possible to fix some of these quite easily, however it’s always important to check how they’re being used: some might be tracking cookies for an advertiser or something similar, so moving them could damage your bottom line rather than improving it.

Look at the images first: some of them redirected to a 404 page, others loaded, but slowly. We can download these to our own computer, optimize them, upload them to WordPress, and then change the img tag to point to the new address.

The Javascript can be handled in a similar fashion: upload it to your theme folder (often developers will have made an includes/js/ folder or similar), then look at how it’s called and un-hook and re-enqueue the script at the new address. This can best be done through the theme’s functions.php file or a theme-specific plugin you develop.

Loading resources locally or from third parties when your server is slower

Sometimes your server is slower than others: that’s often the case when you’re comparing your server to Google’s worldwide network of supercomputers. And that’s why some developers choose to use Google Libraries to load many of the core WordPress scripts. This also has the speed advantage of local browser caching: if a user has already visited a site that uses the same script from the Google library, they won’t have to download it again. Here is a WordPress plugin that allows you to do just that

More considerations for CSS and Javascript

Because of the modular plugin infrastructure of a WordPress site, different plugins are loading their own CSS and Javascript files. That’s OK if there are three or four, but sometimes sites end up with dozens.

We can often combine these into one CSS file and one Javascript file which will generally improve performance. There is a balance to be struck between the size of the one file (large files can be painful) and the ability for browsers to download multiple resources in tandem: you must test to find the best option for your server and preferred devices.

The tricky issue is keeping these files up to date as plugins update. The answer to this must be to handle the concatenation dynamically —copying and pasting bits of code from all over the place and remembering what to check for each update is not an acceptable way forward.

If you have server access, ModPageSpeed (apache) or PageSpeed (nginx) can handle this for you. Otherwise, some caching plugins can do it: WP Rocket, for example, has a simple function that will combine your CSS into one file.

Another way would be to use a CSS pre-processor like Sass to import all the project files into one; or a post-processor like Grunt or Composer. In this case, you’ll also need a custom function that stops the plugins from enqueuing their own styles in addition to the new “master”CSS file.

Inlining CSS and Javascript

Recently, much has been said about the role of including small segments of CSS and Javascript in the html itself. This is referred to as ‘inlining’the scripts. The browser has to load fewer external resources, and can start rendering the page much faster. The Google PageSpeed https://developers.google.com/speed/pagespeed/ tool will recommend inlining everything needed to render content above the fold.

The downfall is that the CSS is not cached in the browser, which makes every successive page load that little bit slower; so you’re swapping one type of performance (one resource is faster than two) for another (two resources with one cached is faster than one).

This is a big departure from the separation of design and content that web developers have been pursuing for the last decade and, while guidelines are developing, this practice hasn’t hit the mainstream of WordPress performance yet and could face issues with the modularity of plugin and parent/child theme architecture.

Now we’ve done a lot of our work, it’s a good idea to remove the Query Monitor plugin. This isn’t something we need for daily use, so let’s follow our best practices and deactivate and delete it.

Can WordPress be Fast?

WordPress can be a very fast and efficient Content Management System, and has some of the finest minds in the Internet world ensuring that it’s better at each release. But a lot of the power is in your hands, and in the server environment, caching tools, and theme and plugin options you choose.

You’re now equipped to make better server and caching decisions, start optimizing themes and choosing plugins that make your site faster, more visited, and more valuable.

Did you get a speed kick out of any of these recommendations? Let us know in the comments.