Web surfers are impatient people – however good your content, if your website is too slow (compared to similar sites) they may just move on to another.
Sites like Pingdom provide a load time for your site measured in seconds – testing before and after you make design/optimization changes can be a useful way to check whether or not you have improved website performance.
However, it is difficult to assess your website speed in isolation – a load time of 5 seconds may be very quick if you have a news portal/multimedia-rich site, but very slow if you have a static website with few images.
So it’s a good idea to see how your website compares to a quicker site in the same field as yours. The biggest websites (with millions of visitors) can typically afford to run on expensive dedicated servers – far more powerful than those found in much cheaper shared hosting and VPS packages.
However, although that may stop you matching their speed, you can still learn a lot from the big boys by comparing your site to theirs:
1. Speed Comparison
WhichLoadsFaster is a great site to compare 2 websites head to head – select ‘Try my own matchup’ then input your site and the one you want to compare against.
Tip: don’t choose a massive site like Amazon unless you want to be truly depressed – they are so big that a comparison with your own site is likely to be a very unfair mismatch! Choose a site that is more popular than your own (use Alexa rankings to check), in the same field and that you have found to be much quicker than yours to load/open pages.
Click ‘Go’ to start the comparison test and see who wins – both sites load side by side and the result shows how much faster the quicker site is. Don’t worry if you lose by a mile – you’re expecting to…
Click the More button to see more detail then choose the ‘Analyze left/right side’ button for a detailed review of your performance at the GTmetrix site:
2. GTmetrix Stats
Click ‘Go’ to analyze the website and produce a detailed report:
Page Speed and YSlow tabs make recommendations where your website is not scoring 100% maximum performance (even the best sites won’t score 100% across the board) – select a recommendation to see more technical details about which parts of your site require optimizing.
Note: these can be very technical – you may need significant research or web design/database skills to understand and implement them.
Of more general interest to novices is the Timeline tab – a waterfall graph which displays the loading behavior of your site. This may provide a quick win if you find a particular image/widget/call that delays page load significantly.
E.g. reviewing the Timeline for TechLogon revealed that a particular widget was taking over 1 second to load – and stopped the rest of the page from loading whilst it loaded. As this widget appeared in the sidebar it therefore slowed the load of every page. Solution – moving the widget to a page of its own enabled all other TechLogon pages to load a second quicker – a major win as a second is often a very long time in website optimization.
By comparing your own report with the report of a quicker site you can see how your page load speed, page size and number of requests compare to the best and amend your own design to suit where possible. Remember to test again after making any changes to see if they have had the desired effect.
Of course a well designed website isn’t all about speed – it’s also worth checking for compatibility issues too:
3. Compatibility Issues
Many people use a single browser on their own computer with a fixed screen size/resolution to view their website and think that if it looks good for them it must look equally good on all other operating systems, web browsers and different sized screens.
Sadly this is not always true – your website may look great on a high spec PC using IE and a 24 inch monitor but terrible on a laptop using Firefox and a 15 inch screen…
Unless you want to lose a large part of your target audience it is a good idea to test your website on a wide range of web browsers and different screen resolutions.
To test what your website looks like in different types of system (without having to buy hundeds of computers!) – type your website address into BrowserShots – this provides multiple screenshots of your website using various browsers.
Initially, every browser for every operating system is ticked – to narrow down the screenshots make selections in the menu at the bottom of the page e.g. Windows and only the latest version of each browser. You can also choose a screen size if you want to test how your site looks at a particular size.
When you have chosen the settings you want, click Submit to begin the process – there may be a queue for results (could take up to an hour if you have selected everything or if their website is overloaded with queries) but you can come back to it and see the results later.
When complete, you should see screenshots of your website for each browser (click on the small screenshots to see a full picture) – you can easily see if your design looks as good for others as it does for you and make changes to your site design if necessary.