How I Pushed PageSpeed from 52 to 98 — The Lazy Loading Trap I Set for Myself

How I Pushed PageSpeed from 52 to 98 — The Lazy Loading Trap I Set for Myself Performance optimization has a way of humbling you. While building TalkWith.chat, I checked PageSpeed Insights one day and saw this: Mobile: 52. Desktop: 69. Not great. So I started digging. The Thing That Was Killing the Score The biggest culprit turned out to be a single line of code. The topic banner image — the main visual sitting above the fold, visible the moment the page opens — had loading="lazy" on it. // The problem < img src = { topic . bannerImage } loading = "lazy" // 👈 this was it alt = "Today's debate topic" /> loading="lazy" tells the browser: "don't load this until the user scrolls near it." For images below the fold, that's a smart optimization. For the LCP element sitting at the top of the page , it's a disaster. The browser was actively deferring the most important image on the page. The fix was one attribute: // The fix < img src = { topic . bannerImage } fetchPriority = "high" // 👈 load