For desktop, I have a site with a decent page speed score (currently, 96): https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.usstoragecenters.com%2Fstorage-units%2Fca%2Falhambra%2F2500-w-hellman-ave&tab=desktop
I’m trying to improve the score (mostly for mobile), but I’ve somehow made it worse (currently, 69 on desktop): https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstage.usstoragecenters.com%2Fstorage-units%2Fca%2Falhambra%2F2500-w-hellman-ave%3Fplain%3Dtrue&tab=mobile
Looking through the numbers, the thing that stands out to me is that prod has an FCP (First Contentful Paint) of 0.7 seconds, while stage has an FCP of 2.0 seconds. This seems weird to me since stage should be much faster, but is apparently much slower.
Looking at the mobile timeline of thumbnails (desktop is a bit hard to see), it appears as if stage renders the first “full content” much faster:
I highlighted the ones that visually look “complete” to me (stage is on top, prod is on bottom).
Here are some screenshots so you can see what I do (PageSpeed Insights differs fairly significantly each time it’s run).
Here is stage:
And here is production:
Summary of Changes
Here are the main things I did when trying to improve the score:
- I lazy loaded images (e.g., the slideshow initially only loads the first image).
- I reduced the number of DOM elements (from 4,600 to 1,700).
Those changes should have improved the score.
Do you have any ideas of why, despite my best efforts, the PageSpeed score tanked?
So I figured out the issue. PageSpeed Insights is drunk.
This is weird because the page actually seems to take longer to display. However, Google PageSpeed Insights thinks it’s displaying sooner, and so it improves the score.
One time I tried, the mobile score went up to 99:
I tried again and got a more reasonable 82:
And on desktop, the score went up to 98:
The interesting thing about the mobile screenshot showing 99 is that you can see in the timeline thumbnails that the image for the slideshow at the top of the page hasn’t loaded yet. So it seems like a case of Google PSI prematurely deciding that the page has “finished loading”, even though it hasn’t finished.
It’s almost like if you delay certain things long enough, Google will ignore them. In other words, the slower the page is, the better the score they will give you. Which is of course backwards.
If somebody can come up with a more satisfactory explanation, I’ll mark that as the answer. Otherwise, I may end up marking this one as the answer.
Middle Ground Approach
preload.js that is included like this:
<script src="/preload.js" defer></script>
This is the content of the
The backend creates a variable on the window object called
The page still loads pretty fast and the score is PSI score is still good (80 mobile, 97 desktop):