Implement Lighthouse and PageSpeed Insights recommendations with Fasterize

Modified on Mon, 27 Sep 2021 at 09:16 AM

Google can offer you a web performance score through its free tool PageSpeed Insights. To understand how this score is calculated, please consult our complete file on this topic.

 

In the Opportunities and Diagnostics sections, you will find recommended actions to reduce your load times. Although some are relevant and may apply to your website, it is worth bearing in mind that an expert opinion is still necessary to implement optimisations intelligently and effectively.

 

Here is an example of the recommendations: delaying the unused CSS could save 0.45 seconds in the load time of that page.




Let's have a look at the most common recommendations in these sections, and how to deal with them. We will explain in detail the extent to which Fasterize can resolve this issue.

 

  • Page does not use HTTPS
  • Does not redirect HTTP traffic to HTTPS
  • Page does not use HTTP/2 for all its resources
  • Page load is not fast enough on mobile networks
  • Reduce the server response time (TTFB)
  • Serve static assets with an efficient cache policy
  • Pre-load key requests
  • Pre-connect to required origins
  • Eliminate render-blocking resources
  • Reduce JavaScript execution time
  • Minify JavaScript resources
  • Remove unused JavaScript resources
  • Minify CSS resources
  • Remove unused CSS resources
  • Serve images in next-gen formats
  • Encode images efficiently
  • Size images properly
  • Use video formats for animated content
  • Delay loading off-screen images
  • Enable text compression
  • Avoid excessive DOM size
  • Reduce critical request depth
  • Ensure text remains visible during Web font loading
  • Avoid enormous network payloads
  • Page does not use passive event listeners to improve scrolling performance
  • ‘robots.txt’ is not valid



Page does not use HTTPS

 

According to Lighthouse, all sites should have HTTPS protection, even those not processing sensitive data. HTTPS prevents intruders from hijacking or passively listening to communications between your app and its users. It is also a prerequisite for the use of HTTP/2 and numerous new Web platform APIs.

 

Corrected by Fasterize: YES

 

Fasterize provides optimised HTTPS support. This requires a certificate to be installed. You can provide us with your own SSL certificate using a secure procedure, or you can ask us to generate a LetsEncrypt certificate for you. Using a LetsEncrypt certificate has the advantage of simplifying maintenance considerably as it is renewed automatically. For more details, consult our HTTPS migration file.


Does not redirect HTTP traffic to HTTPS

 

If you have already configured HTTPS, remember to redirect all HTTP traffic to HTTPS in order to provide safe Web features for all your users.

 

Corrected by Fasterize: YES

 

Fasterize manages the redirection of HTTP 301 to HTTPS in the Redirection part of the Dashboard.



Page does not use HTTP/2 for all its resources


The Lighthouse recommendation specifies that HTTP/2 has many advantages over HTTP/1.1, such as binary headers, multiplexing and Server Push.

 

Corrected by Fasterize: YES

 

Fasterize provides HTTP/2 by default for all HTTPS connections.


Page load is not fast enough on mobile networks

 

According to Lighthouse, your page load is too slow. The user cannot interact with it in less than 10 seconds.

 

Corrected by Fasterize: TO BE DECIDED

 

Contact us to diagnose the causes of the slowness and decide what we can improve. For example, Fasterize can work on the blocking load of certain scripts.



Reduce the server response time

 

Fasterize provides a complete HTTP caching solution. Smart Cache and Cookieless cache allow you to cache dynamic pages intelligently and thus reduce the server response time. In addition, Early Hints also enable you to reduce the TTFB by sending the initial downloading information quickly to the browser.

 

Corrected by Fasterize: YES, for all cacheable or partly cacheable pages.

 

Here is an example of Fasterize's cache configuration:


Voici un exemple de configuration du cache de Fasterize :




Serve static assets with an efficient cache policy

A long cache lifespan can speed up repeated visits to your page.

 

Corrected by Fasterize: YES

 

With Fasterize, static page resources are versioned and cached for one year. This value can be configured in the configurations cache section.



Pre-load key requests

Lighthouse recommends that you consider using `<link rel=preload>` to rank the retrieval of the resources currently required for the subsequent page load.

 

Corrected by Fasterize: MANUALLY

 

Fasterize pre-loads the essential JS, CSS, and FONT resources using Early Hints


You can also insert tags in the Fasterize Tag Manager after the`<head>` tag.



Pre-connect to required origins

The recommendation indicates that you consider adding the `pre-connect` or `dns-prefetch`resource indicators to establish the initial connections with significant third-party origins.

 

Corrected by Fasterize: MANUALLY

 

You can also insert tags in the Fasterize Tag Manager after the`<head>` tag.



Fasterize automates the pre-connection to Google Font by activating optimisation in the rules section: 



Eliminate render-blocking resources

If resources are blocking your page’s first visualisation (first paint), consider serving essential JS/CSS sheets inline and delaying serving all non-essential JS/style sheets.

 

Corrected by Fasterize: PARTIALLY

 

JS Defer allows you to delay JS execution. Fasterize also places style sheets at the top of the page. However, Fasterize does not remove the non-critical or unused CSS on the page.


Reduce JavaScript execution time

Lighthouse suggests that you consider reducing the time spent on JS analysis and execution. Loading smaller JavaScripts may help.

 

