According to statistics, every 1 in 4 visitors would abandon a website which takes more than 4 seconds to load. In 2006, Amazon reported that for every 100 milliseconds they speed up their website, they see a 1% increase in revenue. Google announced, in an effort to improve the web, that page speed was a consideration in how they rank search results.
Since then, there have 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? Optimizing 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?
The WPSkillPress site isn’t too bad with a page speed index of 1.4 seconds, but clearly there was room for improvement. For calculating your website’s page speed, visit Page Speed Insights.
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.
#2 Use a very fast hosting company
I recently realized 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 $23/month), but if you’re running a WordPress site with over 25,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 $9.99 to host one website. If you want to host an unlimited number of domains then the basic plan if for $13.99. While their entry package isn’t as fast as WPEngine, their higher tier packages are very fast and reliable. Ps. WPSkillPress is also usign BlueHost as its hosting provider.
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. Second, it reduces the number of HTTP requests that are made. Thus, further speeding up the time it takes for the page to load.
Adding Expires Headers is extremely easy. You just need to follow the instructions here to add a bit of code into your .htaccess file.
#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, 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.
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.
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 complete!
#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 resources. Thus, replace it 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 is 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 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 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 loading 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.
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.
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.