LCP 2,1s op mobiel, vier jaar na de audit
Drie sites in één, zo'n 25 URL's en een blog dat alleen snel leek in Lighthouse.
WordPress, een aparte profielen-app en een blog
De site van Voices bestond eigenlijk uit drie sites: een WordPress-marketingsite, een aparte app voor de stemacteurprofielen, en een blog en podcasts. Ik liep zo'n 25 URL's na verspreid over alle drie.
Layout shifts op de homepage, trage profielen en een 94 voor het blog die bezoekers nooit kregen
Ik zat met hun developers om tafel, vertelde wat ze eerst moesten fixen en bracht ze gaandeweg wat bij. Ze pakten het meteen op: niet veel later mailde hun development manager me de lijst van wat ze hadden gebouwd, tot aan fetchpriority op de afbeeldingen die ertoe doen.
Tom, hun marketing developer, had voor zijn vertrek al veel van mijn advies doorgevoerd, en tegen maart 2022 waren de profielen in PageSpeed vaak groen. Toen ging er een lading nieuwe features live over de hele site, en zakten de profielen weer terug. In mei mailde hun development manager, Jayme Cousins, me: of ik nog eens kon kijken? De maandag erop stuurde ik hem drie quick wins. De sign-in scripts van Google en Apple waren render-blocking geworden nadat ze Cloudflare’s Rocket Loader hadden uitgezet, dus moesten ze met defer naar het einde van de body. Het logo had een width en height nodig. En de LCP was een CSS-achtergrondafbeelding; dat moest een echte afbeelding worden met een preload. We vonden die woensdag een gaatje, tussen hun Victoria Day en mijn Hemelvaartsdag in (mijn vrouw had het niet gewaardeerd als ik op een feestdag had gewerkt), en die dag stuurde ik ook voorbeeldcode mee, inclusief een kleine page cache.
Tegen augustus was de head van een profiel 40 kB in plaats van 251 kB.
- 251 kB
- grootte van de head
- 28
- @font-face-regels
- 2
- blokkerende scripts
- 40 kB
- grootte van de head
- 0
- @font-face-regels
- 0
- blokkerende scripts
Op desktop zie je de tweede ronde zijn werk doen. In april, nadat de nieuwe features live gingen, piekte de Time to First Byte op 1,1 seconde. Tegen oktober was die 0,8 en groen, en was LCP gedaald van 1,8 seconde in maart naar 1,5.
Vier jaar later zocht ik Voices voor deze pagina weer op in CrUX: over de hele linie groen. Op mobiel zit LCP tussen de 2,0 en 2,3 seconden, INP tussen 150 en 200 ms, en CLS is al een jaar lang elke maand 0. Dat hebben hun developers helemaal zelf gedaan.
"Arjen speelde een sleutelrol bij het fixen van onze Core Web Vitals. Hij kreeg onze cruciale profielpagina's weer in het groen in PageSpeed. Wat ik het meest waardeer is zijn hands-on mentaliteit: hij vindt niet alleen de bottlenecks, maar werkt direct samen met ons developmentteam totdat de fixes echt live staan."
Jayme Cousins, Manager Development, Voices.com
Een plugin die scripts uitstelt, houdt Lighthouse voor de gek
De test scoort wat hij ziet, en die scripts zag hij nooit. De telefoon van een bezoeker downloadt en draait ze alsnog allemaal.
Eén layout shift bleek er drie
Het rapport gaf één CLS-getal. De trace liet drie shifts achter elkaar zien, en elk had een eigen fix nodig.
Leer je het de developers, dan blijft het groen
De audit was in 2022. Hun developers hielden het groen, en CrUX slaagt op mobiel nog steeds.
Groen in Lighthouse, rood in Search Console?
Ik zoek uit wat er traag is voor je bezoekers en waarom, en je developers krijgen de fixes in de volgorde waarin ze die moeten bouwen.
Meer resultaten op mijn klantenpagina.