Corrected by Fasterize: NO

 

Fasterize allows you to lessen the impact of JavaScript execution by ensuring execution takes place at the lowest-impact times for the user experience.  However, the JavaScript execution time remains unchanged.


Minify JavaScript resources

Minifying JavaScript files may reduce bandwidth consumption and script analysis time.

 

Corrected by Fasterize: YES

 

Activate JS minification from your dashboard. The minifier supports JavaScript and ES6.


Remove unused JavaScript resources

Remove unused JavaScript resources to reduce the quantity of bytes used by network activity.

 

Corrected by Fasterize: NO

 

Fasterize does not remove JavaScript on the page. However, it can load it in a way that reduces its impact on the user experience as much as possible.

The reduction of Java Script resources requires a functionality and third-party script audit to evaluate their benefits.


Minify CSS resources

Reducing CSS sheets may reduce bandwidth consumption.

 

Corrected by Fasterize: YES

 

All you have to do is activate CSS minification from the rules part of the Dashboard.


Remove unused CSS resources

According to Lighthouse, you should consider removing the style sheets’ unused rules and delay loading unused CSS resources for content above the float line, in order to reduce the quantity of bytes unnecessarily consumed by network activity.

 

Corrected by Fasterize: NO

 

This technique refers to the Critical CSS technique. Fasterize does not offer this technique which is complex to automate as the critical CSS for displaying the page may depend on the screen resolution in responsive websites.


Serve images in next-gen formats

Image formats such as JPEG 2000, JPEG XR and WebP often provide better compression than PNG or FPEG formats. Loading is therefore faster and data consumption reduced.

 

Corrected by Fasterize: NO

 

Fasterize does not yet modify the format of your images. We are planning to convert them into WebP in the near future. In practical terms, the advantage of changing from JPEG to WebP is less significant than stated by Lighthouse.


Encode images efficiently

Optimised images load more quickly and consume less mobile data.

 

Corrected by Fasterize: YES

 

Fasterize optimises JPEG, PNG, GIF and SVG images. It encodes JPEG images in a way that maintains the original visual quality. Note that Lighthouse provides optimisation of images that have already been optimised, as it does not take account of the perceived quality and systematically uses a quality factor of 80.



Size images properly

Serve images of an appropriate size in order to save mobile data and reduce loading time.

 

Corrected by Fasterize: YES, MANUALLY

 

Fasterize supports settings for resizing images. These settings are not added automatically by the engine but must be introduced in the HTML code.

The documentation page can be found here.

 


Use video formats for animated content

Heavy GIF images are inappropriate for serving animated content. Consider using MPEG4/WebM for animated content and PNG/WebP instead of GIF for static images, in order to save network bytes.

 

Corrected by Fasterize: NO

 

Fasterize does not yet allow you to convert animated GIFs into video. However, this is under evaluation.


Delay loading off-screen images

Consider loading masked or off-screen images after loading all essential resources, in order to reduce the time before interactivity.

 

Corrected by Fasterize: YES

 

Fasterize offers an image lazyloader. Only visible images are loaded at the outset. The remaining images are loaded when the user starts scrolling. Our script is not applied to the first images on the page in order to make use of the browser's pre-scanner. However, if the images are displayed through JavaScript, the Fasterize lazyloader cannot modify their loading. It does not take account of loading background images.


Enable text compression

Textual resources must be served compressed (Gzip, Deflate or Brotli) to reduce the total number of bytes in the network.

 

Corrected by Fasterize: YES

 

Fasterize supports Gzip and Brotli compression. Brotli compression is active on optimised JS and CSS files and also on pages from the Fasterize cache.


Avoid excessive DOM size

 

DOM assets are all the tags on a page (such as DIV, HTML, BODY, etc.).

According to the Google web developer guide, an optimal DOM tree includes the following characteristics: 

  • Fewer than 1500 nodes in total.
  • A maximum depth of 32 nodes. 
  • No parent node with more than 60 child nodes.

 

Corrected by Fasterize: NO

 

Fasterize does not have the capacity to reduce the DOM size. The only way to reduce the DOM would be to remove assets from the page. We do not offer this type of feature.


Reduce critical path

The critical request chains below show which resources are loaded with a high priority. Consider reducing the length of chains and the download size of resources or postponing downloading unnecessary resources in order to improve page loading.

 

Corrected by Fasterize: YES

 

Fasterize works on two aspects: the CSS is placed at the top of the page; the execution of JavaScript files is delayed in order to avoid blocking the first rendering of the page.


Ensure text remains visible during Web font loading

 

Use the CSS font display function so that the text is visible to the user during Web font loading.

Corrected by Fasterize: YES

 

Fasterize can activate the "font-display" option in the Font optimisation part of your Dashboard.



Avoid enormous network payloads

Bandwidth is expensive for users and is closely linked to very lengthy loading times.

 

Corrected by Fasterize: YES

 

Activate HTML, CSS and JS minification from your Dashboard.


Page does not use passive event listeners to improve scrolling performance

Lighthouse suggests that you consider marking your touch screen and mouse wheel event listeners as `passive` in order to improve the scrolling performance of your page.

 

Corrected by Fasterize: NO

 

Fasterize does not modify the semantics of your JS code.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article