Een goede gebruikerservaring van jouw website creëer je door snel ladende pagina’s. Pagina’s met een lange laadtijd hebben hogere ‘bounce rates’ en een korte ‘time on page’. Oftewel: een bezoeker bekijkt je pagina, maar is snel weer vertrokken. Uit verschillende studies is gebleken dat langere laadtijden een negatief effect hebben op het conversieratio. Het zal daarom niet als een verrassing komen wanneer ik je vertel dat het erg belangrijk is om zorg te dragen voor snel ladende webpagina’s!

Google streeft naar een sneller en mobielvriendelijk web om zo de gebruikerservaring te verbeteren. Sitesnelheid – en daarmee ook paginasnelheid –  is dan ook één van de signalen die het algoritme van Google gebruikt om pagina’s te ranken. Ook de kwaliteitsscore van Google AdWords advertenties wordt beïnvloed door de paginasnelheid van de bestemmingspagina. Hogere kwaliteitsscores leiden tot lagere CPC’s (kosten per klik) en hogere advertentieposities. Je betaalt dus minder voor een klik, en dat heeft uiteraard een positief effect op het rendement van je campagnes.

Kortom: redenen genoeg om je paginasnelheid te verbeteren. Maar hoe doe je dat? In dit blogbericht  geef ik je een aantal mogelijke oplossingen om de paginasnelheid van je website te verbeteren.

Maak gebruik van compressie

De kop zegt het al: maak gebruik van Gzip compressie! Gzip is een datacompressieprogramma dat CSS-, HTML-, JavaScript-, TXT-, XML- en Font-bestanden verkleint. “Wat levert me dat op?”, hoor ik je denken. Stel: een bezoeker zoekt middels de browserbalk of zoekmachine naar jouw pagina. Wanneer je geen gebruik maakt van Gzip, dan zal de server op zoek gaan naar de pagina, deze verzenden en de browser zal je pagina aan de bezoeker tonen. Wanneer je wél gebruik maakt van Gzip, zal de server de pagina vinden, deze comprimeren, en dan verzenden. De browser decomprimeert  – mits Gzip compressie wordt ondersteund, zoals de meeste doen – de pagina en vertoont deze daarna pas aan de bezoeker. Dit lijkt meer werk, maar het verkleinen van bestanden resulteert in een snelheidswinst voor het laden van je pagina.

Optimaliseer afbeeldingen

Maak je gebruik van afbeeldingen op je pagina? Dan is het allereerst belangrijk om afbeeldingen op te slaan in een geschikte indeling: .PNG bestanden zijn het meest geschikt voor afbeeldingen met minder dan 16 kleuren (bijv. logo’s), .JPEG bestanden zijn beter voor foto’s. Zorg daarnaast dat afbeeldingen niet groter zijn dan nodig. Dit doe je door afbeeldingen lossless te comprimeren. Door dit te doen maak je afbeeldingen kleiner, zonder dat er zichtbaar kwaliteitsverlies optreedt. Twee goede tools om afbeeldingen lossless te comprimeren zijn: Kraken.io en WP Smush(een plugin voor WordPress).

Samenvoegen en comprimeren CSS-, JavaScript- en HTML-bestanden

Veel ontwikkelaars geven de voorkeur aan modulaire code, waarbij bestanden juist worden gescheiden. Dit scheiden heeft echter een negatief effect op de laadtijd van een pagina, omdat elk onderdeel dan ook apart geladen moeten worden. Door CSS- en JavaScript bestanden samen te voegen zorg je voor minder HTTP requests en zodoende voor minder vertraging. Door je code te optimaliseren – denk aan het verwijderen spaties, regeleinden, inspringen en andere onnodige karakters – kun je ook de paginasnelheid sterk verbeteren. Ook door het verwijderen van comments in de code en door ongebruikte code op te schonen, verbeter de je de paginasnelheid. Google raadt aan om hiervoor de tool YUI Compressor te gebruiken.

Maak gebruik van een Content Delivery Network (CDN)

Een Content Delivery Network (CDN) is een vorm van hosting waarbij meerdere servers met elkaar in verbinding staan. De servers worden ingezet om content zoals afbeeldingen en video’s via de snelste route aan de bezoeker van de website te bezorgen. Kopieën van die data worden dus opgeslagen op meerdere servers en verspreid over verschillende datacenters. Als een gebruiker de website aanroept zoekt het CDN de meest optimale route uit en stuurt de bezoeker door naar de server die het bestand het snelst kan leveren. Dit is meestal, maar niet altijd, de dichtstbijzijnde server.

Maak gebruik van browser caching

Browsers cachen veel informatie – denk aan CSS-bestanden, afbeeldingen, JavaScript bestanden –  zodat wanneer een bezoeker teruggaat naar een eerder bezochte pagina, de browser deze niet nogmaals volledig hoeft te laden. Ook op elementen die op andere pagina’s ook worden gebruikt (bijv. CSS-bestanden, logo’s enz.) hoeven niet opnieuw ingeladen worden. Om gebruik te maken van browser caching dien je de HTTP-headers aan te passen, zodat deze aanwijzingen bevatten over welke data er gecached dient te worden en hoe lang de browser deze in het cachegeheugen dient op te slaan. 

Verbeter de reactietijd van de server

De reactietijd van de server wordt beïnvloed door de hoeveelheid verkeer dat je ontvangt, de software die de server gebruikt, het CMS-systeem dat je gebruikt, en de hosting oplossing waarvoor je gekozen hebt. Om de responstijd van je server te verbeteren dien je op zoek te gaan naar bottlenecks zoals langzame databasequery’s, langzame routering, frameworks, bibliotheken, CPU-gebrek of simpelweg onvoldoende geheugen. De optimale reactietijd van je server dient onder de 200 ms. te liggen.

Je website opvoeren? Happy Idiots helpt!

Mocht jij nog andere tips hebben die in dit rijtje thuishoren: laat het ons weten! Wij van Happy Idiots staan altijd open voor interessante tips en het delen van ervaringen. Potje sparren, of kun je wel wat hulp gebruiken met het up-to-speed krijgen van jouw website? Neem dan contact met ons op!

Bron:  Victor Ribot Account- & projectmanager – Happy Idiots