“Also take a step back for a minute and consider the intent of this change: a faster web is great for everyone, but especially for users. Lots of websites have demonstrated that speeding up the user experience results in more usage. So speeding up your website isn’t just something that can affect your search rankings–it’s a fantastic idea for your users.”
–Matt Cutts, Google’s Spam Czar
Before we go any further, we need to say this: Website speed is one of the few factors that Google admits is an actual ranking factor. This is one reason why we place such a high importance on site and page speed.
There is no 1 tactic, plugin, or script that will speed up your WordPress website. The process of optimization a WordPress website for speed is no easy tasks, especially for larger websites.
If you perform every update and tweak in this guide, have the best caching, CDN, smallest images, and least plugins – and then you put your site on a shared hosting plan, don’t expect it to work. Site speed has to be treated holistically. We worked with a webmaster for months insisting that minifying CSS and adding browser caching was the key to getting their site to load in under 30 seconds…yes 30 seconds. But no matter what tweaks we made, none of it mattered because it was sharing resources with 10 other sites.
In our experience of ranking websites and SEO, website and page speed is a huge factor when it comes to ranking. As an agency, one of the first (and most important) factors when it comes to SEO that we focus on is page and site speed. In this guide, we’re going to focus on WordPress specifically. Many guides have been written on optimizing websites in general, this post will focus on WordPress.
With WordPress gaining more and more popularity, we wanted to take this opportunity to create the ultimate WordPress SEO site speed guide, based on our experience and a what we’ve learned from other sources.
Facts about website speed, from a published study at Nielsen Norman Group:
Most websites can get away with loading in 1-3 seconds, outside of that you should probably start to worry.
Figure out what you want: lots of bells and whistles, or a site that loads fast and ranks well. In many cases you cannot have both. Google does not show their cards very often, but one thing they have continued to talk about, is page speed. Google has developed the mobile friendly test, which is one of the most relied upon tools by SEO’s around the globe.
Great user experience does not mean adding every plugin and widget to your WordPress website that looks cool to you. It means curating your content in a way that will allow your users to browse your site with minimal effort. User experience means carefully considering what your users what, and crafting a website based on that.
Think about your website from a holistic point of view. Make a list of all addons, plugins, features, and code snippets that you have.
For instance: If your site takes 5 extra seconds to load your StumbleUpon share button, chances are your users are going to hit the back button before they would share it on StumbleUpon.
A lot of SEO’s have the opinion of “I’ve optimized my homepage for speed, the rest is good.” Quite the contrary. Inner pages quite often are the most resource intensive, and can really bloat up if you don’t watch them.
It is fine to start out by optimizing the homepage, just don’t forget the rest of the site. In WordPress, there are many areas that apply to the entire website (most of the time):
While many areas that are on a page level:
The best thing to do is test your site in batches. If you have a 100 pages, make yourself a spreadsheet:
No matter what you are doing, it is always a good idea to save the “before” results to a spreadsheet so you can go back later and see how well you did. You can approach the site speed optimization on a page level however yo like. You can do 1 page at a time, or do it all at once. Take your time and give each page individual attention. It is just as important that each page loads fast as it is to be mobile friendly.
In order to measure how well you’ve done, you must start by doing a site speed check. How fast or slow your site is loading at this point is important, but not as important as seeing what files are loading, how large they are, where they are loading from, etc. Over the years, Pingdom has really become the standard for a “quick check” and is really quite thorough. There are many other tools out there, this is just what we use most of the time. In order to see what to improve on, we need to find out where we stand in the beginning. To begin, enter your URL into the tool. If you are optimizing one page, enter the page into the tool.
In this example our test site loaded in about 6.5 seconds, it had 178 requests and it was about 12.3MB in size.
Test WordPress Site Issues
Looking at the “waterfall” you can see that it took well over 1 second for the site to start loading. This can most definitely be chalked up to a hosting issue, or more likely a slow DNS server. Next, we look at how many requests the site made, which was around 178. While thats not the highest we’ve ever seen, we’d definitely like to reduce that to around 100 if possible.
When performing a website speed test on a WordPress site, there are several aspects you want to look at:
The ultimate goal within this guide is going to be reduction. Reducing size, without reducing quality that is.
Getting your WordPress website on a good host is half the battle. You can have an identical website on two different hosts, and will load completely different depending on the speed of the host and the hosting package it is on.
Find yourself a top level hosting provider. We personally love Liquid Web / Storm but there are a lot of good options out there. Go with a big name and not a re-seller. Stay away from “consumer hosting” companies such as Godaddy, or Hostgator especially for WordPress websites. We could give a lot of personal recommendations. There is currently a huge discussion going on about the benefits of an Ngnix server but that is for another day.
Once you’ve picked a host, you need to pick a package. At the very least we recommend getting a VPS. While many times a shared host will do the trick, you just never know what kind of other sites you are on the same host with, sharing an IP with, or what kind of hardware they are actually using. With a VPS or dedicated server, you at least get a larger piece of the pie.
If you are looking for a good host, here is our top picks:
Content Delivery Networks
To put it simply, a CDN distributes your content to servers across the globe, rather than having it sit on one server. The advantage to this is your data will travel shorter distances to get to where it needs to be. There are numerous other advantages to a CDN and very little downsides. If you can afford it, do it. This image illustrates how a basic CDN works and as a bonus, the actual image is hosted on our CDN:
CDN’s are really an optimal solution for anyone looking to speed up their site speed. Pricing for CloudFlare, which is one of the most popular CDN options start at free, and go all the way up to thousands of dollars per month.
Amazon’s Cloudfront is for the big boys and girls. A lot of the top sites on the internet use them for hosting and CDNs. Note: you need to know your stuff. I’ve been a Linux geek for over 10 years and know my way around an Apache server, and my conversation with Amazon’s representative was slightly over my head. The internet as a global entity and is a total different world.
There are a lot of options out there. One thing to note is that pretty much any of the major CDN’s out there will increase your site speed by 50%.
A few other CDN’s that I have worked with in the past in one way or another are:
Go back to your initial baseline report and check to see how many files your site is loading. Ideally your site should be loading less than 100 files. Less than 50 is great, and under 25 files is superb. If your site is loading over 200 files, you need to start whittling them down. Check out how awesome Moz is (at least in 2014 anyway)
Moz.com preaches SEO all day every day. With a site like that, everyone is watching them and I’m sure testing their site speed like we are. They are literally one of the best examples of a modern CMS (not WordPress, but good for the sake of this example) that does not load a bunch of files or requests.
The best way to reduce your requests is to go down the list 1 by 1 and ask yourself “Do I really need this request or file?” If the answer is no, then find a way to scrap it.
An example of an HTTP request can be any of the following:
For more information about HTTP requests, check out our section about domain sharding below, and how it can help.
One of the firs things that we do at Elite Strategies when optimizing any WordPress website, is look at the number of embeds they are using. We’ve seen websites have as many as 100 plugins on a basic website!
Ask yourself: how important is it to have a Twitter feed on every page in your sidebar? Most companies just don’t need it. Here are a few tips:
The list goes on. Examine each and every embed, and see if you can get rid of it.
Nope, I didn’t mean sharing. The term is “domain sharding” and is not limited to just WordPress websites. While this is a very simple concept to understand, domain sharding in WordPress can be somewhat of a difficult technique to implement in WordPress. Let me start off by saying, do not use a plugin for this. Domain sharding is a technique that involves splitting resources across multiple domains. As a very basic example, when a website loads instead of all of the files coming from “example.com” the images on that website are loaded from (and hosted from) exampleimages.com.
This is a very similar technique as using a CDN, but quite different. A CDN spreads information across the globe, to make the distance shorter when downloading files. Domain sharding increases the number of current connections when downloading or requesting the files. A basic analogy is this: if you need to transfer 4 buckets of water from point A to point B, it could get done much quicker with 2 or 3 transferring the buckets, than with only 1 person transferring the buckets.
Modern day web browsers can handle on average 4 requests per hostname (domain.) Most websites only take advantage of one request per hostname, domain sharding allows you to take advantage of these extra “lanes” when a website is loading. If you want some research, check out this amazing study by the Yahoo engineering team on parallel downloads or domain sharding.
Domain sharding is something that even the smallest of websites can benefit from. Even if you get 1 visitor per day on your website, it will make your website faster. But that’s not to say everyone should do it. What most people don’t realize, is that many websites take advantage of domain sharding without even knowing it. Anytime you host an image externally for example, you are taking advantage of domain sharding.
For image heavy websites: for websites with lots of images might want to consider putting all images on a separate domain. This isn’t as easy as adding some code to your website or installing a plugin, this is definitely something you should think about. I won’t get into exactly how to do this tactic here, as there are a few ways to do this. There are a few simple tricks to start taking advantage of domain sharding right away, such as by using CDN sub domains, but I don’t consider that to be true domain sharding.
You can take domain sharding a step further by offloading your database to a 3rd party like Amazon RDS or Google Cloud. See more of that in the database optimization section.
Lastly, if you are on the fence about domain sharding just remember that all major websites from Facebook to YouTube to Google all use this. It is really up to you. If you are a true WordPress speed junky and want to shave off a few milliseconds from your load time, domain sharding is definitely an option.
Let’s keep this simple: keep your image file sizes as small as possible. There are many WordPress plugins, scripts, image compression, caching, and all sorts of different tools that can do this for you. In general, there are a number of different ways to optimize images on your website.
If you are a developer or have one at your disposal, one way to do this is to put all of your images into a CSS sprite. An image sprite is a collection of images put into a single image. Using sprites will reduce the number of images that your page loads and save valuable load time. If you have only a few images and they are very small it might not be worth it, but site’s with lot’s of images could very well see some great speed savings from this.
If you need some help getting your sprites sprited, you can check out this (free) online tool to help you get started.
Another tool that we recommend for image optimization is the EWWW plugin. This plugin will scan your website and attempt to compress each image the best it can. Here you can see a little message from our website, showing how much space savings it has done:
A lot of times, this plugin will save images by as much as 50%. Sometimes more, sometimes less. It is a free plugin, but you have to buy image credits.
If you want to manually compress your images, and you aren’t a hardcore developer or network admin, consider checking out tinypng.com. Don’t let the domain name fool you, it can work with both png and jpeg files. Before you upload your image, just drop it (literally) onto the website, and it will spit out an optimized image. If you are an artist or illustrator, I’d recommend double checking to make sure the image quality suits you, but for the majority of the time there is very little quality loss.
The above image illustrates a 68% savings in overall file size. It shrunk an image that was 47kb down to 15kb. Image a large site with terabytes of files, how much savings that would be.
Image Resolution / Actual Size in WordPress
Another common mistake we see webmasters making is using in WordPress the wrong image size. Not the file size, but the actual size of the image For instance, think about a tiny little Facebook logo in the footer of the website. There is no reason for this image to be 1000 x 1000 pixels. Most likely it is closer to 50 x 50 or even less. If you find that you need to resize your images to a great degree, you might want to consider deleting them, shrinking them, and re-uploading them. You’ll shave off a lot of speed in the long run. It is fine if you shrink an image down a little bit using image attributes, just don’t make a habit of scaling them down by a lot too often.
If you are optimizing your WordPress site on a page by page basis, open each image in a new window. Compare how the actual size looks compared to the image on the website. If the actual size of the image is HUGE and the image on the website is tiny, you have a problem. There are 2 options:
The only difference here really is a matter of if you care the image might 404 in the future or not. That is a totally separate discussion for another day.
This is kind of a tricky concept. Lots of developers say plugins are bad for WordPress speed. Others recommend certain plugins to speed up your site. Which one is it? Well, life isn’t always black and white!
Start by getting rid of any plugin that you don’t need. Do you really need a Facebook like plugin on your home page? Is that important to you really? Most of the times, converting a customer or getting a lead is more important than getting a “like.” Do your customers need to see your Tweets in a live feed? Probably not.
W3 Total Cache
“W3 Total Cache improves the user experience of your site by increasing server performance, reducing the download times and providing transparent content delivery network (CDN) integration.”
This is a very controversial plugin. Maybe the fact that it was compromised in the past. If you do not know what you are doing this plugin could harm your site and cause negative effects on your SEO. I highly recommend that you read up on the plugin’s documentation and play around with it on a test site before you go activating it. A few other pet peeves when it comes to WordPress plugins:
This is a great plugin for WordPress site speed, just be careful and make sure you know what you are doing. It is just as easy to screw your site up irreperably as it is to speed it up. Backup always first!
A plugin to measure plugins. There is a plugin that has been around for a while now called P3 Profiler. It is for WordPress users (not really for developers) that want to measure the speed and how plugins impact the overall speed of their website. You install and run the plugin, then it will give you a nifty little pie chart or line graph showing how well your plugins are doing.
Here is a sample output / result from the plugin. As you can see, all plugins are more or less equally hogging of the resources, with the exception of a small few. As expected Gravity forms is hogging the most resources, along with SEO Ultimate while other plugins such as AMP are taking the least.
This is really a topic that in some sites could deserve a section of its own, but for most sites a plugin will do just fine for MySQL or database optimization in WordPress. Unlike normal websites, WordPress saves a lot of it’s data (such as the text within this post) inside a MySQL database. Like anything, over time it can become bloated and poorly optimized.
We can get all fancy here and tell you to log into your ssh and start typing commands or running MySQL queries, but to keep it safe there is a great plugin that can do all of this for you. We recommend using WP Optimize, a plugin that we’ve been using for years. The great thing about this plugin, is that you don’t need to keep it active unless you want to use it.
For the most part, optimizing the database comes down to deleting extra “cruft” organizing the tables, deleting stale content, and getting rid of backups and spam.
Before using this or any other plugin, always be sure to backup your entire database. Go ahead and backup your entire website while you are at it!
As you can see from the image above, it is rather easy to save a lot of space in your database. A small database is an efficient database, and an efficient database is a fast database.
Once you have your database optimized, you should be left feeling fresh and clean. If you have a very large site this will more than likely add some precious speed to your site.
Chances are you are already “stuck” with the theme you’ve chosen. If you are starting from scratch and installing a new theme, try to find one that is very small in size and isn’t bloated with a ton of calls or http requests. If you are a developer, then you know a scaled down version of a WordPress theme or “bare bones” theme is the way to go.
One trick I like to do is find the demo theme I am considering and do a site speed analysis on the bare bones site, or a speed test on the demo WordPress theme if you will. This will not only give you a baseline of how fast it will be, but it will show you what files it loads and how large it is by default.
Custom themes made by designers can be great, but a lot of the times aren’t coded correctly after the initial design is made. One trick we’ve learned over the years is to use a bare bones theme scaled down, and use it for the same site.
Designers and UX enthusiasts are demanding more and more features in WordPress. This is causing themes to become larger and bloated with all sorts of features that you don’t need.
If you’ve gotten this far and you are finding 100’s of files that load each refresh, and tons of “features” built into your theme that you just don’t need, now might be the time to do a theme change.
One last tip: just because a theme you are using has many features, doesn’t mean you have to use them. Many of them “require” plugins for the theme to function 100%, but this simply is not true. Before you develop your site, ditch as much as possible. For savvy developers, go into the stylesheet(s) and remove unnecessary features you won’t be using.
We are making a section just for sliders because it has been a hot topic of conversation lately. Get rid of them if you can. Use a static image or “hero image”, they work really well for a call to action. Numerous studies have shown that they are terrible for user experience, and can be generally annoying a lot of the times. At Elite Strategies, we’ve determined that the slider is a trend on its way out, and the hero image has replaced the slider in terms of popularity overall with WordPress websites.
Aside from that, they can be huge speed hogs. They typically incorporate their own set of files to be loaded, most of the time in a plugin. They also load 4+ large images that are most of the time very sizable.
Ask yourself: is your slider truly necessary in the grand scheme of your UX?
This is a rather simple concept, that uses a complex algorithm. Basically, this technique will compress (via algorithm) all of the data on your website to make it smaller when it goes from point A to point B. If you’ve ever worked on a Windows or a Mac computer, you probably used a “zip” file in the past. Using gzip compression on a website does the same thing, only instead of it being on your local desktop computer, it happens on a web server.
To enable gzip compression, add the following code to your .htaccess file:
The settings should take effect the next time you load a website, so pretty quick!
Be very careful with caching. Some hosts do server level caching, some plugins have caching built in, and sometimes your CDN might do their own version of caching. You can setup caching globally in Apache, through your .htaccess, through cPanel or via a plugin. Tons of ways to cache things. If you don’t know what you are doing here, please step away from the keyboard you could really screw up your website and your user experience.
I will however overstate the obvious: caching is good. It can shave down a lot of resources, especially when your visitors are visiting multiple pages on your site.
I’m weary of even recommending a plugin here, because so many plugins have caused issues in the past, so I’ll just recommend to setup caching, in the best way you know how 🙂
While not technically a new concept, implementing DNS pre-fetch and pre-render is a tactic that has been gaining droves of popularity over the last year or so.
To put it simply, implementing this tag will allow your site to speed up its load time, by “pre-resolving” DNS query lookups. In other words, your web browser should resolve the DNS of the domain name you are querying prior to loading.
Implementation is rather simple:
<link rel="dns-prefetch" href="https://cdn.elite-strategies.com">
The code should be placed in the header (head) of the website. The code listed above basically resolves the domain (our CDN) before the website loads. Ultimately, this will speed up the overall load time of your website if properly implemented.
The only circumstance when prefetching is not useful, would be if you have a “flat” website (in architecture) that only accesses one domain.
Prerendering is very similar to prefetching. If prefetching shortens the latency prior to the website loading, prerendering actually attempts to render a site. In short, prerendering gathers resources (images, CSS files, etc) that the user will navigate to after. It will actually render the page and all of its assets in the background.
Used along with other tactics like caching, this can really speed up your WordPress website.
Prerendering is much more resource intensive than prefetching, so be advised if you have a large website this could cause some major issues if not properly implemented. Also note that it is not supported by all browsers.
If you aren’t confident, we recommend the “instant articles” plugin for WordPress.
If you follow all of these recommendations I can pretty much guarantee you that your overall SEO will improve. In addition, your users will be much happier. Improving the speed of your site can definitely become an addiction, so be careful and always know when to quit 🙂
Also making decisions can be tricky. It is hard to decide on a CDN provider or a new plugin. Eventually you have to pull the trigger.
There is always “more” you can do. You can do external database hosting, get faster servers, etc but you have to know when enough is enough.
Maybe one day your website will look like this: