Sunday, August 25, 2013

Use Google PageSpeed Insights Tool to check how fast your website loads

Do you know how well your website or blog renders on a mobile device or a normal computer?

This is a link to the updated Google Developers PageSpeed Insights Tool. You can use this to identify:
  • how fast your website or blog loads:
    • on a mobile device (using mobile software)
    • on a desktop (laptop or desktop machine using full versions of operating systems)
  • what areas to tackle to improve the speed of your load.
This is all about making smartphones load fast.  Google has introduced a new benchmark - and some new guidelines setting out its expectations about how fast websites and blogs render their above the fold content so people can start reading / browsing before the whole page has loaded.

They want to see the above the fold content on a smartphone in under a second
Research shows that users’ flow is interrupted if pages take longer than one second to load. To deliver the best experience and keep the visitor engaged, our guidelines focus on rendering some content, known as the above-the-fold content, to users in one second (or less!) while the rest of the page continues to load and render in the background. The above-the-fold HTML, CSS, and JS is known as the critical rendering path.
The new tool is really very accessible
  • it differentiates between mobile load and desktop (laptop or PC) load.  Essentially it's differentiating between full-on operating systems and their mobile versions.
  • it has new "traffic light" icon system to alert you to what's OK and what needs attention
  • It spells out precisely where the problems are - and then gives you the details to identify what to address.  
The good news is that Blogger's mobile version, if switched on, seems to respond pretty well.

This site which is huge and slow to load (7+ years old c. 2,500 posts etc) did rather better in the speed tests than I was expecting.

PageSpeed Insights result for Making A Mark
(rightclick pic and open in a new tab to see a larger version)

There are a couple of problems - which is Blogger script - which I'm assuming will be addressed by the Blogger people. If you click a line about a problem - it unfolds to, for example, identify the block scripts which are causing a problem for rendering.
Eliminate render-blocking JavaScript and CSS in above-the-fold contentYour page has 2 blocking CSS resources. This causes a delay in rendering your page.
You can also find out more about the precise techie details of "good practices" and benchmarks for future standards of rendering on mobile devices in Mobile Analysis in PageSpeed Insights.


NOTE:  Here's the Blogger Buzz Post A more dynamic mobile reading experience which tells you how to make sure your Blogger blog is set up with a mobile template. 

2 comments:

jacqui boyd said...

Great tool if you can understand it- Eliminate render-blocking JavaScript and CSS in above-the-fold contentYour page has 2 blocking CSS resources. This causes a delay in rendering your page.- have no idea what this means

Tested it on several other sites and the fastest loading was my old college alumni website - http://www.baacorsham.co.uk/, worse was The guardian site.
Note the above exclamation remark for same issue appear in all but 2 websites.

Katherine Tyrrell said...

The Guardian has a special mobile version of their site - as does every newspaper. You can get it as an app - which is what virtually everybody does. BBC the same etc

Related Posts Plugin for WordPress, Blogger...