Ervaring met de laadsnelheid van je website

Tegenwoordig hoor je steeds meer over de term First Contentful Paint (FCP). Wat is dat nou? En waarom is dat belangrijk? Het heeft te maken met de laadsnelheid van jouw website en de ervaring die dat geeft bij bezoekers. Hoe bezoekers jouw website ervaren ligt aan heel veel factoren. Een van die factoren is de laadsnelheid van je website als die geopend wordt. De FCP, samen met de LCP (Largest Contentful Paint) en de Speed Index is een handige manier om de snelheid van een webpagina te meten. Hoe lager de FCP is hoe sneller een gebruiker inhoud op het scherm ziet.

De FCP geeft de tijd aan in milliseconden tussen het het aanvragen van de pagina en wanneer de eerste inhoudsvolle element op de pagina wordt getoond. Oftewel, de tijd die jouw website nodig heeft om de eerste teksten en beelden te laden. Waarom vertel ik dit nu? Omdat Google hier tegenwoordig naar kijkt om jouw website te waarderen, een cijfer te geven. Maar ook omdat gebruikers steeds meer eisen stellen aan een website die zij bezoeken. Als iemand te lang moet wachten tot de site opent dan zijn ze al vertrokken voordat zij überhaupt gekeken hebben en dat wil jij niet.

Waarom vinden zoekmachines zoals Google First Contentful Paint belangrijk?

Hoe Google de zoeksnelheid precies meet is een groot bewaard geheim, maar tegenwoordig komt dat dicht in de buurt van First Contentful Paint. Wat is dat nou? En waarom is dat belangrijk?. Google vindt het een belangrijk onderdeel van de beleving van de website en daarmee de website wel of minder interessant om in ‘zijn etalage’ te zetten. Want waarom zou Google een website aanbieden aan een bezoeker die ze toch niet gaan bekijken…. Je kan zelf ook meten hoe het met jouw website gesteld is door middel van PageSpeed Insights. Deze app meet hoe jouw website scoort op diverse punten, waaronder op FCP, kwaliteit visuals, speed, server responstijd en nog veel meer. Een score tussen de 0-49 vergt veel verbetering, tussen de 50-89 enige verbetering en boven de 90 is je website goed. Je kan zowel de mobiele score meten als voor de desktop.

Is het belangrijk voor mij?

Zoals al eerder beschreven is het belangrijk voor bezoekers dat een website snel laad voor de beleving. We hebben allemaal weinig tijden en willen direct de informatie zien die we zoeken. Maar er zit nog wel verschil in ons belevingsgevoel. Wat is namelijk snel laden? Zodra er actie is wordt het door sommige mensen ervaren als ‘snel laden’ en blijft men op de website om verder te gaan. Voor anderen geldt ‘snel laden’ als de hele webpagina geladen is. Belangrijkste is dus dat het bovenste deel van de webpagina meteen zichtbaar is, zodat het gevoel van ‘er gebeurt iets’ in ieder geval wordt geactiveerd. Dan met het naar beneden scrollen ontvouwd de rest van de site. Hierin kan je bijvoorbeeld gebruik maken van lazy load. Waarbij niet meteen alle visuals geladen worden maar er wel al ruimte is geselecteerd. Dan laadt de webpagina sneller en tegen de tijd dat je naar beneden gescrold bent staan ook die visuals en tekstblokken voor je klaar.

Hoe verbeter je de FCP?

  • Het gebruik van modernere afbeeldingsindelingen zoals WebP, JPEG 2000 en JPEG XR biedt betere compressie dan de oude PNG en JPEG.
    Er zijn diverse plug-ins voor Photoshop om de bovenstaande extensies toe te voegen aan Photoshop.
  • Niet kritieke JS/css stijlen uitstellen
  • Beperk niet-gebruikt Javascript

Soms is het best lastig om dit zelf aan te passen. Er zijn bijvoorbeeld in WordPress verschillende plug-ins die de bovenstaande punten kunnen helpen verbeteren. Zoals Optimole, deze plug-in verandert de afbeeldingsindeling voor je en je kan er bijvoorbeeld lazy load mee instellen en RapidLoad zorgt ervoor dat de laadsnelheid verbetert. Optimole is in de basis gratis, RapidLoad is dat niet, daarvoor betaal je een klein maandelijks bedrag. Maar het kan wel een voordeel zijn om de plug-ins te gebruiken. Toch moet je altijd zelf kijken wat werkt bij jouw website want soms neem je het iets langzamer laden van de site toch op de koop toe omdat je bijvoorbeeld veel visuals nodig hebt voor je business en die wil je direct zichtbaar hebben. Dan is lazy load niet echt prettig, dat ziet er dan niet mooi uit.

Plugins voor Photoshop

Als je Photoshop gebruikt, zijn er enkele plug-ins die export in next-gen-indelingen mogelijk maken.

  • Voor WebP: http://telegraphics.com.au/sw/product/WebPFormat#webpformat
  • JPEG 2000 is al ingebouwd in het Photoshop-venster “Opslaan als…”. Selecteer het in het vervolgkeuzemenu “Formaat” of verander het einde van uw bestandsnaam in .jp2
  • Voor JPEG XR moet je de bijbehorende plug-in downloaden van de website van Microsoft. Er is een versie voor Mac en een voor Windows.

Conversie Tools

ImageMagick is een CLI tool dat alle drie de formats ondersteund (en meer).

Het vergt wat werk om de next-gen visuals aan te passen in je website, daarover een andere keer. Maar het geeft je wel een ‘competative edge’ op jouw concurrenten.

Wil jij hier meer over weten?

Je kan ons direct ☏ bellen of een ✉︎ mail sturen! Appen kan natuurlijk ook. Wel zo gemakkelijk. Of je kan contact opnemen via deze website.