Benieuwd naar de successen die we behaald hebben met onze klanten? Laat je inspireren.
Pagespeed bedraagt de tijd die een webpagina nodig heeft om te laden. De laadsnelheid van een pagina wordt bepaald door verschillende factoren, waaronder de server van een site, paginaopbouw en -bestandsgrootte, afbeeldingscompressie en dergelijke. Er zijn diverse manieren om pagespeed te meten. Wat deze manieren zijn? Wij leggen dit uit in deze blog.
Een eerste vraag die je jezelf kan stellen is: hoe meet je de pagespeed van jouw website? Dit zijn de drie meest vorkomende manieren:
Er zijn dus diverse manieren om pagespeed te meten. Het belangrijkste is echter om te focussen op het verbeteren van de pagespeed voor de complete website.
Sinds april 2010 is pagespeed al een belangrijke rankingfactor voor desktop.
2018 was het mobile-first jaar. In maart kondigde Google aan dat zij klaar waren om de switchen naar een mobile first indexing, waarbij de mobiele versie van de content op een website de kern vormt voor indexering en ranking. Vanaf juli 2018 heeft Google hier nog meer waarde aangegeven door het uitrollen van de Speed Update voor mobiele zoekopdrachten.
Een trage pagespeed heeft dus een negatieve invloed op rankings in Google. Naast dat Google minder pagina’s van je website kan doorzoeken met het beschikbare crawl budget, is het ook zeer nadelig vanuit user experience (gebruikservaring). Zo hebben pagina’s met een langere laadtijd vaak hogere bounce rates en een lagere gemiddelde tijd op de pagina. Dit heeft vervolgens ook weer een negatieve impact op de conversies.
Ook op de grootste SEO-conferentie in Europa BrightonSEO, onlangs in april 2019, werd weer de nodige aandacht geschonken aan pagespeed. Zo gaf Rachel Costello (SEO-expert bij DeepCrawl) een aantal interessante inzichten over de toekomst van site speed optimalisatie. Het belangrijkste hierbij was dat uitgegaan wordt hoe een gebruiker de snelheid ervaart en dat er een sterke focus moet zijn op de trage gebruiker. Wat bijvoorbeeld binnen 4 seconden laadt op een high-end iPhone 8 met WiFi, kan wel tot op 36 seconden duren op een low-end mobiel met 3G.
Een website laden is geen simpel gegeven. Het is een eindresultaat van een reeks gebeurtenissen die plaatsvinden.
Wanneer een pagina wordt geopend door het aanklikken van een link, het toevoegen van een URL in de browser of door het opnieuw laden van de pagina, worden een reeks van acties geactiveerd die plaatsvinden op de achtergrond van de website. Indien het een snelle website betreft wordt dit waarschijnlijk niet opgemerkt, maar het betreffen wel 20 acties die ervoor zorgen dat de pagina geladen wordt. Elke individuele actie draagt bij aan de uiteindelijke laadtijd van de pagina.
Bron: https://www.w3.org/TR/navigation-timing/#performancetiming
De verschillende acties kunnen onderverdeeld worden in vier soorten van gebeurtenissen die plaatsvinden:
De tijd die nodig is om van gebeurtenis 1 (request) naar gebeurtenis 4 (render) te gaan, betreft de laadtijd. Alle online tools voor pagespeed gebruiken deze gebeurtenissen in de laadtijdberekeningen.
Door het gebruik van tools om pagespeed te meten zijn knelpunten te bepalen om laadsnelheid structureel te verbeteren. Of het nu draait om het verkleinen van de grootte van afbeeldingen, het combineren van CSS-bestanden of het toepassen van minification, de tools maken het proces van het identificeren van problemen eenvoudiger. Er zijn behoorlijk wat tools beschikbaar om de pagespeed van een website te meten:
Elk van bovenstaande tools geeft een diepgaande analyse van de websiteprestaties. Ze bieden een laadtijd in seconden en diverse aanbevelingen om prestatieproblemen op te lossen. Meer achtergrondinformatie over het gebruik van bijvoorbeeld Pingdom of PageSpeed Insights? Bekijk dan onderstaande twee informatieve links:
Gezien een groot aantal factoren invloed heeft op de snelheid van je pagina duiken we in dit onderdeel dieper in op de materie, en brengen we een aantal punten in kaart waar je op moet letten wanneer je aan de slag gaat met het verbeteren van de pagespeed.
In 2015 heeft IETF een nieuwe versie uitgebracht voor het standaard HTTP protocol. HTTP/2 benaderd een aantal punten op een slimmere manier dan HTTP/1.1. Wij gaan in dit geval in op de effecten op snelheid.
Eén van de belangrijke voordelen van HTTP/2 is request multiplexing, wat inhoudt dat er meerdere data requests worden gebundeld en verstuurd over 1 TCP-connectie. Zwaardere websites hebben vaak te maken met een groot aantal requests die naar de server worden gemaakt om een pagina in te laden. Het nadeel hiervan is dat servers vaak een limiet meegeven aan het aantal requests dat er tegelijkertijd naar een server gemaakt mogen worden. Dit houdt kortgezegd in dat je dus een deel van de pagina inlaadt, voordat je het volgende deel van de site kan inladen. Dankzij HTTP/2 kun je dus meerdere bestanden tegelijk inladen, dat ziet er zo uit:
Andere voordelen van HTTP/2 zijn:
Bron: https://medium.com/@factoryhr/http-2-the-difference-between-http-1-1-benefits-and-how-to-use-it-38094fa0e95b
Afbeeldingen blijven één van de zwaarste bestanden die ingeladen worden op een webpagina. Tegenwoordig zijn er veel mogelijkheden om afbeeldingen te comprimeren en/of aan te bieden in nieuwe bestandsformaten. Daar kun je de volgende dingen aan doen.
Het lossless comprimeren van afbeeldingen houdt in dat je de bestandsgrootte van afbeeldingen verkleint zonder dat je inlevert in kwaliteit. Hier zijn meerdere tools voor beschikbaar als:
Tegenwoordig zijn er betere alternatieven beschikbaar voor afbeeldingen dan de standaard JPEG en PNG-bestanden. Een mooi voorbeeld hiervan is WebP, wat gemiddeld 26% kleiner is dan PNG en 25% tot 36% kleiner is dan JPEG. WebP wordt inmiddels ondersteund door 70% van alle browsers, dus houdt er rekening mee dat niet iedereen de afbeelding direct kan inladen. Een gepaste oplossing hiervoor is een fallback optie inbouwen voor niet ondersteunde browsers. In dit geval wordt er een alternatieve variant (JPEG of PNG) ingeladen.
Base64 encoding houdt in dat je afbeeldingen converteert naar binaire code, waardoor je dus geen extra request naar de server moet maken om een afbeelding in te laden. Dit wordt voornamelijk geadviseerd om alleen voor bijvoorbeeld headerafbeeldingen te implementeren, aangezien de code zelf erg lang is en je snel de pagina onnodig groot maakt. Ook wordt de afbeelding niet geïndexeerd in Google afbeeldingen.
Progressive JPEG betekent dat een afbeelding niet van boven naar beneden wordt ingeladen, maar van onscherp naar scherp. Dit wordt niet door alle browsers ondersteund.
Standaard JPEG:
Progressive JPEG:
Bron: Chris simmance UNDER2
Lazy loading houdt in dat je afbeeldingen onder de vouw (dus afbeeldingen die je niet meteen ziet als je een pagina inlaadt) op een later moment inlaadt. Hiermee geef je voorrang aan de belangrijkste bestanden en worden onnodige afbeeldingen niet te vroeg ingeladen.
Bij veel websites zie je dat er vaak één afbeelding wordt ingeladen, en het formaat vervolgens wordt aangepast aan het apparaat. Het nadeel hiervan is dat je te allen tijde dezelfde afbeeldingen inlaadt. Door gebruik te maken van het zogeheten srcset attribuut kun je voor de meest gebruikte beeldschermformaten de specifieke afbeelding altijd in de juiste afmetingen inladen. Dit worden ook wel responsive images genoemd.
Gebruikmaken van een CDN is voornamelijk interessant voor websites die op internationaal niveau actief zijn. Dit houdt in dat je een deel van je bestanden zoals afbeeldingen op servers in het buitenland zet, om ervoor te zorgen dat gebruikers in dat land sneller jouw website kunnen inladen. Dat werkt op deze manier:
JavaScript is een andere bron wat vaak een grote invloed heeft op de pagespeed van je website. Tegenwoordig wordt JavaScript vaak ingezet gezien de vele mogelijkheden en gebruiksdoeleinden. De hoeveelheid JavaScript heeft onder ander invloed op je:
Desalniettemin is JavaScript erg belangrijk voor je website en de vele functionaliteiten. Vaak zijn je JavaScript bestanden echter te groot, en vragen ze onnodig veel inspanning van je pc of netwerk.
Wanneer mogelijk is het te adviseren om de JavaScript die je gebruikt te comprimeren. Dit houdt in dat je het bestand zo klein mogelijk maakt. Daarnaast is het te adviseren om waar mogelijk je scripts te combineren (belangrijk om dit goed door te testen), dit zorgt er namelijk voor dat de gebruiker minder requests naar de server hoeft te doen waardoor de pagina sneller laadt.
Niet elk script hoeft of elke pagina ingeladen te worden, dus probeer dan ook te vermijden dat je JavaScript op elke pagina wordt ingeladen.
Er zijn vaak bepaalde stukjes script aanwezig op je site die niet direct nodig zijn voor de gebruiker. Asynchroon inladen van JavaScript houdt in dat je niet-essentiële scripts op een later moment inlaadt, waardoor het device van de gebruiker eerst de belangrijkste bestanden kan inladen.
Statische resources als afbeeldingen, HTML, CSS en JavaScript zijn de kern van elke website. Ze zorgen ervoor dat de pagina’s bruikbaar, effectief en aantrekkelijk zijn. Wanneer er geen gebruik wordt gemaakt van browser caching, dan hebben ze snel een nadelig effect op de prestaties, dus pagespeed. Door gebruik te maken van caching wordt door de browser bij een websitebezoek downloads zoals HTML, CSS, JavaScript en afbeeldingen opgeslagen in een lokale cache. Dit vermindert de vertragingen aanzienlijk die optreden bij het processen en renderen van pagina’s en draagt dus bij aan het sneller laden van de website. Voor bijvoorbeeld WordPress zijn caching plugins als WP Super Cache, W3 Total Cache en WP Rocket beschikbaar.
Bron: https://wp-rocket.me/blog/wordpress-page-caching-explained-in-plain-english/
De toepassing van minification draagt bij aan het verwijderen van onnodige delen uit de HTML, CSS, JavaScript. Dit betreffen voornamelijk witruimtes, onnodige nieuwe regels, opmerkingen en dergelijke. Daarnaast maakt het de bestanden meer compacter en draagt het hierdoor bij aan het verminderen van de bestandsgrootte. Het wordt aanbevolen om een automatisch minify systeem te gebruiken dat bestanden minified wanneer ze zijn aangepast. Op deze manier kunnen developers gebruik blijven maken van georganiseerde bestanden tijdens het developen en krijgen zoekmachines de geoptimaliseerde variant aangeboden. Er zijn diverse online tools beschikbaar om code te minifyen. Twee voorbeelden hiervan zijn:
GZIP-compressie is een gratis en open source-methode om websitebestanden te verkleinen. Hierdoor wordt opslagruimte bespaard. GZIP wordt meestal ingezet om webpagina’s aan serverzijde te comprimeren, waardoor kleinere bestanden naar de browser worden gestuurd. De GZIP-compressie kan ingezet worden om HTML-, CSS- en JavaScript-bestanden te verkleinen. Volgens Google worden met GZIP compressiepercentages van 70-90% behaald. Onderstaande tabel geeft weer hoeveel besparing GZIP-compressie oplevert voor enkele van de populairste JavaScript-bibliotheken en CSS-frameworks. Deze besparingen lopen uiteen van 60% tot 88%.
GZIP werkt voor elke website, van WordPress tot Magento of een eigen maatwerk CMS. De eenvoudigste manier om te controleren of GZIP is ingeschakeld, is gebruik te maken van een van de online tools. Wanneer blijkt dat GZIP is uitgeschakeld, vraag dan je webbouwer/host je te helpen bij het inschakelen. Vaak kost deze implementatie slechts enkele minuten middels een implementatie via een plugin, het .htaccess-bestand op een Apache server of nginx.conf op een NGINX server.
Jaar na jaar blijft Google het belang aangeven van pagespeed en ook, zoals eerder aangegeven, dragen recente studies hieraan bij. Uiteraard is pagespeed altijd al belangrijk geweest, maar met de mobile first-indexing is het nog veel belangrijker geworden om een optimale mobiele user experience te leveren.
“Speed is something that does matter quite a bit to us and it has a big effect on users, so that’s something that I, personally, would take seriously.”
Vul de onderstaande gegevens in én wij nemen binnen 3 werkdagen contact met je op.