Simpele stappen om je website sneller te maken.

Gepubliceerd op: 22-03-2020Laatste update: 30-03-2020 (15:53)Categorie:  Doe Het ZelfTutorials

Wat zijn nou de meest eenvoudige stappen die je zelf kunt nemen en welke een grote impact hebben op de snelheid van jouw website?

Eenvoudig zelf je website sneller maken

Het sneller maken en optimaliseren van een website is eigenlijk een vak apart; er zijn namelijk zo veel variabelen waar je rekening mee dient te houden. Zaken zoals het begrijpen van basis server-functionaliteit en configuratie, hoe browsers "dingen" interpreteren en nuances aanbrengen in bestandsindelingen. Dit alles maakt dat website optimalisatie geen eenvoudige taak is.

Wij krijgen echter dagelijks vragen over webprestaties en optimalisatie, daarom ga ik toch proberen je op gang te helpen bij het optimaliseren van je eigen website. In het volgende artikel heb ik een aantal zaken op een rijtje gezet waaraan je zelf kunt werken zonder dat je een expert hoeft te zijn op het gebied van website optimalisatie. Zelfs als je een beginner bent kun je aanzienlijke snelheidswinsten realiseren met deze tips. Wel heb je een klein beetje kennis nodig van ontwikkel-tools en, omdat elke website anders is opgebouwd, van de werking van je eigen website.

Dus: eenvoudige aanpassingen waardoor jij aanzienlijke snelheidsverbeteringen kunt realiseren.

Ik probeer deze relatief simpele stappen zoveel mogelijk in jip-en-janneke taal uit te leggen (ELI5). Mocht je er alsnog moeilijkheden mee hebben dan helpen we je graag verder:

1. Webhosting

De basis van een goed functionerende en snelle website is de omgeving waarop het draait. Is dit niet in orde dan zul je nooit spectaculaire resultaten kunnen behalen.

Wat belangrijk is voor webhosting anno 2020:

Server hardware: CPU/RAM:
Heb je toen je jouw website bent begonnen bij een van de hosting knallers een goedkoop hostingpakket op de kop getikt? Soms wel zo goedkoop als 1 euro per maand? Dan is het bijna zeker dat er een hele hoop te winnen valt. Wat wij adviseren voor klanten die zelf hun hosting willen managen is Cloudways. Hier kun je eenvoudig in een aantal stappen en klikken je eigen server aanmaken en opschalen waar nodig. Ben je wat meer geavanceerd en kun je omgaan met CLI. Dan is DigitalOcean voor jou de beste oplossing.

HTTP/2
Zorg er voor dat op jouw server HTTP/2 geconfigureerd is. HTTP/2 zorgt voor snellere en Parallelle request afhandeling wat weer resulteerd in een snellere website. Waar bij HTTP/1 alle requests om de beurt verwerkt moesten worden, kan HTTP/2 de requests tegelijk verwerken, wat een aanzienlijke snelheidoptimalisatie met zich meebrengt.

PHP 7+
79% van het internet gebruikt de Programmeertaal PHP om de dynamische webpagina's weer te geven. Met PHP 7.0 zijn enorme snelheidswinsten te behalen in de laadtijd van je website. Indien jouw hostingprovider nog een lagere versie gebruikt dan PHP 7.0 dan is het raadzaam om elders je hosting onder te brengen.

Onderstaand vergelijking PHP 5.6 vs PHP 7.0:

PHP 7 snelheid vergelijking PHP 5.6

Op zoek naar goede webhosting? Bekijk onze pakketten.

Server side caching: Varnish / Redis
Om een dynamische webpagina te laden krijgt je server heel wat te voor de kiezen. Hij loopt elke keer als je een pagina opvraagt alle scripts af om vervolgens de juiste data te laten zien op de desbetreffende pagina. Ook als veel van deze scripts het zelfde zijn als voorgaande pagina. Hier komt server-side caching om de hoek kijken. Server cache zoals Varnish en Redis slaan scripts op die de server uitvoert. Wanneer deze scripts opnieuw uitgevoerd moeten worden hoeft de server die niet opnieuw te berekenen en wordt de uitkomst vanuit deze cache geleverd. Dit scheelt dus rekencapaciteit en verwerkingstijd. Je webpagina wordt dan dus sneller weergeven.

