Vermijd enorme netwerkpayloads

Vermijd enorme netwerkpayloads als je echt een snelle website wilt hebben. Dit onderdeel van de Google page speed test is heel erg belangrijk voor de snelheid van de website. Dit is ook waarom dit altijd wordt omschreven in KiB en heeft direct te maken met de internetverbinding van de bezoeker en de snelheid van de server waar de website op staat.

Volgens Google mag het gemiddeld tussen de 1700 en 1900KiB liggen. Ze geven de melding “Vermijd enorme netwerkpayloads” als het meer is dan 5000KiB. Uiteraard is het belangrijk dit zo laag mogelijk te houden. Hier moet dus een balans gemaakt worden tussen het uiterlijk en functionaliteit van de website en de gewenste snelheid. Om dit te kunnen beoordelen zullen we dit eerst eens nader bekijken.

Vermijd enorme netwerkpayloads

Dit is eigenlijk te vergelijken met “Houd het aantal verzoeken laag en de overdrachtsgrootte klein”” maar gaat zelfs nog iets verder.

De netwerkpayloads is eigenlijk alles dat geladen moet worden in KiB, de overdrachtsgrootte, bij elkaar opgeteld. Als je bijvoorbeeld 5 afbeeldingen hebt die iedere 500KiB zijn dan heb je alleen hiervoor al een netwerkpayload van 2500KiB. En nu hebben we het alleen nog over enkele afbeelding maar ook alle CSS en JavaScript files en lettertypen worden hier nog eens bij opgeteld.

Nu hebben we het alleen over de de files die geladen moeten worden. Het kan ook zijn dat files van andere servers geladen moeten worden. Als files van de website geladen worden dan is daar maar één verbinding voor nodig. Als er files van andere servers geladen moeten worden dan moet iedere keer met elke server een verbinding gemaakt worden. Voor het maken van een verbinding is ook nog eens extra tijd nodig. En dan hebben we het nog niet over de snelheid van die andere servers, deze kunnen sneller maar ook langzamer zijn.

Het gaat er dus om dit zo veel mogelijk te voorkomen. Minder laden en minder verbindingen maken met andere servers.

Hoe enorme netwerkpayloads vermijden?

Het klinkt makkelijker dan het is maar eigenlijk moet geprobeerd worden zo veel mogelijk te verwijderen of wel zo min mogelijk te laden. Alles dat je niet nodig hebt, moet niet geladen worden. Dit is het belangrijkste punt.

Een grote fout die veel ontwikkelaars maken is dat altijd alles op alle pagina’s geladen worden. Als er alleen op de homepage een slider wordt getoond, waarom zou de CSS en JS files hiervoor dan ook geladen moeten worden op andere pagina’s.
Andere bekend fout is dat er bijvoorbeeld in WordPress altijd veel te veel plugins worden geïnstalleerd. Elke plugins gebruikt zijn eigen CSS en JS file dus dat is een kwestie van optellen. Probeer dit dan ook altijd zo laag mogelijk te houden. Verwijder wat je niet nodig hebt.

Hier een lijst met mogelijkheden om dit te verbeteren:

• Beperk aantal lettertypen
• Laad belangrijke verzoeken vooraf
• Doorlinken van kritieke verzoeken voorkomen
• Plaats minder afbeeldingen
• Geef afbeeldingen het juiste formaat
• Lever afbeeldingen in moderne indelingen
• Gebruik lazy load voor afbeeldingen die niet direct getoond worden
• Codeer afbeeldingen op een efficiënte manier, afbeeldingen comprimeren
• JavaScript file samenvoegen
• Beperk niet-gebruikt JavaScript
• Verklein JavaScript
• CSS files samenvoegen
• Beperk niet-gebruikte CSS
• Verklein de CSS

Dit is een lange lijst maar mijn advies is om te beginnen met de afbeeldingen. Daar is meestal het meest aan te winnen voor page speed en Web Vitals. En probeer zo veel mogelijk samen te voegen en te verkleinen. En probeer alleen te laten wat echt nodig is. Gebruik de links voor meer informatie over de verschillende onderdelen.

Sliders

Vaak zijn sliders een grote boosdoener voor page speed. Dit komt omdat er altijd meerdere zaken nodig zijn en ze hebben bijna altijd afbeeldingen. Denk maar aan een image, review of product slider. Deze hebben bijna altijd een afbeelding en vaak ook tekst. Hierboven heb je kunnen lezen dat je het meest kan winnen op afbeeldingen.

Dit is niet het enige probleem. Men wil ook altijd dat de slider infinite is. Dat je door kan scrollen en het steeds automatisch opnieuw begint. Dit is een extra netwerkpayload want hiervoor moeten mee slide aangemaakt worden dan werkelijk getoond worden. Er worden namelijk altijd één of meerde extra voor en na de slider geplaatst.

Stel dat we een slider van 5 reviews hebben. Elke review heeft een afbeelding en tekst. Deze moeten eerst worden opgehaald uit de database. Ook dit is netwerkpayload. Als we dan de slider bekijken zien we dat er minimaal 7 slides staan. Als er 3 tegelijk getoond worden dan kan het dus zelfs 9 zijn omdat er dan 2 voor en 2 achter worden geplaatst.

Beste oplossing hiervoor is de slider verwijderen en statische reviews te tonen en met random is dit zo slecht nog niet. De winst hier is enorm en de titel zegt het al dat enorme payloads voorkomen moeten worden. Bedenk dat hierdoor ook geen extra JS en CSS files geladen hoeven te worden.

Andere oplossing is door het aantal slides zo laag mogelijk te houden. Gebruik er een paar en verwijs bezoekers naar een pagina met alle reviews bijvoorbeeld.

Sliders vinden veel mensen mooi maar wat heb je aan een mooie website die niet gevonden wordt. Of als het gevonden wordt dat men afhaakt omdat het te langzaam laad. Dan is al het werk voor niets geweest en heeft het mooie geen enkele nut.