By Shehab Waleed, Founder, Cairo Studio 3 min read
Most of our pages score between 80 and 96 on mobile Lighthouse. The homepage sits in the 70s. The pages at the bottom of that range share one thing: the largest thing on the first screen is a title that starts invisible and arrives with an entrance animation.
What LCP measures
Largest Contentful Paint is the time at which the largest image or text block in the first view is painted. An element at opacity 0 has not been painted in any way that counts. So if the hero text waits for JavaScript, then for the intro, then for its own entrance, LCP waits for all three.
Lighthouse splits LCP into parts. For our hero pages, almost all of it was render delay: the HTML and fonts had arrived, and the text simply was not visible yet. In the simulated mobile run that delay came to 3.4 to 4.5 seconds.
What we tried
The obvious suspect was the preloader, the short intro that plays on a first visit. Taking it out alone did not move LCP, because the hero entrance still started hidden.
Next we painted the title under the preloader, so it would already be on screen. That did not help either. Our entrance splits the title into words with SplitText when it runs, and in our runs the paint that counted was the one after the split.
We also deferred project posters outside the first view, and stopped the preloader waiting for the homepage ring to load. Both are reasonable changes, and neither moved LCP.
What did help, elsewhere
The pages without an entrance improved a lot from ordinary work: smaller HTML, images loaded near the viewport, CSS images set late and analytics loaded after the page. That work also lifted the hero pages, just not past the entrance.
The choice that is left
The way through is to put the hero in the server HTML at full opacity and animate something else, or animate it in a way that starts visible. On the homepage we have not done that, because the entrance is part of how the studio introduces itself, and we value that more than a few Lighthouse points for now.
We are not certain the score maps to anything a visitor feels here. A person on a real phone sees the intro and then the title, which is the experience we designed. Lighthouse sees a title that took four seconds to appear. Both are true.
How we measure
Single Lighthouse runs from a laptop swing by up to 20 points, from network jitter and from whatever else the machine is doing. We take the median of three runs, and we check the benchmark index Lighthouse reports. When it falls below about 3000, the machine was busy and we discard the run.
