Snelheid optimalisatie Van Manen Haarden & Kachels

Inventarisatie

Google beoordeeld een website op 6 hoofdpunten. Deze 6 punten worden onderverdeeld over meerdere eisen en aanbevelingen. Aan de hand van deze punten heeft het Magento gercertificeerde team van eDifference geinventariseerd welke verbeteringen uitgevoerd gaan worden.

First Contentful Paint

Dit is het eerste blok dat volledig is geladen. Hoe sneller hoe beter.

Largest Contentful Paint

Het grootste content blok (afbeelding of tekst) dat geladen wordt boven de vouw.

Total Blocking Time

Optelling van alle assets die langer duren dan 50ms.

Speed Index

Dit laat zien hoe snel de content van een pagina zichtbaar is.

Time To Interactive

De hoeveelheid tijd dat nodig is voordat de pagina volledig interactief is.

Cumulative Layout Shift

Dit meet de beweging van elementen nadat deze is geladen.

Scripts optimaliseren

Magento maakt standaard gebruik van meer dan 160 verschillende script bestanden. Dit zijn allemaal hulp programma’s om een bepaald doel te bereiken. Bijvoorbeeld een animatie of het scrollen naar een bepaald punt. Door terug te gaan naar de oorspronkelijke script taal (javascript) en een kleine library hebben we dit teruggebracht naar 2 script bestanden.

Gebruik van styles

Door een kleine styles library te gebruiken kunnen we met 1 style bestand alle nodige styling toevoegen om het thema weer tegeven. Mobiel, tablet, desktop en groter worden hiermee afgevangen en correct getoond. Dit voorkomt een groot aantal style bestanden die door Magento en verschillende modules gebruikt wordt.

Afbeeldingen optimaliseren

Kleine jpg en png afbeeldingen zijn tegenwoordig niet meer voldoende. Google vereist dat afbeeldingen als *.webP worden getoond. WebP is een afbeeldingsextensie met een betere compressie. Wij hebben een module ontwikkeld waarmee dit automatisch omgezet wordt. Elke afbeelding wordt daarmee geoptimaliseerd.

Lazy loading

Afbeeldingen worden gezien als ‘blocking resourse’. Dat betekend dat het laden van de pagina stopt totdat de afbeelding geladen is. Dit belemmert het laden enorm. Wij hebben een module ontwikkeld waarmee afbeeldingen die niet zichtbaar zijn (onder de vouw) nog niet geladen worden. Deze afbeeldingen worden pas getoond als de bezoeker hiernaar toe scrollt. Dit zijn zowel afbeeldingen als achtergrondafbeeldingen.

Caching

Wanneer alle optimalisaties zijn doorgevoerd en de scores zijn goed, wordt caching geactiveerd. Dit zorgt ervoor dat pagina’s nog sneller worden geladen en de hostingserver het minder druk heeft.