2. Script optimalisatie

Dan hebben we natuurlijk ook de front-end scripts, voornamelijk JavaScript bestanden die de webbrowser moet verwerken bij het laden van een pagina.

Verwijder onnodige scripts
Ga na of de scripts die geladen worden op de webpagina wel echt nodig zijn op die pagina. Heb je bijvoorbeeld een script voor Google Maps op de homepage, terwijl je daar helemaal geen gebruikt maakt van Google Maps, dan is dat weggegooide laadtijd. Als je je website goed geoptimaliseerd wilt hebben laad je dus alleen scripts waar ze nodig zijn. Ga dus goed na waar je welke scripts je waar nodig hebt en pas daarop je requests aan.

Verplaats render blocking scripts
Naast dat je moet kijken of een bepaald script wel echt van toepassing is op de desbetreffende pagina, is het ook belangrijk dat je niet alle scripts zomaar in de <head> zet. Doe je dit wel dan hebben we het over "Render Blocking Scripts". Wat dit inhoud is dat de browser pas de pagina gaat weergeven nadat deze scripts zijn uitgevoerd. 90% van de scripts kun je prima laden nadat de pagina geladen is. Dit doe je dan net voor de </body> sluit tag. Let op: De volgorde van het laden van scripts is belangrijk. Heb je bijvoorbeeld een jQuery animatie scriptje, plaats deze dan achter het jQuery initialisatie script.

<head>
	<!-- Hier al het belangrijke voor pagina laden -->
</head>
<body>
    <!-- Hier al je website content -->
    
    <!-- Hier je scripts -->
    <script src="/js/jquery.js"></script>
    <script src="/js/mijn-jquery-plugin.js"></script>
</body>
Te ingewikkeld? We helpen je graag verder.

3. CDN (Content Delivery Network)

Content Delivery Networks (CDN's) zijn bedoeld voor het weergeven van statische bestanden (zoals afbeeldingen, CSS en JavaScript) vanaf supersnelle servers die speciaal voor zijn geconfigureerd (ze zijn bijvoorbeeld 'cookievrij', wat weer extra scheelt in het aantal aanvragen van de server). Maar het belangrijkste is van een CDN netwerk is dat de statische bestanden van de gebruiker gezien vanaf de meest dichtsbijzijnde server wordt geleverd. Een grote winst als je een internationale website hebt!

Een CDN is vrij eenvoudig op te zetten en er zijn verschillende aanbieders hier van zoals: Cloudflare, StackPath of KeyCDN.

CDN Netwerk Cloudflare

Cloudflare is overuit onze favoriet. Wij gebruiken het op vrijwel elke website die wij afleveren. Het is niet alleen eenvoudig op te zetten, het biedt buiten snelle Content Delivery ook vele andere voordelen:

  • Super snelle DNS: wijzigingen zijn letterlijk in 1 minuut wereldwijd doorgevoerd
  • Webapplicatie Firewall
  • DDoS-bescherming
  • SSL / TLS: Eenvoudig SSL certificaten installeren
  • Load balancing
  • Argo Smart Routing
  • Weboptimalisaties
  • Lokale opslagcaching
  • AutoMinify
  • JavaScript Optimalisatie (RocketLoader)
  • Browseroptimalisatie
  • Server Push

En het mooie is dat het meeste GRATIS is. Dat is toch wat wij Nederlanders willen :)

Hulp nodig bij het implementeren van een CDN?

4. Bestand- en afbeelding optimalisatie

Het optimaliseren van bestanden zoals afbeeldingen, CSS en javaScript bestanden is heel erg eenvoudig en geeft grote snelheidswinsten voor de laadtijd van jouw website.

1. Afbeeldingen

Laten we beginnen met optimaliseren en comprimeren van afbeeldingen.

