In 2006, Amazon reported that for every 100 milliseconds they speed up their website, they see a 1% increase in revenue. Then Google announced, in an effort to improve the web, that page speed was a consideration in how they rank search results.
Since then, there’ve been no shortages of case studies showing the benefits of having a fast site. In this guide, I’ve tried to pull together everything that will enable you to improve your website’s loading speed. For a bit of fun, I also decided to test everything in this post on this site to see what impact it had.
First of all, how fast is fast enough? Optimising your page speed can be a hedonic process, kind of like running on a treadmill. There will forever be room for improvement, so when should we be satisfied?
One way is to compare your site’s loading speed against all of your major competitors. Aim to be the fastest of the bunch.
Another way is to use the following guidelines:
Below 1 second = perfect
1-3 seconds = above average
3-7 seconds = average
7+ seconds = very poor
These benchmarks are based on studies showing that 47% of people expect a web page to load in under two seconds, and 57% of visitors will abandon a page that takes 3 or more seconds to load.
So how did this site perform before I carried out everything in this post?
The Venture Harbour site wasn’t too bad with a page loading speed of 1.61 seconds, but clearly there was room for improvement. The home page was making 64 requests and was over 3mb, which is quite high, and largely caused by loading lots of JS files from plugins that weren’t even being used.
After spending 45 minutes implementing as many of the recommendations in this post as possible, I managed to reduce our page loading speed to 583ms, reducing the page size to one third and almost halving the number of HTTP requests. All of this was done without making any changes to the visual user experience.
So how can you speed up your site like this? Let’s start off with some of the things that have the biggest impact.
#1 Use a CDN (Content Delivery Network)
Hosting your media files on a content delivery network is one of the best ways to speed up your site, and can often save up to 60% bandwidth and halve the number of requests your website makes.
CDNs work by hosting your files across a large network of servers around the World. When a user visits your site from Thailand, they are downloading files from the server that is closest to them. Because the bandwidth is spread across so many different servers, it reduces the load on any single server and also protects your sites from DDoS attacks and traffic spikes.
We’ve tested a few CDNs at Venture Harbour, including MaxCDN, Cloudwatch, Static DNA and Cloudflare. Out of the bunch, Cloudflare is our favourite (and is free to get started with).
#2 Use WP Engine
While researching our guide to the best web hosting, I setup response time monitoring for a range of different web hosting companies. I simply opened an account, uploaded a blank WordPress site with an identical theme, and then used a server monitoring tool to test the response time every five minutes.
9/10 of the web hosts I tested had a response time of 600ms – 1300ms. WP Engine‘s server response time was 293ms. Yes, it’s not the cheapest web hosting solution (they start at $29/month), but it’s one of the few hosting companies that really justifies its price. In fact, if I could go back 5 years and do one thing differently it would be to start using WP Engine earlier, as it’s not just made our sites significantly faster, but the security and workflow improvements have also saved us so many headaches.
Changing web hosts may not be something you can do in under 45 minutes, but it has the potential to have a bigger impact than all of the ‘tweaks’ below combined. My advice? If you’re using a mediocre or low quality web hosting company, stop reading, get started with a host like WP Engine, and come back later if you still have page speed issues.
#3 Use a caching plugin
If you’re using WordPress, one of the quickest and easiest ways to cut your page loading speed is to install a caching plugin like WP Total Cache or WP Super Cache. Of course, if you are using WP Engine, you can skip this point as they have caching built-in.
Both of the plugins mentioned above are free to download and very good. Despite their name, caching plugins do quite a lot beyond browser caching, although that is their primary function. I’ll discuss the benefits and how to add browser caching in a second without a plugin, but for those using WordPress and looking to improve page speed quickly, it’s often easier to just install a plugin.
#4 Add Expires headers to leverage browser caching
If you’re not using WordPress, or you would rather not install another plugin to add Expires Headers and browser caching, here’s how to implement it manually.
Expires headers tell the browser whether to request a specific file from the webserver or whether to get a version of a page from the browser’s cache. Of course, this only applies if a user already has a version of your web page stored in their cache, so it will only speed up your site for users who have already visited your website.
Expires headers speed up your site in two ways. First of all, they reduce the need for users to download the same files from your webserver twice. Secondly, it reduces the number of HTTP requests that need to be made, further speeding up the time it takes for the page to load.
#5 Use a good theme (if using WordPress)
Prevention is usually a better strategy than cure. To prevent lots of page speed issues in the first place, you should opt for a good host, a good CDN, and good theme/design.
As a digital marketer, it’s frustrating when web designers build sites that look beautiful but perform terribly from an SEO perspective or a speed perspective. I remember once having to deliver news to a client who spent a quarter of a million pounds on a new website, only to have it scrapped because it would have obliterated their digital marketing efforts. This is the most extreme example I’ve ever experienced, but it’s etched a scar that I’ll always remember.
Today, the problem is neither better nor worse than it was five years ago. Back when I started doing SEO, designers still used flash and other primitive technologies to build sites. Today, designers built WordPress themes with so many bells and whistles that it’s no wonder they take 10 seconds to load.
#6 Compress your images with WP Smush.it
If you’re using WordPress, install the WP Smush.it plugin to automatically compress your images. This will reduce the size of your images without losing any visual quality. The great thing about this plugin is that it works in the background every time you upload a new image. You can also run it retrospectively on all of the images uploaded to your media library.
#7 Clean up your database
One of the pitfalls with WordPress is that your database can get very messy very quickly due to saved drafts, post revisions, deactivated plugins etc. WP Optimize is a fantastic plugin that routinely deletes all of the stuff you don’t need that’s cluttering up your database.
After running this on the Venture Harbour database I managed to reduce the database from 5mb to 3mb, which helps speed up the time it takes for the browser to collect and return files from the database.
#8 Compress your website with gzip
Gzip is a simple method for compressing your website’s files to save bandwidth and speed up page load times. Gzip works by compressing your files into a zip file, which is faster for the user’s browser to load. The user’s browser then unzips the file and shows the content. This method of transmitting content from the server to the browser is far more efficient, and saves a lot of time.
You can enable Gzip by simply adding the following code into your .htaccess file:
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE#9 Fix all broken links
Broken links are not only a drain on bandwidth, but they’re also one of the surest ways to get a user to leave your site. One of our clients recently had several hundred 404 errors showing in Google Webmaster Tools. After fixing all of these, the average pages visited per user increased from 1.4 to 1.85 pages/visit, and there was a noticeable decrease in bounce rate.
If page speed isn’t compelling enough a reason to fix your broken links, hopefully the impact on these behavioral metrics is.
To identify your broken links, I’d recommend using the following (free) tools:
- Google Webmaster Tools (crawl errors tab)
- Screaming Frog SEO Spider
- Ahrefs
The reason why I recommend using all three, is because some will go deeper than others and identify crawl errors that others don’t. Once you’ve reached 0 broken links on all three tools, your job is done!
#10 Reducing Your Redirects
While 301 (permanent) redirects are preferable to 404 errors (broken links), they’re still not ideal as they slow down the time it takes for the browser to reach the correct version of a page.
Screaming Frog is once again a great tool for spotting 301 redirects. If you’re using a PC, you can also use Xenu Link Sleuth, which is a great tool for crawling data from websites.
#11 Minify your CSS and JS files
When you look at what’s causing your pages to load slowly, chances are that it’s got something to do with lots of clunky Javascript files or CSS being loaded inefficiently. One of the pitfalls of WordPress and other content management systems is that a new JS or CSS file is added virtually every time you install a new plugin.
There are several ways to minify your files. The first way involves squishing all of your files into one – so instead of calling ten individual JavaScript files, you simply place all of your JavaScript in one file.
The second aspect on minifying involves deleting white space and making your files smaller. If you’re using WordPress, WP Minify is a great plugin that automatically does all of this for you.
#12 Replace PHP with static HTML where possible
PHP is great for making your site efficient and reducing the need to enter the same information multiple times. However, calling information through PHP uses up server resource and should be replaced with static HTML where it doesn’t save any time
#13 Link to your stylesheets, don’t use @import
Similarly to the point above, @import uses up more resources than directly linking to your stylesheets despite achieving the exact same result. Another reason why not to use @import is that some of the older browsers do not support it, so it’s best to avoid it where possible.
#14 Turn off pingbacks and trackbacks in WordPress
Pingbacks and trackbacks don’t really serve any practical use in WordPress, and yet they’re often enabled by default. I’d recommend turning both of these off as they do clog up your database and increase the number of requests that are made.
#15 Enable Keep-Alive
HTTP Keep Alive refers to the message that’s sent between the client machine and the web server asking for permission to download a file. Enabling Keep Alive allows the client machine to download multiple files without repeatedly asking permission, which helps to save bandwidth.
To enable Keep Alive, simply copy and paste the code below into your .htaccess file.
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>#16 Specify image dimensions
Before your browser can display your webpage it has to figure out how to lay out your content around your images. Without knowing the size of these images the browser work it out, causing it to work harder and take longer.
Specifying your image dimensions saves the browser from having to go through this step, which helps to speed things up.
#17 Specify a character set in HTTP headers
For the same reason as above, it’s useful to specify a character set in your HTTP response headers, so that the browser doesn’t have to spend extra time working out which character set you’re using.
You can do this by simply adding a UTF-8 character set tag in your website’s section.
#18 Put CSS at the top and JS at the bottom
It’s considered best practice to put your CSS as close to the top of your page as possible, as browsers won’t render your page before rendering the CSS file. Javascript, on the other hand, should be as close to the bottom as possible, since it prevents browsers from parsing after the tag before it is loaded and complete.
#19 Disable hotlinking of images
When other websites ‘hot link’ to your images it steals bandwidth, slowing your site down. To prevent other sites from hogging your bandwidth, you can add this snippet of code to your .htaccess file. Remember to change the bit that says VentureHarbour.com!
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?ventureharbour.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]#20 Switch off all plugins you don’t use
With WordPress sites, plugins are usually the biggest culprit for slowing the site down. If there are any plugins that you’re no longer using or aren’t essential, delete them.
#21 Minimize round trip times (RTTs)
Round trip time is the time taken for the client to send a request and the server to respond. It’s affected by a huge range of things but is primarily impacted by the number of requests that are being sent. As shown in the Pingdom screenshots at the top of this post, I managed to almost halve the number of HTTP requests that were being made, which massively reduced the round-trip time.
To reduce the number of requests, use CSS sprites to call fewer images, minify and combine your JS and CSS files, and don’t call anything that you don’t need. One of my biggest gripes with WordPress is how plugins that are only needed on certain pages, such as Disqus, or Contact Form 7, tend to be called on every single page, which creates unnecessary requests. Reducing the number of unnecessary requests will reduce your RTTs.
#22 Use CSS Sprites
A sprite is one big image that contains all of your images. They look similar to those sticker sets you used to get with one hundred stickers on a single sheet. Using CSS you can ‘hide’ everything in the image except for a section between a set of co-ordinates.
CSS sprites work because it’s faster to load one big image and use CSS to show the section you want than it is to load lots of smaller images. This is because the browser doesn’t need to make as many requests.
Why page speed is more important now than ever before
With mobile Internet usage expected to take over desktop usage in 12 months’ time, it’s never been as important as it is right now to fix your site speed. Internet users are less tolerant of slow websites than they’ve ever been, and the shift towards Internet-enabled mobile devices means that if you’re not fast, you’re not going to be seen.
Image Credit: Len Matthews
