Need for Speed: Our Page Speed Optimization Tips

Because no one likes waiting around. In this blogpost I am going to talk through Google PageSpeed Insights. I will discuss the new page speed indicator and best practices for optimization.

Ready? … Set … GO!

The New Page Speed Indicator

Page Speed is measured using the Chrome User Experience report database. This provides information on how fast your website is for the average user. It also now displays the first contentful paint and DOM content loaded time, which provides a more ‘real world’ measurement of data compared to the lab data used previously. The Chrome User Experience tool is available on both the mobile & desktop tab in PagseSpeed Insights.

Optimisations

Let’s explore the optimisations that PageSpeed Insights recommends you complete to further boost the performance of your website.

Optimise Images

The ‘optimise images’ recommendation appears most commonly in the PageSpeed audits that we complete. Images take up a large amount of the web page size and without the correct optimisation they can cause the website to grind to a halt.

The Easy Solution

If you are running a WordPress website, the easiest way to optimise your images is by using either the WP Smush or EWWW Image Optimizer plugins. These plugins efficiently reduce the image file size without impacting visual quality. If you don’t have WordPress, Google allows you to download optimised versions of your website images straight from PageSpeed Insights.

Google’s further recommendations are to use scaled images and implement the picture elements to inform browsers of specific image dimensions.

More Advanced

  • Cache your images
  • Remove image metadata
  • Remove lazy load images that aren’t critical
  • Minify and compress any SVG files you may have
  • Pick the best format for images (GIF, PNG or JPEG)
  • Implement img tags and srcset for images on different devices

Minify CSS, HTML & JavaScript

Minification allows you to reduce the file size of CSS, HTML & JavaScript by removing any white spaces or comments that are left within the file.

A Word of Warning

Minification requires a lot of testing. Different minification settings can sometimes affect the functionality of your website (minifying jQuery is a prime example of this).

The Easy Solution

Again a number of CMS platforms have plugins available that will minify your HTML, CSS and JavaScript. If you are running WordPress, both W3 Total Cache and the Autoptimize plugin are great options among a few. If you have a brochure website you can also download optimised code directly from PageSpeed Insights.

More Advanced

  • Use minification side by side with compression. Minification is more granular but compression can further reduce file sizes.
  • Automatic minification of files (this is similar to the above WordPress plugins). You can install Google’s PageSpeed Module on to your Apache or Nginx server. This will automatically minify website files. There are also other third party modules available.

Compression

Compression algorithms reduce the file size of your content. This makes for shorter page loading times, reduced data consumption and an improvement in render time.

The Easy Solution

Enable Gzip compression – this can be easily done on a number of servers, such as in cPanel or Plesk. Simply change the relevant setting.

More Advanced

  • Gzip alternatives. Brotli, for example, uses lossless compression and is supported by all modern browsers. Research by CertSimple has found that Brotli compresses JavaScript files 14% smaller than with Gzip, 21% smaller for HTML, and 17% smaller for CSS.

Browser Caching

Implementing caching can help reduce resource demands on your server as well as reducing both data costs and potential delays for your visitors. By implementing a caching policy, certain elements of the website will be stored locally on the visitor’s device. This means that when they click through to another page of the website, elements that are repeated sitewide (such as your logo) will be loaded from the local storage on the device instead of reloaded from the server.

The Easy Solution

For most websites this means just adding additional code to the htaccess file and setting how long you would like content to be cached for. For static assets Google recommends you set the cache for 7 days. GTmetrix provides the relevant code for this here. If you are running WordPress, you can setup browser caching through the W3 Total Cache plugin (and similar plugins). This allows you to set the cache details within the plugin. The plugin will then add the relevant code for you to your htaccess file.

More Advanced

  • ETag implementation. Etags use a validation token that prevents data from being transferred if a certain resources hasn’t been modified since it was last requested.

Optimise CSS Delivery

Because a page needs to process CSS before it can be rendered, CSS with lots of render blocking external stylesheets can create a delay to the time for first render and also create additional round trips (causing delays).

The Easy Solution

Inline small CSS into your HTML. This eliminates the need to load small CSS.

More Advanced

  • Don’t inline large CSS files. This will have a negative effect and increase the time it takes for the browser to render the page.

Remove Render Blocking JavaScript

Removing render blocking JavaScript from above the fold content of your website will help to speed up the DOM parsing of your website, which in turn makes your website load faster.

A Word of Warning

Certain JavaScript files are required to be loaded at specific times. Test vigorously when changing certain JavaScript file loading methods.

The Easy Solution

Remove render blocking JavaScript from above the fold content. In WordPress and other CMS platforms, plugins can help you achieve this – Async JavaScript by Frank Goossens is a good tool for WordPress.

More Advanced

  • Mark your script tag with async. This will asynchronously load JavaScript and not block DOM construction. Only do this if you don’t need to change anything in the DOM tree during parsing.
  • Inline your critical JS and defer non critical. Inline your scripts that are critical to rendering your page and defer your non critical scripts with either async or defer.
  • Defer third party JS. As this is not critical to loading the page, these scripts can either be deferred or loaded with async.

Prioritise Visible Content

Above the fold content that exceeds 14.6 kb can increase latencies, create more round trips, and delay your page render time. Prioritising above the fold will decrease your page rendering time and page loading time.

How?

Ensure that the above the fold content is no more than 14 kb compressed.

  • Use minification, compression, and image optimisation (as outlined above). This should help to reduce the size of these elements, which may be present above the fold.
  • Organise your HTML markup. this will vary from page to page but can be effective in reducing the size of the above the fold content.

Avoiding Landing Page Redirects

When using a redirect, another HTTP request is made. This adds additional roundtrips, DNS lookups, TCP handshakes, and TLS negotiations, all of which slows down page loading times.

The Easy Solution

Reduce latency by ensuring that you have no more than one redirect from a given URL to the final page.

More Advanced

  • Use 301 redirects (permanent) to redirect to new content if the old content has been deleted. Only use 302 redirects (temporary) when making changes in the short term, such as for limited time offers or events.
  • Choose between JavaScript or HTTP redirects. HTTP redirects cause latency server side, as stated above. However, JavaScript creates a slow down on the visitor’s device as the page has to be downloaded and the script must be executed. Googlebot supports both types of redirects. However, we recommend HTTP redirects.

Improve Server Response Time

A fast server response is a must. This will reduce abandonment and increase user experience. Google recommends that your server response time be below 200ms and that your website fully loads within 3 seconds.

How?

  • Configure your server to use HTTP/2 and setup a CDN (you can find out more about CDNs in my previous post here).
  • If using HTTP/2, implement HTTP2 push. This will push certain elements of the page to the visitors browser earlier than required for faster loading times.
  • If you can’t enable HTTP/2, add preconnect, preload or prefetch directives to elements. This is a similar function to HTTP/2 push but is designed for the older HTTP standard.
  • Enable support for both IPv6 and IPv4 on your server. IPv6’s neighbour discovery and route optimisation applications allow websites to load between 10 – 15% faster.

To conclude, the above are the optimisation recommendations that Google provide, deciphered. By following the above sections – and with some trial and error – your website should be blazing fast.

👇 Like what you read? Share what we said! 👇

About Mitchell Thomas

Mitchell Thomas

Mitchell has over 6 years experience in digital marketing with a core focus on SEO. His experience spans small, localised organic search campaigns right up to larger, national SEO campaigns across a wide range of industries.