Website speed testing with Google (PageSpeed Insights)

Website speed testing with Google (PageSpeed Insights)

There’s lots of different tools on the net to test your website speed, if your not a techhead you might be a bit confused by what some of these mean and what you can do with them. This guide will let you know how to test your website speed and what to look for in the results.

Google’s page speed testing tool is called “Page Speed Insights” and it does exactly that, it also lets you know if your site passes user friendly tests.

Page Speed Insights does two tests:

  • Mobile
  • Desktop

With rules under two Categories:

  • Speed
  • User Experience

 

Speed Testing Criteria

  1. Optimize Images – If you have images that are sized larger than they display on your site or are not compressed your page size will be inflated and you will quickly get a bad pagespeed score.
  2. Enable Compression – This rule is to see if you server has a compression method like Gzip enabled, usually your hosting company will have this done already and you won’t have to worry about it
  3. Minify CSS – When you are editing your CSS code it is nice to have it all on seperate lines and indented correctly, however that takes up a bit more space than needed. For production its best to have your CSS minified.
  4. Minify HTML – This is the same as CSS, you can use the autoptimize plugin to serve minified HTML without having to have the original file minified.
  5. Minify Javascript – As above use the autoptimize plugin to automatically minify your JavaScript.
  6. Avoid Landing page redirects – If your home page has a mobile site that makes users redirect to view, it takes longer for the user to load the page. The optimal experience is to use responsive web design.
  7. Prioritize Visible Content – Avoid having items that take longer to load in the above fold section of your website, it’s best to keep these towards the bottom of the page so the user can start reading or looking at images on your site as soon as possible.
  8. Leverage Browser Caching – Set expire times in the far future to allow users to load resources from their cache rather then the website again. Sometimes you aren’t able to  control this one for external resources such as Google Analytics. Read more at GTMetrix
  9. Reduce Server Response Time – This shows up if your server takes longer than 200ms to respond, from various testing I wouldn’t worry too much unless your site is taking over a second to respond.
  10. Eliminate Render-Blocking JavaScript and CSS in above-the-fold content – The above the fold content refers to anything that a user would see when landing on your page, this rule is the hardest to fix as it means inlining all of your above fold CSS styles and Javascript, there are some tools to generate the code for you but it might be best to let the pros do that. Read more at Google Developers

 

User Experience (Mobile Only)

  1. Size tap targets appropriately – We’ve all tried to click a link before on a touchscreen that’s really close to another link and clicked the wrong one, Google says that tap targets should be at least 48px by 48px and not too close to each other.
  2. Avoid Plugins – Lots of Flash and Java plugins are the causes of browsers crashing, if you have to have one of these plugins on your site its best not to be on the home page and keep in mind they won’t load on mobile anyway.
  3. Configure the Viewport – If you’re using a responsive theme this should be fine for you, it refers to having the meta viewport tag in your head.
  4. Size Content to Viewport – The main cause for this rule is when you have a responsive site with a non responsive image that is exceeding the device width, make sure your using the max-width: 100%; css rule on your images.
  5. Use legible font sizes – This rule makes sure readers can read your text, if your getting this rule you need to bump up your font size.

 

Leave a Reply

Your email address will not be published. Required fields are marked *