Forhåndslast Largest Contentful Paint-bildet

Hva er forhåndslasting?

Forhåndslasting av en ressurs vil utløse nettleseren til å laste ned en ressurs tidlig, selv før nettleserens hovedrendering starter. Dette sikrer at en ressurs er tilgjengelig tidligere og er mindre sannsynlig å blokkere sidens rendering, noe som vil forbedre ytelsen i de fleste tilfeller.

<link rel="preload" 
as="image" 
href="image.jpg" 
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w">

Hvorfor bør jeg forhåndslaste largest contentful paint-bildet?

Bilder som er synlige og i viewporten vil ha høy prioritet og vil bli lastet ned relativt tidlig i hele sidelastingsprosessen. Nettlesere som Chrome vil gjøre sitt beste for å prioritere disse bildene for deg og vil ofte gjøre en god jobb. Likevel vil nettlesere gjøre et kvalifisert gjettverk på nedlastingsrekkefølgen og vil ofte prioritere andre ressurser som eksternt JavaScript eller andre synlige bilder over LCP-bildet.

På grunn av denne oppførselen vil ikke LCP-bildets nedlasting starte så tidlig som du kanskje ønsker. Forhåndslasting av Largest Contentful Paint-bildet vil overvinne dette problemet.

Hvordan påvirker forhåndslasting av Largest Contentful Paint-bildet sideytelsen?

Forhåndslasting av Largest Contentful Paint-bildet vil gjøre bildet tilgjengelig for rendering tidligere i renderingsprosessen. Dette fører vanligvis til en bedre LCP-score. I nesten alle tilfeller vil forhåndslasting av LCP-elementet gi deg bedre Lighthouse- og RUM-scorer.

Forhåndslasting av LCP-elementet kan være enda mer fordelaktig når LCP-bildet av en eller annen grunn ikke er det første bildet som vil bli lastet ned. Dette kan skje når:

• Det er flere bilder i den synlige viewporten
• LCP-bildet er et bakgrunnsbilde (bakgrunnsbilder blir vanligvis lastet ned senere enn forgrunnbilder)
• LCP-elementet er avhengig av JavaScript. For eksempel med et slider-skript eller hvis nettstedet ditt er bygget på et JavaScript-rammeverk som REACT.

Hvordan forhåndslaste Largest Contentful Paint-bildet

Forhåndslasting av LCP-bildet er relativt enkelt. Det er bare 3 trinn å ta:

1. Bestem LCP-elementet: Kjør en Lighthouse-audit og sjekk Largest Contentful Paint-elementet. Pass på at LCP-elementet faktisk er et bilde!
2. Sjekk for responsive bildeformater. Hvis du bruker responsive bilder må du legge til alle disse bildestørrelsene i srcset på preload-taggen. Ellers vil vi forhåndslaste feil bilde. Det vil bare bremse ned siden.
3. Legg til preload-taggen. Alt som gjenstår er å legge til preload-taggen. Syntaksen er enkel.

<link 
   <!-- indicate preload -->
   rel="preload" 
   <!-- as is required and indicates we are preloading an image -->
   as="image" 
   <!-- image src -->
   href="wolf.jpg" 
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w">

Hvordan forhåndslaste Largest Contentful Paint-bildet i Wordpress

Forhåndslasting av Largest Contentful Paint-bildet i Wordpress er slett ikke vanskelig. Vanligvis er Largest Contentful Paint-bildet det fremhevede bildet for et blogginnlegg eller en side. Med bare noen få linjer kode kan vi hente den fremhevede bilde-urlen og srcset og legge det til i hodet på siden.

Bare legg til denne koden rett etter title-elementet i header.php-filen til din nåværende mal.

<?php if((int)get_post_thumbnail_id() > 0){?>
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 <link rel="preload" 
       as="image" 
       href="<?php echo $imgurl;?>" 
       imagesrcset="<?php echo $srcset;?>">
<?php } ?>.