This is just a quick update to list out some further optimisations that might help you achieve a few extra points.
Prolong the Cache Expiry Setting
The default cache expiry settings is 7 days OOTB in Sitecore. This is a little short for the likes of GTMetrix but may be passable for Lighthouse. I found it best to bump it up to 30 days (if you can).
Google Page Speed insights calls this criteria “Text Compression” but this does actually make a download size difference if your HTML payload is large. After doing this I witnessed my initial HTML delivery drop from 130KB to 40KB.
Inside your web.config and the <httpCompression> tags we added just previously add the mimeType for document into both staticTypes and dynamicTypes.
<add mimeType="document" enabled="true" />
Cleanup all missing fonts and 404s
Be sure to check you network tab and make sure any missing font references or external resources are not throwing 404s. This will result in a score reduction particularly on GTMetrics.
I have done a number of posts and talks at user groups on Page Speed and performance over the last few years. I have split the various topics into individual blog posts for the most part as performance is dependent on many factors. What has really been missing is a complete demo of how all the different techniques come together to give your site a really good score. So that’s what I intend to demo here is the combination of the 6 pillars of page speed in one Sitecore instance. To recap here are the 6 pillars of page speed performance in my opinion:
I have shown a subset of these previously but crucially three critical pillars to do with imaging were hard to achieve at the time. This is now possible due to being able to support Next Gen image compression (webp), which I wrote about in my previous blog. With a little more time and investigation Image Lazy Loading, responsiveness and image compression to give a more complete picture of how each pillar impacts page speed.
Here are the tools and blogs I will use to achieve each of these:
Alternatives: Mark Gibbons (MVP) recently upgraded the Dianoga image library to support WEBP. Worth a look if you don’t want to use a third party API. It also supports a CDN. Also Vincent Lui (MVP) also pointed out in his recent SUGCON talk, you can achieve both image compression and image lazy loading via some of the modern CDN’s. That is a great (easy) option if you are retro fitting these techniques to a live website.
I’m not going to dive deep into exactly how to setup each of these things as I think the individual links have sufficient instructions. I will show in the Demo videos how each pillar impacts the HTML rendered. For the most part I am keen to demonstrate the impact of each of these line items and how each one will benefit your page speed score.
Before we begin its important to understand that the algorithm (Lighthouse) behind Google’s Page Speed insight doesn’t work in an exactly linear fashion. If you improve your score by ticking off one of the above, don’t expect ticking off another issue will have the same benefit. The last 20 points out of 100 (on the mobile scoring system) is that hardest to achieve based on what I have seen.
Live Demo Video Series that accompanies this blog:
The Baseline score encompasses the habitat site installed with no modifications.
Result: 48 / 38 / 40 / 34 / 38 = 39.6/100 Average
Observation: Heavily penalised for CSS and Javscript loading times.
Image Lazy Loading
All images on the homepage were converted to be Lazily loaded. A single large blurred image was used as the placeholder for all images.
Result: 57 / 55 / 61 / 52 / 63 = 57.6/100 Average
Observation: Around the mid point of the scale, image lazy loading has around a 15 – 20 point impact.
Rendering Cache Strategy
I have blogged extensively about this in the past but setting up cache settings properly is so critical and has a major impact. Its also one of the easiest things to fix for a poorly performing Sitecore site. Also note the only way to accurately demonstrate the impact that Rendering cache has on a site is to test it under load.
ERR_TIMED_OUT / ERR_TIMED_OUT / ERR_TIMED_OUT / ERR_TIMED_OUT / ERR_TIMED_OUT = You get the point 🙂
Observation: Rendering cache settingsare critical and should be the first step in Page Load Speed refinement for a Sitecore site. 10 Point benefit observed once a site is stable under load.
Result: 60 / 58 / 61 / 62 / 62 = 60.6/100 Average
Observation: Around the mid point of the scale, image lazy loading has around a 20 point impact.
Result: 74 / 78 / 79 / 81 / 81 = 78.6/100 Average
Observation: The combination of critical CSS in the head and Deferred styles provides a meaningful page speed boost. 25 Point observed benefit.
Result: 92 / 94 / 93 / 94 / 94 = 93.4/100 Average
Result: 56 / 54 / 59 / 56 / 60 = 57/100 Average
Observation: Around the mid point of the scale converting images to be responsive (srcset support) has about a 10 point impact.
No Change (SXA Habitat Home OOTB)
41.8 / 100
Image Lazy Loading
57.6 / 100
Sitecore Rendering/HTML Cache Settings
50.8 / 100
Image Compression (webp)
60.6 / 100
78.6 / 100
93.4 / 100
57 / 100
The Pillars Combined
In isolation we can see the rough results of what each of the pillars might do to our Page Speed. The real question is what does combining all these pillars produce.
Observation: Do I expect this on an actual production site realistically ? That is certainly the dream, but in reality you should be over the moon if you make it into the 90s and pat your self on the back if you get into the 80s as well. For any Sitecore site if you make it into the 90’s for mobile, your doing an amazing job.
Admittedly for the combined demo I skipped the responsive image pillar. SXA supports Responsive Images but not in combination with data attributes. It was going to be a bunch of work to write a custom SXA handler to support both lazy loading and responsiveness at the same time. That is not to say its not possible. Either way the impact was minimal.
Page speed is so critical to SEO and visitor conversion. A slow site instantly turns away users on mobile and tablet devices. Admittedly the final result shown above and in the video have required that all the right tools be available to the Sitecore community. Which up until recently you likely needed to bake your own solutions in order to get that over the line.
I think its now becoming possible to aim fairly high (90/100 on mobile) with our Page Speed scores, but it does require getting most if not all of the Architecture Pillars above working together. Its worth learning each of these and understanding the pitfalls and limitations if you want really great page speed. Good luck and feel free to get in touch with any questions.
The combined pillars can produce great results but you still need to load test before going live. Checkout the video below where I search for the breaking point using the loadtest tool. Please note that this node based load test tool should just be used for a guide. Before go live I recommend using a hosted load tool solution that has multiple geographic locations. Tests done based on one network location or device will result in a network bottle neck and give you false positives.
We are excited to preview our latest Open Source module. Before jumping into the actual technical details here are some of the early results we are seeing against the Habitat SXA Demo.
* Results based on Mobile Lighthouse Audit in chrome.
* Results are based on a local developer machine. Production results usually incur an additional penalty due to network latency.
Want to know more about our latest open source SXA Sitecore module …. read on ….
I’m continually surprised by the number of new site launches that fail to implement Google recommendations for Page Speed. If you believe what Niel Patel has to say this score is vitally important to SEO and your search ranking. At Aceik it’s one of the key benchmarks we use to measure the projects we launch and the projects we inherit and have to fix.
The main issue is often a fairly low mobile score, desktop tends to be easier to cater for. In particular, pick out any SXA project that you know has launched recently and even with bundling properly turned on its unlikely to get over 70 / 100 (mobile score). The majority we tried came in somewhere around the 50 to 60 out 100 mark.
Getting that page score into the desired zone (which I would suggest is 90+) is not easy but here is a reasonable checklist to get close.
The last two items are the main topics that I believe are the hardest to get right. These are the focus of our new module.
So how will the module help you get critical and JS defer right?
I also added in one more technique that I have found useful and that is to use a cookie to detect a first or second-time visitor. Second-time visitors naturally will have all external resources cached locally, so we can, therefore, provide a completely different loading experience on the 2nd pass. It stands to reason that only on the very first-page load we need to provide a deferred experience.
Critical + Deferred CSS Load
For CSS we incorporated the Critical Viewport technique that has been recommended by Google for some time. This technique was mentioned in this previous blog post. Generating the Critical CSS is not something we want to be doing manually and there is an excellent gulp based package that does this for you.
It can require some intervention and tweaking of the Critical CSS once generated, but the Gulp scripts provided in the module do seek to address/automate this.
Our module has a button added into the Configure panel inside the Sitecore CMS. So Content Editors can trigger off the re-generation of the Critical CSS when ever needed.
Local vs Production Scores
It’s also important to remember that the scores you achieve via Lighthouse built into Chrome on localhost and your non-public development servers can be vastly different than production. In fact, it’s probably safest to assume that non-production boxes give false positives in the region of 10 to 20 points. So it’s best to assume that your score on production will be a little worse than expected.
It’s a fair statement that you can’t just install the module and expect Page Load to be perfect in under 10 minutes. Achieving top Page Load Speed’s requires many technical things to work together. By ensuring that the previously mentioned checklists are done (Adequate Servers, Sitecore Cache, Image Loading techniques) you are partway over the line. By introducing the deferred load techniques in the module (as recommended by Google) you should then be a step closer to top score.