The homepage of your website is probably your most important online asset for attracting visitors and converting them to customers and it’s really important that it loads quickly. You can spend hundreds of hours and a lot of money on SEO, but if it takes 20 seconds for your homepage to load, your potential customer will give up and just move on to the next link in Google’s search results. In actual fact a fast website will end up helping your SEO!
This is a real opportunity for small businesses because the homepage of most big websites is a furious battleground between all the different departments in a corporation: the sales team want as many products as possible on there, the design team want beautiful high resolution photos and the marketing team want all sorts of tracking widgets to monitor customer behaviour. The end result is a big bloated page which takes forever to load and takes months of wrangling to change.
As a small business owner, you’re in complete control of your homepage and can change it whenever you choose. To make the most of this advantage, I’ll need to give you a little bit of technical background, but feel free to skip ahead to our top ten recommendations at the end of this article!
Anatomy of a webpage
It’s easy to think of a webpage as a single file, like a Word document, but in fact each page can be made up of dozens and dozens of separate files.
Generally speaking, there are four types of files required to build a typical page – an HTML file, some images, one or more CSS files (stylesheets) and any number of Javascript files.
- The HTML file contains your text and the basic structure of a page as well as containing instructions on where to find all the other files your web browser will need to display the page correctly.
- Images are the pictures you see on the page.
- CSS files, or stylesheets, control the font sizes, colours and general design of the page.
- Javascript files can be used to add interactive features and customer tracking to the page.
When you click on a link in a web browser, the first thing that happens is your browser loads the HTML file for the page you want to see. It then scans through the HTML file to see which other files it needs to load. Until all these other files are loaded, your page won’t look or behave as it is supposed to. So the trick is to make sure all those files can be loaded as quickly as possible.
Top ten ways to tune your homepage
1. Give your homepage a physical
Your browser has built in tools to help you tune your homepage. Open up Chrome and go to your homepage. Hit F12 (or cmd + alt + j on a Mac) and press the ‘Network’ icon.
If you then refresh the page by pressing F5 (cmd + R) you’ll see a breakdown of all the files on your page and the time it takes to load them. At the bottom left you’ll see the number of files (requests) and the total size of your page.
The red vertical line on the timeline represents how long it took for your page to be loaded and completely ready to use. The holy grail is 1 second or less!
2. Put it on a diet
The easiest way of reducing the time taken to load your page is to reduce its size. You should aim for your homepage to be no more than 300-500kb in size (for reference, Google’s is about 120Kb). Make sure your images have been saved using the ‘optimise for web’ feature in Photoshop or whichever tool you prefer.
3. Host your site close to your customers
If your customers are mostly in North America, make sure your website is hosted in North America. You’ll be surprised at how much extra time it will take to load a file hosted on the other side of the planet! This is called latency and will affect every file needed to build your page.
4. Cut down on tracking
User tracking features, analytics and affiliate tracking schemes are a major contributors to a page feeling slow. Whenever possible, try and stick to a single tracking mechanism on your homepage.
5. Keep it simple…
The more files on your homepage, the slower it will be. If you look at pages optimised for speed (like the Google homepage) you’ll see there are very few images.
6. …but don’t forget the words
However, your homepage is very important for SEO and you’ll need to remember to have all your key SEO phrases in place.
7. Set your content free
Consider using a Content Distribution Network (CDN) like Amazon’s Cloudfront. These can be used to serve your images, stylesheets and Javascript files from Amazon’s servers rather than yours. This has several benefits: less pressure on your web server, content served from servers close to your customers and encouraging your browser to load more files in parallel.
8. Reduce, reuse, recycle
If you find yourself using lots of different Javascript files, consider merging them into a single file and ‘minifying’ that file.
9. Haven’t I seen you before?
If you use the same image or Javascript file again and again, encourage the browser to ‘cache’ those files so it doesn’t keep downloading them. This should be done automatically by your web server, but check in Chrome’s timeline. If the file is grayed out, it was found in the browser’s cache.
10. Stick to your guns
As your company grows, you will start to get the same pressures from sales, design and marketing as the big brands do. They will all want a piece of your homepage, but make sure that speed is always your primary goal.
Subscribe by email
