Our client would like us to aim/achieve a particular Google PageSpeed Insights score. In particular, a score equal to or above 80/100 (mobile score) would be ideal.

We are building the site with SXA, how do we get anywhere near that score?

https://developers.google.com/speed/pagespeed/insights/

From numerous experiments, I have put together the following tips and tricks.

Note that a good score under the desktop tab is considerably easier to achieve, the mobile score in our responsive sites is the real score we should benchmark against.

Backend Vs Front End

Page speed can be divided into two distinct parts. Backend server response and front end structure.

To get close to that desired score you need to get both working well together. I found the following to have the biggest impact:

Backend:

• Sitecore HTML Cache / Rendering Cache (tuned)


• Adequately sized servers.


• Image optimisation processor (Dianoga still seems widely used).


• Throw in a CDN for your media library for good measure.


• With SXA turning on the optimizer is a must for production and will improve the google analytics score (to a point) but the component-based nature of an SXA build will still likely result in many CSS and JS files.

Front End:

• Responsive images


• Lazy loaded images


• 
  Critical CSS in combination with deferred stylesheets. (this comes with challenges, but can be achieved.)


• 
  Deferred Javascript (this also comes with challenges, but can be achieved.)

Javascript deferral

Large amounts of JS code, in particular, has a big impact on page speed score when it's not deferred. Javascript is parsed and compiled in the browser and this has a load time cost.

Deferring Javascript does require a good working knowledge of SXA and the javascript code in the components. To get maximum benefit I found that the javascript files had to be deferred for 5 - 10 seconds depending on the site. This was so that the Lighthouse audit does not consider them part of the main page load. During this time some interactions on the page are not available, as they only kick in when the javascript finishes loading. This is where a working knowledge of javascript comes in as you may need code in some vanilla javascript that provides a nice experience until the deferred load completes. For example: fading in a clickable drop downlink.

Ensuring Load Order

This page contains a script that will allow you to defer javascript while still guaranteeing the execution order of the SXA javascript files inserted. Given that some of the OOTB SXA modules appear to be based on Jquery this is fairly important as the JQuery object needs to be available before other files load.

SXA JS Bootup

Furthermore, because the page load completed event may have already triggered before a deferred SXA Javascript file is loaded your code may need to have a bootup fallback. I found the following pattern to work in both deferred and non-deferred scenarios.

api.isRunning = false;
api.init = function () 
 api.bootup();
;

/* Fallback bootup routine for deferred speedy load */
setTimeout(function () 
 if (!api.isRunning) 
 api.bootup();
 
, 1000);

api.bootup = function () 
 api.isRunning = true;
 // Place your normal app.init code here. Repeat the pattern in each of your components XA.component.Mycomponet namespace
;

CSS Deferral

Deferring your external CSS files and adding in an inline Critical CSS block also provides a great points boost. This can be automated using tools like Critical. This tool is good but not perfect. Using this across an SXA site will likely require some tweaking and trial and error to get it right. Once you have it working on one page it's a lot easier to roll out to others as many of the tweaks are the same.

SXA Layout

To hook in Critical CSS, JS and CSS Deferral into your solution you can extend the default SXA Layout. The provider of CSS and JS asset files is

Sitecore.XA.Foundation.Theming.Bundler.AssetLinksGenerator.cs

You can extend this class to gain access to each pages CSS and JS files, allowing you to structure the paths of the CSS and JS files into the structure required by the new layout and deferral code.

Lighthouse

Also, note that Google PageSpeed Insights is based on Lighthouse that is available in the Audit tab within chrome. The page speed tool was switched over to Lighthouse in mid-2018. The score achieved in the live version of the tool also filters through to Google Analytics reporting.

Code Samples

I have put together a functional SXA helix module with the tools and tips mentioned above. It's available here.
Many of the techniques used could be ported over to a more traditional Sitecore Helix build if needed.