Running a successful website is like running a high performance sports car. Every detail needs to be honed to perfection. It starts with a scientifically proven design, which needs to be sleek, aerodynamic and aesthetically pleasing.
Then, to run efficiently it needs the highest grade premium fuel, or in the case of a website, top quality, relevant content.
And finally, it needs an engine that’s streamlined for maximum speed. This is the code of your website. It might be tucked away under the hood, but it’s a vital part of your online success.
Page Speed Counts
Now, there are two types of engine. One that’s a little loud and clunky, but gets the job done, or one that’s fine-tuned, runs smoothly and will outpace any of its competitors.
Which one would you prefer?
I’d prefer a sports car any day, and I know my visitors would too.
In an age of ever decreasing attention spans we all expect lightning quick reactions from the websites we visit.
According to the NY Times, people will visit a website less if it’s slower than a competitor’s by more than 250 milliseconds (that’s a quarter of a second!).
A study by Forrester Research found that online shoppers expected web pages to load in two seconds or less, and at three seconds, a large share abandon the site. Three seconds!
If that’s not enough to convince you, then check this out:
- 47% of consumers expect a web page to load in 2 seconds or less.
- 40% of people abandon a website that takes more than 3 seconds to load.
- A 1 second delay in page response can result in a 7% reduction in conversions.
- If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost $2.5 million in lost sales every year.
- 73% of mobile internet users say that they’ve encountered a website too slow to load.
- 51% of mobile internet users say that they’ve encountered a website that crashed, froze, or received an error.
- 38% of mobile internet users say that they’ve encountered a website that wasn’t available.
With tablets, smart phones and the sheer amount of competition for web pages, having a slow website can end your credibility, and possibly even your business online.
And not only that, but you could also lose your position on Google. In 2010 Google included page speed as a ranking factor, and on their blog state:
“Today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.”
So all this means it’s essential to make your website as fast as it can be, and you don’t need to be a coder or technical wizard, either. I’ve put together 8 simple fixes that can dramatically improve the speed of your website.
For this exercise I’ve used the Google Page Test Tool, which gives your web page a score out of 100, and offer insights into what you can do to speed things up. Some people think it’s a flawed test, and it’s unlikely you’ll get a 100 score if you use Adwords or Google Analytics, but it’s a good guide to show fixable issues that can speed up your website.
Below are 8 common problems which can slow your website down, and how you can fix them.
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
The first thing you see when you visit a website is the ‘above the fold’ content. This means everything you see, before you scroll down the page. Because this is the first thing you see it needs to be loaded first. If it’s loaded first it gives the appearance of the page loading faster, and makes for a better experience for visitors. For this to work effectively your browser needs to load the above-the-fold HTML without any interruptions.
Every time it encounters a file such as JavaScript or CSS, it needs to stop loading the HTML and load the file before it can continue. So, ‘render-blocking’ effectively means a file that a browser needs to load before it can get on with loading your HTML.
In effect these files are ‘blocking’ the above-the-fold content from loading.
So how do you fix it? Ideally you would move the location of these files further down the page so the browser can load all the above-the-fold content first. This can be as simple as adding all your JavaScript and CSS files into the footer of your page rather than the header. But some smaller files can be added ‘inline’ so they are called as needed.
For example, rather than add JavaScript in a separate file and call it like this:
<script src="scriptName.js" type="text/javascript"></script>
You can add it directly on to your page, like this:
<script type="text/javascript">// <![CDATA[
var myVar="hello"; function showAlert() { alert('You triggered an alert!'); }
// ]]></script>
This saves the browser having to go to a separate location to read the file. The same principle can work with CSS. Here’s an example of inline CSS:
This is a heading.
This adds the style of your h1 tag directly into your HTML, rather than a separate stylesheet.
Inline CSS and JS should be used sparingly as it can make site-wide changes more difficult to apply. For small snippets of code it’s a good idea, but for larger code it’s wise to have it in a separate file.
If you are going to have a separate file, you can just move it to the bottom of the page. This will get around the ‘render-blocking’ issue and makes your website ‘appear’ to load much quicker. In actual effect it takes the same amount to load, but as the top is loaded first our visitors don’t notice the rest of the page loading.
- Leverage browser caching
Most browsers, including IE, Chrome and Firefox are capable of caching files so they don’t need to be loaded twice. The browser will store the files in its memory and serve them much quicker next time we visit the page. This can massively speed up the loading time and is an essential part of good practise when it comes to technical SEO.
But for browsers to cache a file, the file needs an expiry date. This protects the browser from clogging up its cache with endless files, as it can purge them on the given expiry date.
So to make the most of browser caching you need to add expiry dates to all your file types. There’s a simple way of doing this via your .htaccess file. Simply add this code:
## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" ## EXPIRES CACHING ##
This code will add expiry dates to your images, CSS, JS, PDFs and Flash files.
Unfortunately, it’s not possible, or at the least very difficult to leverage browser caching on external files. So if you have Google Analytics, Twitter or any other files that are located on an external website then you won’t be able to add expiry dates. This is one of the reasons why it’s next to impossible to get a perfect score on the Google Page Speed Test.
But we aren’t looking at perfect scores, just the best score for your website, and by adding expiry dates to your own files it’ll make a significant increase in the speed of your website.
- Reduce Server Response Time
Your server response time will depend largely on your hosting company. According to Google your server response time should be under 200ms, but this may be out of your control if you are on shared, or cheap hosting.
On a shared server you’re reliant on the other websites that are sharing it. If a website on the same server is getting significant amounts of traffic it could affect the response time for everyone.
Different things can affect your server response time such as traffic, but also how many resources a web page uses. If your website has lots of plugins, scripts and images, it’ll slow down the time the server can respond.
To reduce your server response time as much as possible you should keep your website as lean as possible. Think really hard whether you need that fancy plugin. Are there other, lighter ways you can get the same effect? Streamline your website so it’s as quick as can be, and keep an eye on your traffic. If you’re getting high traffic, or your response time is still slow then it could be worth looking at changing hosts. You can get a VPN or dedicated server, or if you’re using WordPress you might want to look at hosting designed specifically for WordPress.
When you’re looking at losing customers over just 250 milliseconds of speed, simply changing hosts might make all the difference, and be one of the wisest investments you make.
- Minify CSS
Minifying code basically means removing any unnecessary characters such as white spaces, comments, new lines etc.
With regards to CSS it might look neater to have code on different lines and comments to highlight which code is which, but all these characters slow down the loading time of the file. A browser doesn’t know the difference between a white space and a character, so it needs to read everything it sees. By minifying the file, it speeds up the reading and helps the page load quicker.
Standard CSS:
/*
This code is for the header of the page.
*/
.header {
height: auto;
max-width: 90%;
padding: 5%;
}
Minified CSS:
.header{height:auto;max-width:90%;padding:5%}
Not only that but some websites have multiple stylesheets that can be combined into one sheet. For example, popular blogs like WordPress use plugins and each plugin could have a separate stylesheet. Every time a browser encounters a style sheet it needs to load it and this slows down the loading of your page. The solution is to combine as many stylesheets as you can, and minify them so they load faster.
You can either do this manually, or if you’re using WordPress there are plugins that can do this for you, such as BWP Minify.
- Minify JavaScript
JavaScript files work the same way as CSS files in that they include lots of unnecessary characters. By removing all spaces, comments etc you can ‘minify’ the file and make it load quicker. By also combining and compressing your JS files you’ll find it makes a significant impact on loading times.
Again you can do this manually, or if you’re on a CMS like WordPress, there are plugins available that can do the job for you.
Standard JavaScript:
var myVar="hello";
function showAlert() { alert('You triggered an alert!'); }
Minified JavaScript:
var myVar="hello";function showAlert() { alert('You triggered an alert!'); }
- Minify HTML
Minifying HTML is similar to minifying CSS and JS. It’s simply a case of removing any unnecessary characters. It’s easy to do and will have a small, but important effect on the speed of your site. Again WordPress have plugins that can do this for you, or you can simply go through your HTML files and do it manually.
Standard HTML:
Page Title
This is a Heading
This is a paragraph.
Minified HTML:
Page Title
This is a Heading
This is a paragraph.
It might not look pretty, but it could give you a few milliseconds advantage over your competitors.
- Enable compression
When you have all your files minified the next step is to get them compressed. Compressing your files makes them smaller, and allows your server to download them quicker. The most common form of compression for web files is GZIP and it can reduce the file size by as much as 75%. There are a few ways you can add GZIP compression to your files, and it depends on the type of website you have.
If you’re using WordPress there are plugins available such as BWP Minify that both minify, combine and compress your CSS and JS files, and can even compress your HTML.
But if you want to do it yourself you can add a rule in your .htaccess file like this:
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
The above code tells your server to compress all files such as images, CSS, JS, PHP etc..
GZIP compression has a large impact on the speed of your website and is relatively easy to do. If it’s the difference between people staying on, or abandoning your website, then I would say it’s an essential part of being a success online.
- Optimize images
Images are a massive part of most web pages and are also a massive part of the loading time. By optimizing images correctly, you can dramatically increase the speed of your website. You need to be aware which format is the best for your image, whether it’s a JPEG or PNG. Save them with lossless compression at the lowest possible size that still keeps the quality.
Sometimes you’ll find you can save images smaller, then use CSS to upscale them without losing quality. Another way to optimize images is to have them as background files or CSS Sprites. This way they load with the CSS and don’t need to load directly on to the page.
Also where possible it’s best to specify the dimensions of your image in the HTML. This allows for faster rendering and eliminates the need to repaint the image for every browser size.
Optimizing images is massively important, especially in the age of multiple devices such as mobiles and tablets. Get some good software for resizing/compressing and think about each and every image you add. It’s well worth spending the extra time if it means keeping those all-important returning visitors.
Bonus Consideration:
Accelerated Mobile Pages
The buzzword for 2016 is ‘AMP’ or Accelerated Mobile Pages. This is a project being driven by Google with the aim of increasing mobile load times. It works by unifying the code of several platforms that can be shared by everyone and help with loading videos, adverts, animation and all manner of smart content. It’s an open source project and Google are hoping to have major publishers and technology companies on board to help roll it out.
Google may even give slight advantages in the SERPS for websites that use AMP and may add the label ‘Fast’ into search results. If reports are correct it’s being rolled out in February 2016, so it’s worth getting familiar with.
Conclusion
Most of the above can be done in less than a day. If you’re using WordPress you can use plugins like BWP Minify, Autoptimize, WP Super Cache and Leverage Browser Caching Ninjas, and it’ll do the job for you in minutes.
I know there’s been times when I’ve left a website due to slow loading times, especially using my mobile. Don’t give your visitors an excuse to leave your website and join your competitors. Apply these changes right now and it could be the best decision you’ve made this year.