PageSpeed Insights is an online tool which helps identify performance related best practice on any given website, it provides suggestions on a webpage’s optimisations, and suggests overall ideas of how to make a website faster.

Google PageSpeed Insights is one of four tools Google has provided to help website performance optimisation.

• Google PageSpeed Module
• Google PageSpeed Service
• Google PageSpeed Chrome DevTools
• Google PageSpeed Insights

Google Pagespeed Insights can be accessed directly by any web browser. You simply enter a web page URL, and Google’s tool grades the URLs performance on a scale from 1 to 100. The tool provides a report on suggested optimisations, divided into categories of high, medium, and low priorities.

Increasing the speed of your website reduces bounce rate (users leaving the site before continuing their journey) and is a positive SEO ranking factor.

There is compromise of speed vs functionality. You can optimise a website to have a very high Google page speed score, however that would mean stripping out a lot of functionality and interactivity, for example, the use of image carousels.

To check your Google Page Speed Score, click on the following link and enter your URL:
https://developers.google.com/speed/pagespeed/insights/

The most common issues most websites face when optimising are:

• Eliminate render blocking
• Optimise images
• Leverage Browser caching

Eliminate Render Blocking

When a browser downloads your website, it has to process all the JS and CSS files that you’ve added into the Header section (header section) of your site before rendering the page (the user sees a blank screen). You can avoid Render Blocking by moving your non-essential JavaScript and CSS into the footer.

When moving CSS from the header and placing it in the footer, it can negatively impact the rendering of your website. The workaround is to pick the most important CSS classes to correctly render your site, these should be placed in your header. If you are not sure which are the most important CSS classes for your site, we suggest using a third party site https://jonassebastianohlsson.com/criticalpathcssgenerator/.

When you’ve picked the most useful CSS classes, Minify your CSS and then add it to thesection.

Optimising Images

Reducing the file size of the images you use, is a quick win to improve your site speed. When creating images using Photoshop be sure to select “Save for Web” and utilise Photoshop’s features to reduce the file size without impacting quality. If you have simple objects use gifs (max 256 colours) and select the minimum number of colours required, Photos should be JPEG, and finally, photos greater than 256 colour which require the use of transparency should be PNG. Although PNG produces the largest file sizes of the three.

Ewww Image Optimizer (https://wordpress.org/plugins/ewww-image-optimizer/). This WordPress plugin is free and scans through your media library and optimises images. It’s a good tool to run regularly to reduce image sizes, without compromising (much) quality.

If you are on a slow/shared hosting platform we’d recommend using a CDN. There are lots of different CDN’s available dependant on the needs of your site.

Leverage Browser caching

Caching is important for website speed. Without it every time a user loads a webpage, the browser has to download all the images/CSS/JS (assets) again. With browser caching enabled, the first request/page takes the longest as the browser downloads all the assets necessary to render the site. On the second page request the only thing the browser needs to download are any assets that are different from the first request/page.

You can add caching to your site by editing your htaccess file, or use via the use of a WordPress plugin. For example:

• WP Super Cache
• Autoptimize

At Bravr, we understand how important performance optimisation is, if you need help optimising the speed of your site, please feel free to get in touch