Speed is one of the most important considerations when optimizing a WordPress website.
In fact, studies suggest that 47% of consumers expect a website to load in two seconds or less. Forty percent will abandon a website that takes more than three seconds to load. If you’ve never tested the load time of your website, chances are very good that it fails these two tests.
It’s very easy to call yourself a WordPress developer, even though you may not know (or care about) the necessary steps involved to build an fine-tuned site. WordPress out of the box is pretty resource intensive and can run pretty slowly on your typical web hosting server.
By resource intensive, I mean that when somebody requests one of the web pages on your site, what they’re actually doing is requesting a whole bunch of different things. Their web browser is saying “give me the main page, the images, the script files, the embedded video, query the database for the content, put it all together and deliver it to me, post haste.”
While this is all well and good, and exactly how it’s supposed to work, there are several things you can do to simplify the process and speed up how fast everything is retrieved, put together and served to the end user.
Test your WordPress site first
The first step is to run your site through a speed testing tool to get an idea of how fast it loads, and how big the sum total of everything is in terms of bytes of data. Most people have high speed connections these days, but that doesn’t mean the 20 megabyte homepage your web developer set up for you is going to load in under two seconds.
My favorite speed testing tool is GTMetrix. It’s easy to use, intuitive, and will give you a very comprehensive report on your website’s performance. It includes both Google’s Page Speed metric as well as Yahoo’s YSlow. You can learn more about the difference between the two here, but I typically focus on PageSpeed
Both of these metrics test various qualities that Google and Yahoo deem important, such as caching, image optimization, and the compression of scripts and CSS. To give it a try, just enter your URL in the field and click “Analyze.” Let’s take a look at some common results.
Don’t use scaled images and make sure they’re optimized
Here’s a good (by which I mean bad) test of the U.K. tourist site This is Your Kingdom. Nice looking website, right? I think so. Yet the speed test is pretty bad, as you can see below.
The first thing I look at is the Page Load Time and Total Page Size, in this case 3.5 seconds and 2.06 MB respectively. Three and a half seconds is too much, and over 2 megs is more than I like to see on a homepage, although not nearly as bad as some sites.
If we take a look at the PageSpeed score and recommendations, it’s pretty obvious that this website has some image optimization issues.
First, image dimensions should always be specified whenever possible. This lets the browser know how big the images are, and allows it to render the page much more quickly. It’s a simple thing to ensure is done, but still overlooked a lot of the time.
Second, you can see this site gets a very low score for “serve scaled images.” This is another common problem, especially in the modern days of responsive design where images are resized depending on the platform (desktop, tablet, phone, etc). This problem is sometimes hard to avoid, but care should still be taken to minimize the issue whenever possible.
Next, we can see the site also scores quite low for “optimize images.” Often, this can be avoided just by installing an image optimization plugin like WP Smush. This plugin will both optimize images as you upload them as well as crunch the images you’ve already uploaded. I would advise against using WordPress without some kind of image optimization plugin, especially if your site is image intensive.
The best way to manage images though is to optimize them by hand or in batches before you upload them to WordPress. You’ll have much more control that way, and you’ll be able to fine-tune both the dimensions and the level of optimization for best results.
Watch out for enormous images slowing down your site
Here’s another good test case, and one that illustrates the issue I mentioned before about huge images used in WordPress themes. High resolution photos are great, and so are the image sliders and slideshows. But when you start combining the two it can lead to enormous web pages that take way too long to load.
For instance, here’s a test of the Saint Francis Foundation’s homepage.
As you can see, this homepage is huge at 18.5 megabytes. Those are nice images and all, but that’s just way too big for a homepage. A five second load time for a web page that size is not bad, but still much longer than you want. Looking at the details of the test, you can see that even though the images are fairly well optimized, the overall size of the page is giant.
This is because the images being loaded in that nifty slideshow are 3000 pixels across, and designed to span the entire width of the browser window. Nice in theory, but in practice it’s slow loading and doesn’t look nearly as good as it probably did in the designer’s mind. It’s time to look for a happy medium between design and function and drastically reduce the size of this homepage.
What about caching WordPress?
So glad you asked. Bottom line, don’t run your site on WordPress without using some type of caching. What does that mean exactly?
In a nutshell, it means that when cached WordPress doesn’t serve a webpage as it normally would. Instead of querying a database, putting a set of template files together, building the page and serving it up to your browser, it serves a cached, or prebuilt page instead.
This means that the numerous database queries that tend to slow down a typical WordPress website are eliminated. Instead, the server creates a temporary cache file which is served up in its place. As long as the cached file exists, the browser gets that and no query of the database ever takes place.
Most of the time you can use a caching plugin like W3 Total Cache. In other cases, such as with SiteGround (one of the web hosts I recommend), the caching is built into the hosting environment and needs to be configured there.
Either way, make sure your site is cached and you’ll literally shave seconds off a typical load time. In some cases, if your site starts getting a lot of traffic, an uncached site can even generate a lot of load on the server. In some cases, your web host will suspend your account because of this, which is not a good look. Eliminate this risk by caching and testing your site to ensure it’s not an issue.
What to shoot for in a WordPress site’s speed
As a rule of thumb, I like to see a homepage load time of less than two seconds, and I like to see the total page size under 1.5 megabytes. In these days of ubiquitous broadband connections, more people are using large images and background video to achieve cool visual effects without considering what it costs in terms of speed. Your fancy image slider won’t help you if your users hit the back button before your site can load.
Bear in mind, not everybody has a super fast connection. There are still a lot of people using fairly slow DSL, the WiFi at the local Starbucks, or their smartphone’s mobile connection. Keep all these users in mind, and don’t just test your site on your fast cable modem at home and assume it’s fine.
I hope that helps you understand the basics of WordPress optimization for speed. There are a bunch of other tricks you can use, and much has been written on the subject. If you have any questions, let me know in the comments below or feel free to contact me.