Website snelheid 2019

Website snelheid

Verminder HTTP-oproepen
Elk bestand dat nodig is om een webpagina te renderen en te laten functioneren, zoals HTML, CSS, JavaScript, afbeeldingen en lettertypen, vereist een apart HTTP-verzoek. Hoe meer verzoeken er worden gedaan, hoe langzamer die pagina wordt geladen. Als je bent zoals de meeste mensen met wie ik praat, dan denk je waarschijnlijk:

“O, daar hoef ik me geen zorgen over te maken, Ralf. Ik weet wat ik aan het doen ben en ik voeg geen grote hoeveelheden afval toe aan mijn website!”.

Dat kan gedeeltelijk waar zijn. Je mag ook inderdaad niet een heleboel vuilnis aan je website toevoegen, maar meer dan 90 procent van de websites die ik tegenkom bevatten dit toch. Het is er omdat een meerderheid van de webdesigners, ongeacht hun vaardigheden of ervaring, de snelheid van de pagina’s geen prioriteit maakt. De trieste waarheid is dat de meeste niet eens weten hoe.

Hier begint het probleem: De meeste thema’s laden één of meer CSS-bestanden en meerdere JavaScript-bestanden. Sommige, zoals Jquery of FontAwesome, worden meestal op afstand geladen vanaf een andere server, wat de laadtijd van een pagina aanzienlijk verhoogt. Dit wordt nog problematischer als je bedenkt dat de extra CSS- en JavaScript-bestanden die door plugins zijn toegevoegd, de laadtijd nog langer maken.

Het is gemakkelijk om te eindigen met een half dozijn of meer HTTP-verzoeken alleen al van CSS- en JavaScript-bestanden. Wanneer je rekening houdt met alle afbeeldingen op een pagina, die elk een aparte HTTP-aanvraag vereisen, loopt het snel uit de hand.

Verminder of elimineer plugins die hun eigen JavaScript- en/of CSS-bestanden laden.
In sommige gevallen, zoals bij Gravity Forms, heb je de optie om ze uit te schakelen.

Gebruik Sprites voor veelgebruikte afbeeldingen.
Gebruik waar mogelijk een lettertype zoals FontAwesome of Ionische Pictogrammen in plaats van afbeeldingsbestanden, omdat dan slechts één bestand geladen hoeft te worden. 


Wanneer je een URL bezoekt zonder de trailing slash, zal de webserver op zoek gaan naar een bestand met die naam. Wanneer hij geen bestand met die naam vindt, zal hij het dan behandelen als een directory en zoeken naar het standaardbestand in die directory.

Met andere woorden, door de trailing slash weg te laten, dwing je de server om een onnodige re-direct uit te voeren. Hoewel het misschien onmiddellijk lijkt, duurt het iets langer, en zoals we al hebben vastgesteld, telt elk klein beetje.


https://example .com (dit is slecht)
https://example .com/services (dit is ook slecht)

vs.


https://example .com/ (dit is goed)
https://example .com/services/ (dit is ook goed).

Het weglaten van de trailing slash heeft dus een negatieve invloed op de snelheid. Probeer alle URL’s te laten eindigen met een trailing slash.

Compressie inschakelen
Het inschakelen van GZIP-compressie kan de tijd die nodig is om jouw HTML-, CSS-, Javascript- en CSS-bestanden te downloaden aanzienlijk verkorten. Ze worden gedownload als veel kleinere gecomprimeerde bestanden, die vervolgens worden gedecomprimeerd zodra ze in de browser zijn aangekomen.

Maak je geen zorgen – je bezoekers hoeven niets extra’s te doen omdat alle moderne browsers GZIP ondersteunen en het automatisch verwerken van alle HTTP-verzoeken.

Browser Caching inschakelen
Wanneer browser caching is ingeschakeld, worden de elementen van een webpagina opgeslagen in de browser van jouw bezoekers, totdat ze de volgende keer dat ze jouw site bezoeken. Of wanneer ze een andere pagina bezoeken, hun browser de pagina in kan laden zonder dat ze nog een HTTP-verzoek naar de server hoeven te sturen voor een van de cache-elementen.
Zodra de eerste pagina is geladen en de elementen zijn opgeslagen in de cache van de gebruiker, hoeven alleen nog maar nieuwe elementen op de volgende pagina’s te worden gedownload. Dit kan het aantal bestanden dat moet worden gedownload tijdens een typische browsersessie drastisch verminderen. 

Er zijn ook verschillende plug-ins beschikbaar voor WordPress die de links in jouw websitekop voor jouw gewone CSS- en JavaScript-bestanden zullen vervangen door een geminimaliseerde versie zonder jouw originele bestanden te wijzigen, inclusief populaire cache-plugins zoals:

W3 Totale Cache
WP Super Cache
WP-raket Minify Resources