Zorg er voor dat het formaat van je afbeeldingen in orde is, gebruik je bijvoorbeeld een afbeedling als icoontje dan is het natuurlijk totaal onnodig als je hier een afbeelding voor gebruikt die 1024x1024 px is. Let ook altijd even op de DPI van de afbeelding. In tegenstelling tot drukwerk gebruiken digitale schermen nooit een DPI hoger dan 72.

Vervolgens de afbeelding comprimeren: Er zijn heel veel aanbieders op dit gebied en doen vrijwel allemaal het zelfde. Wij gebruiken hier meestal TinyPNG voor. Het werkt heel simpel:

  1. Je sleept de afbeelding die je wilt optimaliseren in het upload gebied
  2. Heel even wachten, de server doet zijn werk
  3. Je download de geoptimaliseerde afbeelding weer

Afbeelding optimalisatie TinyPNG

Over het algemeen kun je een afbeelding tussen de 70% en de 90% comprimeren, zonder dat je dat uiteindelijk kunt zien aan de afbeelding zelf!

Gebruik je Wordpress? Dan zijn hier ook handige plugins voor. Echter denk 2 keer na voordat je voor elk wissewasje een plugin installeert. Het installeren van plugins gaat altijd ten kosten van je websiteprestaties.

2. Overige bestanden

Ook andere bestanden die je website moet ophalen bij het laden van de website pagina zoals CSS en JavaScript kun je comprimeren. Als bijvoorbeeld een JavaScript bestand wordt geschreven dan zitten er in het bestand heel wat tabs, spaties en breaks in. Dit zorgt er voor dat een persoon dit bestand makkelijk kan lezen. Dit is echter voor de server nutteloze informatie.

Wij zelf gebruiken slimme NPM packages om on-the-fly JS en CSS bestanden te comprimeren en om al het onnodige te verwijderen in de productiebestanden. Om dit uit te leggen gaat denk ik een beetje het doel van deze blog voorbij. Ik zal dus uitleggen hoe je dit handmatig kunt doen.

Er zijn online diversen gratis tools om je code te minimaliseren. Omdat wij dit programmatisch doen heb ik niet echt een goed geteste aanrader voor je, maar in dit voorbeeld gebruiken we minifier.org (CSS + JS)

  1. Open het JavaScript bestand dat je wilt comprimeren in je favoriete code editor
  2. Kopieer alle code uit dit bestand en plak dit vervolgens in MINIFY JAVASCRIPT OR CSS CODE en druk op MINIFY
  3. Kopieer vervolgens de geminificeerde uitvoer en vervang hiermee de code uit je originele bestand
  4. In geval van JavaScript is het een goed idee om even te testen of de code nog steeds werkt

Website Bestandsoptimalisatie CSS en JS

5. Webfonts

Het gebruik van webfonts is net zo goed een prestatie-slurper als de gebruikelijke verdachten: afbeeldingen en JavaScript.

Ga dus na of je ze überhaupt nodig hebt. Als je wegkomt met geen speciale webfonts te gebruiken of als je onnodige lettertypen kunt verwijderen, zul je zeker prestatieverbeteringen zien. Misschien is het wel een optie voor je om de standaard systeem lettertypes te gebruiken. Zo hoef je helemaal geen fonts te laden op je website en gebruik je de standaard geïnstalleerde lettertypes van jouw besturingssysteem.

Als je ze wel moet gebruiken (dit neem ik je absoluut niet kwalijk, typografie is leuk en geeft een site veel diversiteit), dan heb je nog steeds mogelijkheden om de prestaties ervan te verbeteren.

Het meest eenvoudige is om deze CSS uit te proberen in je @font-face declaraties voor de niet standaard lettertypen → font-display: optional; /* or swap */

Bijvoorbeeld:

@font-face {
	font-family:Inter;
    font-style:normal;
    font-weight:400;
    src:
    url(/assets/fonts/inter/Inter-Regular.woff2) format("woff2"),
    url(/assets/fonts/inter/Inter-Regular.woff) format("woff");
    /* Zie onderstaande declaratie */
 	font-display: optional; /* of swap */
}

Met bovenstaand zullen de speciale lettertypen/fonts het laden van de pagina nooit tegenhouden.

Hulp nodig bij het sneller maken van je website?