Geschreven door Jordy op

De snelheid van je website of webshop wordt steeds belangrijker. Naast dat het natuurlijk zeer prettig is voor de bezoeker heeft het een ook effect op je online marketing kanalen.

  • De relevantiescore van Google AdWords gaat omhoog waardoor je lagere kosten per klik krijgt.
  • Voor de organische vindbaarheid van je website is pagina snelheid een officiële rankingfactor van Google.
  • Veel onderzoeken laten zien dat er een stijging in het conversiepercentage is wanneer je de laadtijd versnelt.

Hoe bepaal je of je website snel genoeg is? Je eigen ervaring is daarvoor niet altijd representatief. Daarom heeft Google al enige tijd een hulpmiddel beschikbaar genaamd Pagespeed insights. Naast dat deze tool een score geeft voor de snelheid van je website op zowel desktop als mobiel, geeft het ook meteen een aantal verbeterpunten aan. Deze verbeterpunten zijn in de meeste gevallen behoorlijk technisch en voor de leek niet altijd even duidelijk. Bij deze daarom een korte toelichting van de meest voorkomende verbeterpunten en wat ze betekenen.

Pagespeed insights: Eliminate render-blocking JavaScript and CSS in above-the-fold content

Websites zijn de afgelopen jaren steeds complexer geworden waardoor de gemiddelde grootte van een website inmiddels de 2MB is gepasseerd. Een groot onderdeel hiervan zijn javascript en css bestanden. Het grote nadeel van dit type bestanden is dat de browser het downloaden van de overige bronnen blokkeert tot dat deze bestanden volledig zijn gedownload. Dit heeft dus grote invloed op de laadsnelheid van je website.

Pagespeed insights: Leverage browser caching

Browser maken gebruik van caching om de laadsnelheid van websites te verbeteren. Dit doet een browser door statische bestanden, zoals afbeeldingen of javascript bestanden, lokaal op de computer van de gebruiker op te slaan. Bij een tweede bezoek van dezelfde website hoeft de browser daardoor niet alle bestanden opnieuw op te vragen bij de server, maar kunnen de lokaal opgeslagen bestanden gebruikt worden. De bestanden hoeven daardoor niet opnieuw gedownload te worden waardoor de website een stuk sneller laadt.

Het is daarbij wel van belang dat voor ieder type bestand een geldigheidsduur wordt meegegeven. Het kan natuurlijk dat deze bestanden tussen het eerste en tweede bezoek zijn veranderd en je wil je bezoeker geen verouderde content tonen. Met een goede geldigheidsduur voorkom je dit probleem en vertel je de browser hoelang bestanden die lokaal worden opgeslagen geldig zijn. Is de geldigheidsduur verstreken dan wordt het bestand opnieuw gedownload.

Pagespeed insights: Enable compression

Compressie is een techniek om bestanden in te pakken om de bestandsgrootte te verkleinen. De server pakt ieder opgevraagd bestandje in en verstuurt het bestandje. De browser pakt na het downloaden weer uit en laadt vervolgens het bestandje. Het proces is hierdoor wel uitgebreider, maar doordat de bestandsgrootte dusdanig verkleind wordt heeft dit een positief effect op de laadtijd van je website.

Pagespeed insights: Optimize images

Afbeeldingen nemen in de meeste gevallen de grootste hoeveelheid data van een website in beslag. Het is daarom belangrijk dat je de afbeelding zo goed mogelijk optimaliseert om de bestandsgrootte zo klein mogelijk te houden. Een hulpmiddel om je afbeelding te optimaliseren is bijvoorbeeld tinypng.com, maar alleen daarmee ben je er nog niet. Het is ook van belang om het juiste afbeeldingsformaat en -type te gebruiken. Het is niet nuttig om een afbeelding van 2000 bij 2000 pixels te gebruiken als die wordt weergeven op de website als 500×500 pixels. Verklein de afbeelding eerst naar het gewenste formaat voordat je hem gebruikt op je website.

Ook het bestandtype is belangrijk. De twee meest gebruikte bestandstypes voor afbeeldingen op het web zijn .png en .jpg, maar voor het beste resultaat gebruik je ieder type voor een ander soort afbeelding. Jpg werkt bijvoorbeeld heel goed voor foto’s, afbeeldingen met veel kleurverloop erin. Terwijl png juist goed werkt met strakke lijnen zoals je bijvoorbeeld ziet in illustraties en iconen. Hou hier rekening mee bij het opslaan van afbeeldingen.

Pagespeed insights: Minify CSS/HTML/Javascript

Zoals je een afbeelding wilt optimaliseren, wil je dat ook doen met andere bronnen. Dit kunnen we doen met een techniek genaamd minification. Met deze techniek wordt onnodige en overbodige data verwijderd, denk bijvoorbeeld aan spaties en witregels. Dit levert kleinere bestanden op en dus minder data voor de gebruiker om te downloaden.

Pagespeed insights: Reduce server response time

De reactie tijd van de server is afhankelijk van vele factoren en in dit geval gaat het om de tijd die de server nodig heeft om een html pagina te creëren die een browser kan lezen. Dit proces kan vertraagd worden door onnodig veel data uit de database op te vragen of door veel redirects op de pagina. Een proces dat je webbouwer zoveel mogelijk moet optimaliseren. Daarnaast is het van belang dat de server waarop je website draait snel genoeg is en niet aan de andere kant van de wereld staat als 99% van je bezoekers alleen uit Nederland komen.

Een aantal van deze punten zijn tamelijk simpel op te lossen door je webbouwer. In sommige gevallen is een simpele serverinstelling al genoeg, zoals bij compressie en leverage browser caching. Andere punten kunnen tijdsintensiever zijn om goed op te lossen, omdat daarbij meerdere factoren een rol spelen. Een score van 100 voor zowel desktop en mobiel is niet voor iedere website weggelegd, maar met een kleine investering kan je al een heel eind komen.

| Contentmarketing | Conversie Optimalisatie | Display Advertising | Google AdWords | Google Analytics | Google overig | Klantcases | Nieuws | Social Media | Webdesign | Webshops | WordPress | Zo Zeo | Zoekmachine optimalisatie |

Geef een reactie