https://blog.rentpathcode.com/we-increased-our-lighthouse-score-by-17-points-by-making-our-images-larger-83f60b33a942 Sign in Code for RentPath * Software Engineering * DevOps * Web Development We Increased our Lighthouse Score by 17 Points by Making Our Images Larger Vance Lucas Vance Lucas Follow Jul 6 * 3 min read 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. [1] LCP Area calculations of the Google Map tile vs. the Old and New Thumbnail Sizes 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. [1] Property Thumbnail Images side-by-side with the Google Map on rent.com 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: [1] Yes, loading MORE data via LARGER IMAGES really does result in a higher Lighthouse score! 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. Code for RentPath Techniques, Tips, and Tales of Triumphs and Travails from... Follow 116 * Performance * Lighthouse * Web Performance 116 claps 116 Vance Lucas Written by Vance Lucas Follow Engineering Manager/Lead at RentPath and open-source developer. Co-founder of Techlahoma, ThunderPlains Developer Conference, and the OKC.js User Group. Follow Code for RentPath Code for RentPath Follow Techniques, Tips, and Tales of Triumphs and Travails from the RentPath Software Engineering and DevOps Teams Follow Vance Lucas Written by Vance Lucas Follow Engineering Manager/Lead at RentPath and open-source developer. Co-founder of Techlahoma, ThunderPlains Developer Conference, and the OKC.js User Group. Code for RentPath Code for RentPath Follow Techniques, Tips, and Tales of Triumphs and Travails from the RentPath Software Engineering and DevOps Teams More From Medium Stop building websites for iPhones David Sommers in Code for RentPath [1] [1] Running Dialyzer for Elixir Projects in GitHub Actions Trevor Brown in Code for RentPath [1] [1] Stop Shadowing and Rebinding Variables Michael Stalker in Code for RentPath [1] [1] Why Google threw out FP and FCP in favor of LCP (Correlation study) David Sommers in Code for RentPath [1] [1] A Few Late Autumnal Favourites David Wade Chambers in SNAPSHOTS [1] [1] Improving Frontend User Experience with Profiling and Performance Bonitasoft [0] [0] Next-generation theme design: how we made Dawn fast, extensible, and beautiful Guillaume Granger in Shopify UX [1] [1] How To Wire Your Brain For Peak Performance Corey Wilks, Psy.D. [0] [0] Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more Make Medium yours. Follow the writers, publications, and topics that matter to you, and you'll see them on your homepage and in your inbox. Explore Write a story on Medium. If you have a story to tell, knowledge to share, or a perspective to offer -- welcome home. It's easy and free to post your thinking on any topic. Start a blog About Write Help Legal Get the Medium app A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store