Wat je moet weten over laadsnelheid

Binnen 3 seconden moet een website geladen zijn, anders ben je 40% van je bezoekers kwijt. Omdat dit percentage zo hoog is besteden we hier in deze blog wat extra aandacht aan de laadsnelheid. Je leest hoe je de laadsnelheid kan testen, waar de testen op gebaseerd zijn, wat je kan optimaliseren zonder dat er een code aan te pas komt en wat HubSpot voor jou verbetert. 

Waarom een snelle website?

Met een snelle website verhoog je niet alleen het aantal website bezoekers. Het verbetert ook de gebruikerservaring. Zo zullen bezoekers positiever zijn en sneller terugkeren. Daarnaast is sinds 2010 laadsnelheid een ranking factor voor Google. Dit komt omdat Google de gebruikerservaring voorop stelt, maar ook omdat Google met een langzame website meer tijd nodig heeft om de website op te nemen in zoekresultaten.

Test de laadsnelheid van jouw website

Er zijn verschillende manieren om meer inzicht te krijgen in jouw laadsnelheid. Zo kan via je PageSpeed Insights de url van je website invoeren, of de Chrome extensie installeren van Google lighthouse. Het voordeel van Google lighthouse is dat je ook gelijk het resultaat van de toegankelijkheid van je website ziet. Het beste is om de testen te bewaren en na het optimaliseren terug te kijken op de behaalde resultaten.

Wat zijn de Core Web Vitals?

In de testresultaten kom je LCP (Largest Contentful Paint), FID (First Input Delay) en CLS (Cumulatieve Layout Shift) tegen. Dit worden ook wel de Core Web Vitals genoemd en is een initiatief van google om de kwaliteit van websites te verbeteren. Door de Core Web Vitals kan je goed inzien waar je website verbetering nodig heeft.

Wat je zelf kan verbeteren

De test resultaten kunnen technisch over komen, maar een groot gedeelte kan iedereen verbeteren.

Afbeeldingen hebben een grote invloed op de laadsnelheid, om dit te verbeteren kan je lazy loading instellen en de resolutie van je afbeeldingen verlagen. In deze blog lees je stap voor stap hoe je dat doet: How-to: Optimaliseer je afbeeldingen in HubSpot. Voeg waar het kan vaste hoogte en breedte toe aan een afbeelding of video. Dit zorgt ervoor dat de browser de juiste hoeveelheid ruimte in het document kan toewijzen terwijl de afbeelding wordt geladen. Kijk tot slot naar het formaat van de afbeeldingen, hieronder een opsomming welk type waarvoor bedoel is:

• PNG: afbeeldingen in het PNG formaat zijn makkelijk te comprimeren, ze worden versimpeld en missen alleen wat kleur. PNG afbeeldingen kunnen zonder achtergrond opgeslagen worden en hebben een duidelijk kleur contrast en zware lijnen.
• JPEG: met een JPEG afbeelding kun je veel details en kleuren zien. Als je een JPEG bestand comprimeert haalt het overbodige pixels weg. Dit valt gelukkig niet snel op, dus voor een foto met veel details kan je goed JPEG gebruiken.
• SVG: een SVG bestand bestaat niet uit pixels en kan oneindig geschaald worden, en heeft dus geen kwaliteitsverlies. Een SVG wordt vaak gebruikt voor grafische elementen. 
• WebP: dit is een bestandstype ontworpen door Google. het is vooral bedoelt om bestandsgroottes te comprimeren. HubSpot maakt op een slimme manier gebruik hier van, lees hier later meer over.

Video's kunnen een killer zijn voor je laadsnelheid, maar een goede toevoeging voor je website. Gelukkig zijn er wat trucjes waardoor je toch een video op je website kan plaatsen.

Gebruik geen autoplay op je video's, de browser moet de video dan gelijk inladen. Zorg ook voor een niet te grote bestandsgrootte. Je kunt er ook voor kiezen om je video te plaatsen op Youtube of Vimeo en vervolgens te embedden in je website.  

Tip! Gebruik altijd een afbeelding om op terug te vallen, zo valt het niet op als je video niet inlaadt.

Wat HubSpot voor je verbetert

Er blijven best wat punten over om te verbeteren, gelukkig pakt HubSpot uit zichzelf al aardig wat op.

Minification: dit is het proces van het verwijderen van onnodige gegevens zonder dat dit invloed heeft op de website. Bijvoorbeeld codeopmerkingen en het verwijderen van ongebruikte code.

Compression: afbeeldingen worden opnieuw opgeslagen met 72 dpi, ongeacht hun oorspronkelijke resolutie. Ze passen afbeeldingen aan naar het WebP-formaat voor browsers die dit ondersteunen.

Caching: HubSpot slaat automatisch pagina's en bestanden op in de cache op zowel server- als browserniveau. Om de snelste levering van alle pagina-items aan je website bezoekers te garanderen. 

Wil je hulp bij het optimaliseren van je laadsnelheid? Mail ons voor meer informatie, we helpen je graag verder.