Door het minimaliseren van jouw CSS- en JavaScript bestanden wordt onnodige ruimte en commentaar verwijderd om de bestandsgrootte te verminderen en daarmee de tijd die nodig is om ze te downloaden. Gelukkig hoeft dit geen handmatig proces te zijn, omdat er online verschillende hulpmiddelen beschikbaar zijn om een bestand om te zetten in een kleinere, geminimaliseerde versie van zichzelf. 

Het kan een beetje moeite kosten om de instellingen precies goed te krijgen. Omdat de verkleining vaak CSS en JavaScript kan breken, als je eenmaal alles geminimaliseerd hebt, moet je je website grondig testen. 

Boven de vouw de prioriteit geven
Jouw website kan er voor de bezoeker sneller uitzien als deze gecodeerd is om een hogere prioriteit te geven aan de inhoud boven de vouw. Met andere woorden, de inhoud die zichtbaar is voordat een bezoeker gaat scrollen. Dit betekent dat alle elementen die boven de vouw verschijnen ook zo dicht mogelijk bij het begin van de HTML-code moeten staan, zodat de browser ze eerst kan downloaden en weergeven.

Het is ook van cruciaal belang om CSS en JavaScript op te nemen die nodig zijn om dat gebied inline weer te geven in plaats van in een extern CSS-bestand.

Mediabestanden optimaliseren

Omdat mobiele apparaten met hoogwaardige camera’s gangbare en moderne foto’s maken. Veel mensen maken gewoon een foto en uploaden deze zonder te beseffen dat de foto vaak minstens vier keer zo groot is als nodig.


Dit vertraagt jouw website aanzienlijk – vooral voor mobiele gebruikers. Het optimaliseren van de mediabestanden op jouw website heeft de potentie om de snelheid van jouw pagina’s enorm te verbeteren. En dat is relatief eenvoudig, dus het is een goede investering van jouw tijd. 

Optimaliseren van Afbeeldingen
Kies voor het ideale formaat. JPG is perfect voor fotografische beelden, terwijl GIF of PNG het beste zijn voor beelden met grote vlakken in effen kleur.


8-bits PNG-bestanden zijn voor afbeeldingen zonder alfakanaal (transparante achtergrond) en 24-bits PNG-bestanden zijn voor afbeeldingen met een alfakanaal. Zorg ervoor dat de afbeeldingen de juiste grootte hebben. Wanneer een afbeelding op jouw website op 800 pixels breed wordt weergegeven, heeft het gebruik van een 1600 pixels brede afbeelding geen enkel voordeel.

Comprimeer het beeldbestand 
Adobe Photoshop is niet alleen het beste beeldbewerkingsprogramma, maar heeft ook geweldige mogelijkheden voor beeldcompressie en begint bij $9,99/maand.


Je kunt ook gratis WordPress-plugins gebruiken – zoals WWW Image Optimizer, Imsanity en TinyJPG – die automatisch geüploade afbeeldingen comprimeren.

Video optimaliseren
Kies het ideale formaat. MP4 is in de meeste gevallen het beste omdat het de kleinste bestandsgrootte produceert. Serveer de optimale grootte (afmetingen) op basis van de schermgrootte van de bezoekers. Elimineer het audiospoor als de video op de achtergrond wordt gebruikt als ontwerpelement.


Ik gebruik meestal Adobe Premiere, maar Camtasia is ook een goede keuze.

Verklein de lengte van de video 
Overweeg Het uploaden van video’s naar YouTube of Vimeo in plaats van ze lokaal te serveren en hun iframe embedding code te gebruiken. Daar moet je het niet bij laten, omdat dat alleen maar krassen op het oppervlak veroorzaakt. Om de media op jouw website echt te optimaliseren, moet je de juiste afbeeldingen serveren op basis van de grootte van het scherm in plaats van ze simpelweg aan te passen.


Er zijn twee manieren om dit aan te pakken, gebaseerd op de implementatie van een afbeelding.  Afbeeldingen binnen de HTML van jouw website kunnen worden bediend met behulp van SRC set, die de browser in staat stelt om de juiste afbeelding te selecteren, te downloaden en weer te geven op basis van de schermgrootte van het apparaat dat een bezoeker gebruikt.

Afbeeldingen geplaatst via CSS – meestal als achtergrondafbeeldingen – kunnen worden bediend met behulp van media queries om de juiste afbeelding te selecteren op basis van de schermgrootte van het apparaat dat een bezoeker gebruikt.


Caching & CDN’s gebruiken
Caching stelt jouw webserver in staat om een statische kopie van jouw webpagina’s op te slaan, zodat deze sneller kunnen worden afgeleverd bij de browser van een bezoeker, terwijl een CDN het mogelijk maakt deze kopieën te distribueren naar servers over de hele wereld, zodat de browser van een bezoeker ze kan downloaden van de server die het dichtst bij de locatie is. Dit verbetert de snelheid van de pagina’s drastisch.