We Increased our Lighthouse Score by 17 Points by Making Our Images Larger
As part of our larger performance focus at RentPath (now owned by Redfin), we have been digging into the raw performance numbers on everything we can to make our pages respond and load faster for our users. We have made a lot of improvements over the past several months, but along the way there were a few surprises. This is a specific story about a counter-intuitive quirk we found when using certain images sizes on our website along with Google Maps and Lighthouse scores.
When we first started looking at all the core metrics, our LCP (Largest Contentful Paint) score was much higher than we liked at ~3.3, and was bringing down our overall Lighthouse performance scores and perceived page performance. We dug in a bit to see what was going on.
Watching the timeline with images, we realized that the Google Map tiles were being counted as the largest element, which was severely negatively affecting our LCP scores since they took so long to load — in Lighthouse, the LCP penalty is a factor of size plus load time.
Since we display both the map and the thumbnail images side by side on the page, they were both in contention for LCP on page load. Since we also didn’t have any large chunks of text on the page either, the 256x256 Google Map tile was being selected as the single largest element on the page by area (width x height). Since the Google Map tiles take a good while longer to load than the rest of the website, the drag on our LCP score was amplified.
Once we fully understood what was happening, the fix itself was simple — just make the thumbnail images larger on the search results page so we can control the largest element on the page (LCP) and ensure it loads quickly — unlike the Google Map.
The end result was that increasing the size of our thumbnail images raised our performance score by reducing our LCP score. If you are thinking of web performance in straightforward terms like “shipping less data over the wire = faster”, this can be a very counter-intuitive result.
Here is a quick exchange from 2 developers on the PR (Pull Request) in comments with the code changes that made the thumbnail images larger:
We wanted to be sure of our numbers, so we took the average of 20 Lighthouse runs between the two code changes, and our new Lighthouse score was 17 points higher after increasing the size of our thumbnails. Huge success!
Before shipping any change — and especially a metrics-focused one like this — we also ensure it is going to be good for end users. We don’t want to chase vanity metrics to the detriment of our end users. This one was an easy call though, because we had already made the thumbnail images larger on ApartmentGuide, but the change was never duplicated on Rent — the current site in question. We made the change, deployed, and enjoyed the easy win.
