##Feb 2022 - Update Notice Below
- There won't be a release for 10.2 planned. It is 2022 and Sitecore 10.2 now supports Next.JS which is a far better option if you're serious about page speed. Yes, the headless world has its challenges and it's a little bit of the bleeding edge / wild west, but worth considering if you have a new build.
- If you want to get in touch, reach out on Sitecore slack. I'm not actively watching the issues tab in this repository.
- Google has updated the Page Speed test. You will now see the real-world data tests at the top, which is an amazing improvement for everyone.
- On the other hand, if you're just running single one-off tests, it's also cranked up the algorithm the next notch it appears. So it's a bit harder again to get into the green zone for single test runs.
- One tip worth mentioning for those single tests before your get into production. Switch over to using GTMetrics (which is now also based on lighthouse) and choose a testing server closer to your hosting server. For those not using an Edge CDN, this will provide a more accurate 'single' run score.
Use best practice page load techniques to achieve Outstanding Page Speed scores for your Sitecore pages.
Speedy provides a Sitecore Layout and Asset provider that structures your HTML in accordance with Google's recommendations. Google ranks your website with a score out of 100 and provides recommendations on how to achieve better scores. Implementing Critical CSS and Deferred Javascript loading can be tricky. This module provides a framework and brings together the tools needed to automate the process.
Installation, Usage and results screencast ... click here
Results:
Before / After (Full Screenshots):
In order to get great page speed scores there are several aspects you need to address. Read more here.
This module addresses Critical CSS and Deferred asset loading, which is perhaps one of the hardest parts of Page Speed to get right.
It is likely that a developer will be required to setup and tweak the settings before the first full deployment.
- Installation - via Sitecore Package - Select Override when promted
- Change the layout on the page you want to enable Speedy on
- Enable Speedy
Read more about how to troubleshoot display issues ...
- Deep dive into the murky waters of script loading
- Async Vs Defer
- Efficiently load JavaScript with defer and async
- Critical
- LoadCSS -- Looking to implement this in a future version
- https://www.browserless.io/
If you have a browse around this has been blogged about a bit.
When loading external libraries async its likely that the DOM Ready event that Jquery fires has already passed.
Ideally the javascript library would be written so that it will initialise when loaded (regardless of async/defer). If this isn't the case try to find the initialization function within the library. You would call this initialization inside of
Speedy.fallbackExperienceAfterLoad = function () { which can be found here
At this stage Speedy doesn't support a hybrid model of loading some scripts in main upfront and some async. It might be something to consider in a future release.
A fairly large overhaul that's what. We got feedback that content editors don't really want be generating optimised critical CSS chunks. Or at least its not really fair to put this burden on them. At the same time developers role off projects and don't want to maintain it. So in the V10 release we simply started reading the entire CSS bundle inline into the critical region in the block of the page. This isn't optimal but its a lot more practical and its still give you far better scores than loading all of those external CSS files seperately as render blocking network calls. One caveat to this is that you need to consider GZIP your HTML payload.