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.

Screen Shot 2014 04 02 at 09.54.16 How to Improve Your Page Load Speed by 70.39% in 45 Minutes

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 use WhichLoadsFaster 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?

page speed before How to Improve Your Page Load Speed by 70.39% in 45 Minutes

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.

page speed after How to Improve Your Page Load Speed by 70.39% in 45 Minutes

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 saves 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.

After trying a few CDNs on different websites I own, I recommend MaxCDN.

maxcdn How to Improve Your Page Load Speed by 70.39% in 45 Minutes

#2 Use a very fast hosting company

I recently realised how much impact having a fast web host has when I migrated a client’s site to WPEngine. Without changing anything else, the site went from average to lightening speed.

There are three hosting companies that I’d recommend choosing between.

WPEngine – I came across WPEngine about six months ago and was blown away by the quality of their hosting. They’re not the cheapest host (their prices start at $29/month), but if you’re running a WordPress site with over 30,000 visits a month, it’s well worth the price tag. The great thing about WPEngine is that most of what’s mentioned in this post is built into their platform, so you get a lightening speed site without having to worry about setting up CDNs and playing around with the .htaccess file.

BlueHost – Perhaps the most affordable (decent) hosting company, BlueHost costs as little as $3.95 to host an unlimited number of domains. While their entry package isn’t as fast as WPEngine, their higher tier packages are very fast and reliable.

Hosting24 – I personally use Hosting24 for all of my sites (including this one), and they are very good all round. Their packages start at $4.84 per month for shared hosting and $14.84 for VPS hosting, which is very reasonable.

While there are many other decent hosting companies, these are three that I can personally vouch for and confidently say you’ll be in good hands.

#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. Both 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 tells 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.

Adding Expires Headers is extremely easy. You just need to copy this bit of code into your .htaccess file, which should be located in your root directory.

#
# associate .js with “text/javascript” type (if not present in mime.conf)
#
AddType text/javascript .js

#
# configure mod_expires
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
#

ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType image/x-icon “access plus 2692000 seconds”
ExpiresByType image/jpeg “access plus 2692000 seconds”
ExpiresByType image/png “access plus 2692000 seconds”
ExpiresByType image/gif “access plus 2692000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2692000 seconds”
ExpiresByType text/css “access plus 2692000 seconds”
ExpiresByType text/javascript “access plus 2692000 seconds”
ExpiresByType application/x-javascript “access plus 2692000 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”

#
# configure mod_headers
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
#

<FilesMatch “\\.(ico|jpe?g|png|gif|swf|css|js)$”>
Header set Cache-Control “max-age=2692000, public”

<FilesMatch “\\.(x?html?|php)$”>
Header set Cache-Control “max-age=600, private, must-revalidate”

Header unset ETag
Header unset Last-Modified

#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 one 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.

Screen Shot 2014 02 26 at 13.29.26 How to Improve Your Page Load Speed by 70.39% in 45 Minutes

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.

I recently put together this huge list of responsive WordPress themes that have been designed by theme designers that have taken speed into account. When choosing a theme, if in doubt, go minimal.

#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

To check whether Gzip is enabled or working properly on your site, you can use Gziptest.com.

#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.

Screen Shot 2014 03 21 at 16.22.10 How to Improve Your Page Load Speed by 70.39% in 45 Minutes

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:

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 resource 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 ping backs 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.

Screen Shot 2014 03 21 at 16.06.45 How to Improve Your Page Load Speed by 70.39% in 45 Minutes

Specifying your image dimensions saves the browser 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 into 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 website’s ‘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 less 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.

Screen Shot 2014 03 21 at 16.41.57 How to Improve Your Page Load Speed by 70.39% in 45 Minutes

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.

The fastest way to use CSS sprites is to use SpriteMe, which is a tool that enables you to easily turn all of your images into a CSS sprite.

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

If you found this article useful, please consider sharing it with your friends.

Written by Marcus Taylor

Written by Marcus Taylor

Marcus Taylor is an award-winning entrepreneur, and founder of Venture Harbour. Marcus also built the World's first scientifically valid 'comfort zone calculator', which he has spoken about at TEDx.

Marcus speaks about marketing and entrepreneurship at conferences internationally, and contributes to Econsultancy, Moz, Forbes, and Huffington Post.

3 comments on “How to Improve Your Page Load Speed by 70.39% in 45 Minutes

  1. Erik Altink

    Hi Marcus, good article with a lot of useful tips!

    One thing that you missed is that you should not scale images. The image at the top of your article is 2048×1152 px but you scale it to 610x343px. That’s 1.2 MB overhead for your readers.

    Greetings,
    Erik

  2. Kati Byrne

    yep, that top image loaded pretty slowly… slower than expected for an article about website speed. great advice though! I will be bookmarking this page and will probably come back to it every now and then ;o)

    1. Marcus Taylor

      Ah, good old irony!

      I’ve re-uploaded a 610×343 version, which is a bit more inline with the advice given in the post! Glad you’ve found the post useful, hope all is well.

      Marcus

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>