Afbeelding voor Grootste weergave met content (LCP) vooraf laden
“Afbeelding voor Grootste weergave met content (LCP) vooraf laden” is een melding die je kan krijgen in de Google page speed test. Dit kan betekenen dat de afbeelding die in de kop van de pagina te groot is. De beste oplossing om dit zo snel mogelijk te tonen is door deze afbeelding vooraf te laden.
Hier zullen we bespreken:
- Waarom afbeelding voor Grootste weergave met content (LCP) vooraf laden?
- Hoe afbeelding voor Grootste weergave met content (LCP) vooraf laden?
- Voordelen
Het vooraf laden van afbeeldingen en files heeft een groot voordeel om de LCP te optimaliseren.
Waarom afbeelding voor Grootste weergave met content (LCP) vooraf laden?
Als we kijken hoe een website wordt geladen dan zien we het volgende patroon. De server ontvangt de melding om een pagina te tonen en op de server wordt deze opgezet aan de hand van PHP en de database. Hierna wordt het door gestuurd naar de browser als HTML met afbeeldingen en CSS- en JS-bestanden.
Ten eerste wordt de <head> van de website bekeken waar bepaalt wordt welke files vooraf geladen moeten worden. Dit zijn voornamelijk CSS en JS bestanden maar kunnen ook web lettertypen zijn. Hierna wordt de werkelijke pagina geladen dat de opmaak van de website bepaalt. Hier wordt vooral gekeken naar wat direct op het scherm getoond moeten worden. En hier komt de Larget Content Paint (LCP) om de hoek kijken. Vooral op de homepage wordt vaak een grote afbeelding getoond. De bedoeling is om deze vooraf te laden.
Door de afbeelding vooraf te laden wordt dus eigenlijk eerder begonnen met het laden van de afbeelding. Op deze manier wordt dus niet gewacht tot het in de HTML voorkomt. Zo kan de afbeelding sneller getoond worden. Het gaat hier niet om seconden verschil maar om de LCP binnen 2,5 seconden te tonen is elk klein beetje tijdswinst belangrijk.
Hoe afbeelding voor Grootste weergave met content (LCP) vooraf laden?
Om afbeeldingen vooraf te laden gebruiken we dezelfde tag als gebruikt wordt voor het vooraf laden van files. We maken hier gebruik van de tag rel=”preload” en dit moet in de <head> van de website geplaatst worden. Dit kan dynamisch gedaan worden maar hier geven we een statisch voorbeeld zoals het uiteindelijk in <head> getoond kan worden.
Omdat we hier één of meerdere afbeeldingen vooraf willen laden is er extra aandacht nodig voor hoe dit uiteindelijk getoond moet worden.
// Standaard Preload afbeeldingen
<link rel="preload" as="image" href="/wp-content/uploads/speedy.png" />
// Preload afbeeldingen voor responsive
<link rel="preload" as="image" href="/wp-content/uploads/speedy.jpg" imagesrcset="/wp-content/uploads/speedy-400px.jpg 400w, /wp-content/uploads/speedy-800px.jpg 800w, /wp-content/uploads/speedy-1600px.jpg 1600w" imagesizes="100vw" />
Deze code moet geplaatst worden tussen de <head> en </head> tags en als het kan zo hoog mogelijk.
Hier in dit voorbeeld wordt gebruik gemaakt van het pad dat standaard is voor WordPress. Pas dit aan als het pad naar de afbeelding anders is. Voor externe afbeeldingen zal ook het domein en dus de volledige link naar de afbeelding gebruikt moeten worden.
In dit voorbeeld is ook te zien dat as=”image” gebruikt wordt. Dit is nodig om de browser te laten weten dat het om afbeeldingen gaat die vooraf geladen moeten worden.
Voor responsive website ontwikkeling kan tegenwoordig ook meerdere afbeelding gebruikt worden voor verschillende schermafmetingen. Deze moeten geplaatst worden met de “imagesrcset”. De hoofdafbeelding wordt nog steeds gebruikt met “href”. Dit is voor oudere browsers die dit nog niet ondersteunen.
Bij de responsive versie staat nu ook imagesizes=”100vw”. Dit is de afmeting ten opzichte van de schermbreedte (View Window) in procenten. In dit geval is dat 100%.
Vraag vrijblijvende een offerte aan.
Voordelen
Het gebruik van rel=”preload” kan heel erg handig zijn in vele vormen en niet alleen voor afbeeldingen. Het is namelijk zo dat als je zo vroeg mogelijk begint met laden men direct optimaal gebruik maakt van de bandbreedte. Hierdoor zal alles sneller geladen en getoond worden.
Voor andere mogelijkheden om deze vorm om files vooraf te downloaden kan men bekijken in:
- Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen
- Doorlinken van kritieke verzoeken voorkomen
- Laad belangrijke verzoeken vooraf
- Google webfonts lokaal laden
Dit bied niet de mogelijkheid om grotere en scherpere afbeeldingen te gebruiken. Probeer dit altijd te voorkomen. Men zal altijd moeten proberen om de afbeeldingen in overdrachtsgroten zo klein mogelijk te houden. De bedoeling hiervan is om sneller te laden en niet om meer te laden.
Het verschil is misschien heel weinig maar alle kleine beetjes helpen en het gebruik hiervan verhoogt de score voor de Google Core web vitals. En vergeet niet dat voor het laden van de LCP in 2,5 seconden alle kleine beetjes helpen.
Dit zijn tegenwoordig onderdelen die standaard gebruikt moeten worden voor website ontwikkeling of je nou Joomla, WordPress of een andere cms gebruikt. Het is vooral een best practice onderdeel voor Web Vitals. Door dergelijke zaken toe te passen wordt uiteindelijk ook de SEO van de website verbeterd. Als dat geen goede reden is om preload toe te passen?
Er zijn nog geen reacties. Wees de eerste..!!