Forhåndslastet LCP-bilde
Silktide kontrollerer om hovedbildet på siden din – det største elementet besøkende ser når siden lastes inn – kunne blitt vist tidligere hvis nettleseren hadde fått beskjed om å hente det tidligere. Sider oppleves som innlastet når det største innholdet vises, så dette ene bildet avgjør ofte hvor rask hele siden føles.
Tidspunktet bildet vises, måles som Largest Contentful Paint (LCP), en av Googles .
Hvorfor dette er viktig
Nettlesere laster ned filer omtrent i den rekkefølgen de oppdager dem, og hovedbildet oppdages ofte sent – skjult bak stilark og skript, referert til fra , eller satt inn av et skript. Resultatet er en side som bygger opp rammen raskt, men der det blir stående et tomrom der det viktigste innholdet burde være.
Fordi besøkende vurderer hastigheten ut fra når hovedinnholdet vises, og Google tar LCP med i beregningen av søkerangeringen, er det å be nettleseren prioritere denne ene filen blant de mest verdifulle hastighetsforbedringene som er tilgjengelige.
Slik løser du det
- Forhåndslast bildet slik at nettleseren henter det helt fra starten av innlastingen:
<!-- I <head>: hent hovedbildet umiddelbart -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
- Hvis bildet er et vanlig
<img>-element, kan du alternativt legge tilfetchpriority="high"direkte på elementet. - Ikke –
loading="lazy"på hovedbildet forsinker akkurat det som burde komme først. - Foretrekk et vanlig
<img>-element fremfor et CSS-bakgrunnsbilde for hovedvisualet, slik at nettleseren kan oppdage det tidlig på egen hånd.
Slik tester Silktide dette
- Last inn siden i en ekte nettleser ved å bruke enhetstypen, tilkoblingshastigheten og teststedet som er konfigurert for hastighetstestene dine.
- Finn det største innholdselementet som er synlig mens siden lastes inn. Hvis det er et bilde, kontroller når nettleseren oppdaget og lastet det ned.
- Hvis det ville gjort at bildet vises tidligere å hente det tidligere, rapporterer vi det med beregnet tidsbesparelse.
Feilsøking
Hovedbildet endres mellom sider eller enheter
Forhåndslastingsinstruksjoner gjelder per side, og det «største» elementet kan variere mellom oppsett for datamaskiner og mobil. Mal-logikk kan generere riktig forhåndslasting for hver side, og attributtene media og imagesrcset håndterer responsive varianter.
Jeg forhåndslastet bildet, men funnet vises fortsatt
URL-en for forhåndslastingen må være helt identisk med det siden til slutt gjengir – en annen størrelsesvariant eller en URL som er skrevet om av en , teller ikke. Kontroller også at instruksjonen ligger direkte i sidens -hode, og ikke legges til senere av et skript, siden det motvirker hensikten.