Forudindlæst LCP-billede
Silktide tjekker, om hovedbilledet på din side – det største, besøgende ser, når siden indlæses – kan vises hurtigere, hvis browseren får besked på at hente det tidligere. Sider føles indlæst, når deres største indhold vises, så dette ene billede afgør ofte, hvor hurtig hele siden føles.
Tidspunktet, hvor billedet vises, måles som Largest Contentful Paint (LCP), som er en af Googles .
Hvorfor dette er vigtigt
Browsere downloader filer omtrent i den rækkefølge, de opdager dem, og hovedbilledet opdages ofte sent – gemt bag typografiark og scripts, henvist til fra eller indsat af et script. Resultatet er en side, der hurtigt opbygger sin ramme og derefter efterlader et hul dér, hvor det vigtigste indhold burde være.
Da besøgende vurderer hastigheden ud fra, hvornår hovedindholdet vises, og Google medregner LCP i søgerangeringen, er det blandt de mest værdifulde hastighedsforbedringer, der findes, at bede browseren om at prioritere denne ene fil.
Sådan retter du det
- Forudindlæs billedet, så browseren henter det helt fra starten af indlæsningen:
<!-- I <head>: hent hero-billedet med det samme -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
- Alternativt kan du tilføje
fetchpriority="high"direkte til billedet, hvis det er et almindeligt<img>-element. - Brug aldrig til dette billede –
loading="lazy"på hovedbilledet forsinker netop det, der burde komme først. - Foretræk et almindeligt
<img>-element frem for et CSS-baggrundsbillede til det primære visuelle element, så browseren selv kan opdage det tidligt.
Sådan tester Silktide dette
- Indlæs siden i en rigtig browser ved hjælp af den enhedstype, forbindelseshastighed og testplacering, der er konfigureret til dine hastighedstests.
- Identificer det største indholdselement, der er synligt, mens siden indlæses. Hvis det er et billede, skal du tjekke, hvornår browseren opdagede og downloadede det.
- Hvis en tidligere hentning af billedet ville få det til at blive vist hurtigere, rapporteres det med den anslåede tidsbesparelse.
Fejlfinding
Hovedbilledet ændrer sig mellem sider eller enheder
Forudindlæsningshint er specifikke for hver side, og det "største" element kan være forskelligt i desktop- og mobillayouts. Skabelonlogik kan udsende den rigtige forudindlæsning for hver side, og hintets attributter media og imagesrcset håndterer responsive varianter.
Jeg har forudindlæst billedet, men fundet er der stadig
URL'en til forudindlæsningen skal præcist matche det, som siden i sidste ende gengiver – en variant i en anden størrelse eller en URL, der er omskrevet af et , tæller ikke. Tjek også, at hintet findes i selve sidens -head og ikke tilføjes senere af et script, da det modarbejder formålet.