Vooraf geladen LCP-afbeelding
Silktide controleert of de hoofdafbeelding op je pagina - het grootste element dat bezoekers zien wanneer de pagina wordt geladen - eerder zou kunnen verschijnen als de browser de opdracht krijgt om deze eerder op te halen. Pagina's voelen geladen aan zodra hun grootste inhoud verschijnt. Daarom bepaalt deze ene afbeelding vaak hoe snel de hele pagina aanvoelt.
Het moment waarop die afbeelding verschijnt, wordt gemeten als Largest Contentful Paint (LCP), een van de van Google.
Waarom dit belangrijk is
Browsers downloaden bestanden ongeveer in de volgorde waarin ze deze ontdekken, en de hoofdafbeelding wordt vaak pas laat ontdekt - verborgen achter stylesheets en scripts, verwezen vanuit of ingevoegd door een script. Het resultaat is een pagina die snel wordt opgebouwd, maar vervolgens een leegte laat op de plek waar de belangrijkste inhoud hoort te staan.
Omdat bezoekers de snelheid beoordelen aan de hand van het moment waarop de hoofdinhoud verschijnt, en Google LCP meeweegt in de zoekresultaten, behoort het instrueren van de browser om dit ene bestand voorrang te geven tot de meest waardevolle snelheidsverbeteringen die beschikbaar zijn.
Zo los je dit op
- Laad de afbeelding vooraf, zodat de browser deze vanaf het allereerste begin van het laadproces ophaalt:
<!-- In <head>: haal de hero-afbeelding onmiddellijk op -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
- Als de afbeelding een gewoon
<img>-element is, kun je ook rechtstreeks het attribuutfetchpriority="high"toevoegen. - Gebruik nooit voor deze afbeelding -
loading="lazy"op de hoofdafbeelding vertraagt precies wat als eerste zou moeten verschijnen. - Gebruik voor de belangrijkste visuele inhoud bij voorkeur een gewoon
<img>-element in plaats van een CSS-achtergrondafbeelding, zodat de browser deze zelf vroeg kan ontdekken.
Zo test Silktide dit
- Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn ingesteld.
- Identificeer het grootste inhoudselement dat zichtbaar is terwijl de pagina wordt geladen. Als dit een afbeelding is, controleer dan wanneer de browser deze heeft ontdekt en gedownload.
- Als het eerder ophalen van de afbeelding ervoor zou zorgen dat deze eerder verschijnt, rapporteer dit dan met de geschatte tijdsbesparing.
Problemen oplossen
De hoofdafbeelding verschilt per pagina of apparaat
Preload-hints gelden per pagina, en het "grootste" element kan verschillen tussen desktop- en mobiele lay-outs. Met templates kan per pagina de juiste preload worden gegenereerd, en de attributen media en imagesrcset van de hint verwerken responsieve varianten.
Ik heb de afbeelding vooraf geladen, maar de bevinding blijft staan
De preload-URL moet exact overeenkomen met wat de pagina uiteindelijk weergeeft - een andere formaatvariant of een URL die door een is herschreven, telt niet mee. Controleer ook of de hint zelf in de -head van de pagina staat en niet later door een script wordt toegevoegd, omdat dit het doel tenietdoet.