After following the recommendations in this thread, I’m getting excellent Chrome Lighthouse scores on first load, both with and without “Clear Storage” checked:
-----With “Clear Storage” checked (note: both tests were run in an Incognito window – I don’t yet know why Chrome is telling me I need to do that since it is in one):-----
To help make sure my PWA isn’t helping with the page load speed test, in both cases I first went to Application Tab->Storage->IndexedDB and deleted the database before each test. I also went to the Application tab and clicked “Clear Site Data” twice before running each Lighthouse test.
These are the best Lighthouse scores I’ve gotten yet.
So, two questions:
Am I missing something? These scores seem to be too good.
Would adding SSR potentially improve these scores?
Always simulate throttling as google will use the actual chrome experience data report as part of your final score. Below is an example of aggregated data from chrome (as loaded by our users) from a group of our pages
SSR improves user experience as they see the content before the app has been completely loaded. It also has the side effect of giving content to Google without parsing and executing your javascipt (which takes time and not guaranteed).
Thanks for this feedback! I just ran Lightspeed tests with throttling checked and very similar results. May I ask, what do your First Contentful Paint and Speed Index scores look like with SSR? OTOH, possibly it wouldn’t be an apples-to-apples comparison as I really don’t have any data loading required for my home page, so in that case it might not be a good comparison.
I mean I’m not loading any data from the DB on my home screen. Needed data is in an array in the component so I don’t have to hit the database to get it. There’s still text and SEO tags included in the React component.
Ah, got it. Then that will be the same as my SSR. Although my homepage (and most public pages) is 100% user generated content, the html contains all the data displayed as is even before the js is loaded, parsed, and executed. This also includes inline css explicitly just for the page.
If your page requires JS to be displayed properly for the user to consume the data, then SSR will help