Je site sneller maken in 10 stappen

development
Written by Mirthe Mertens

De snelheid van je website heeft impact op hoe goed (of slecht) hij scoort in de zoekresultaten en op de gebruikerservaring. Een trage site zorgt voor een hogere bounce rate, waardoor hij minder goed scoort in de zoekresultaten. Bezoekers verwachten nu eenmaal dat websites snel laden, liefst in minder dan twee seconden. En 40% van die bezoekers verlaat je website als hij te traag is. Een trage website kan je dus heel wat potentiële klanten en conversies kosten.

Is jouw website snel genoeg? Je kan de laadtijd nagaan in Google Analytics (Gedrag > Sitesnelheid). Ligt de laadtijd hoger dan twee seconden? Tijd om in actie te schieten! Hieronder leggen we je in 10 stappen uit hoe je je site sneller kan maken.
 

1. Optimaliseer de afbeeldingen

Zware afbeeldingen nemen veel bandbreedte in en zorgen voor een langere laadtijd. Het is dus belangrijk dat je je afbeeldingen verkleind voor je ze upload. Verkleinen in HTML heeft immers enkel effect op de weergave, maar niet op de bestandsgrootte.

Om afbeeldingen te bewerken, gebruik je software zoals Photoshop. In Photoshop kan je afbeeldingen bijsnijden, verkleinen en de resolutie aanpassen. Als je afbeeldingen bewerkt voor druk, hebben ze een hogere resolutie nodig, maar voor publicatie op je website, is 72dpi voldoende. Voor een optimale laadtijd, sla je je afbeeldingen best op in één van de standaard bestandsformaten (jpg, png of gif).
 

2. Verwijder overbodige plug-ins en tracking code

Als er te veel plug-ins actief zijn op je website, kan dat de laadtijd verhogen, want er wordt overbodige code ingeladen. Verwijder plug-ins die je niet gebruikt en maak bij voorkeur gebruik van de standaard functionaliteiten van het CMS.

Hetzelfde geldt voor tracking codes die je gebruikt voor marketingdoeleinden. Hoe meer tracking codes er aanwezig zijn op je website, hoe hoger de laadtijd. Denk dus goed na over welke tracking je écht nodig hebt en laat enkel die codes op je website staan. Vermijd ook het gebruik van tracking tools die hetzelfde doen. Als je Adobe Analytics gebruikt, is het niet nodig om ook Google Analytics op je website te draaien (of omgekeerd).
 

3. Vermijd inline CSS & JavaScript

Inline CSS of JavaScript is extra code die in de HTML staat. Bijvoorbeeld:

code-inline-css

Die code kan je lostrekken van de HTML en samenvoegen in een (of meerdere) extern CSS- of JavaScript-bestand. Zo'n bestand wordt opgeslagen in een externe cache wanneer je website ingeladen wordt, wat de laadtijd verlaagd als de bezoeker later opnieuw naar je website surft.
  

4. Optimaliseer caching

Aansluitend: zorg voor goed geconfigureerde caching. Caching zorgt er voor dat afbeeldingen, CSS en JavaScript (als ze in externe bestanden staan) niet elke keer opnieuw ingeladen moeten worden. Dat verlaagd de bandbreedte, de laadtijd van je website en zelfs de hosting kosten.

Om dit te bekomen, kan je expires- en cache-control-headers gebruiken. Die eerste gebruik je voor de statische onderdelen van je website, die tweede voor de dynamische onderdelen. Deze headers maken afbeeldingen, stylesheets (CSS) en scripts cachebaar en je kan zelfs instellen hoe lang ze in de cache moeten blijven zitten. Bijvoorbeeld:

code-expires-header
 

5. Vermijd redirects

Redirects zijn belangrijk voor een goede gebruikerservaring en SEO. Maar als er te veel redirects zijn, kan dat extra HTTP requests veroorzaken, wat de laadtijd van je website negatief beïnvloedt. Gebruik ze dus niet, tenzij het noodzakelijk is.

Vermijd redirect chains waarbij er meerdere redirects tussen de initiële URL en de bestemmingspagina zitten. In het geval van redirect chains duurt het altijd langer om de bestemmingspagina te laden, omdat je browser alle URL's moet doorlopen.
 

6. Beperk het aantal HTTP requests

Het merendeel van de laadtijd van een website wordt ingevuld door het downloaden van afbeeldingen, stylesheets (CSS) en scripts. Voor elk van deze elementen wordt er een HTTP request gedaan. Hoe meer componenten je pagina bevat, hoe hoger de laadtijd. Door het aantal HTTP requests te beperken, maak je je website sneller.

Voor elke afbeelding die op je website staat, wordt er een HTTP request gedaan. Je kan het aantal requests beperken door gebruik te maken van CSS sprites, waarbij je verschillende kleine afbeeldingen in één grote afbeelding verzamelt. Omdat er maar één afbeelding ingeladen moet worden, wordt er ook maar één HTTP request gedaan en wordt de pagina sneller ingeladen.

css-sprites

Icons lenen zich hier perfect toe. Je zet ze samen in één afbeelding en voegt de nodige CSS code toe. Eerst vraag je de afbeelding op als achtergrondafbeelding (background-image), vervolgens definieer je welk deel van de afbeelding op welke plek weergegeven moet worden (background-position).
 

7. Geef prioriteit aan content boven de fold (lazy loading)

Om het voor de bezoeker nog aangenamer te maken, kan je een stapje verder gaan. Je kan prioriteit geven aan de content die zich boven de fold bevindt, ook wel 'lazy loading' genoemd. Lazy loading is vooral interessant voor pagina's met veel content, zoals afbeeldingen, onder de fold. Met lazy loading zorg je ervoor dat afbeeldingen pas ingeladen worden als het nodig is - m.a.w. van zodra de bezoeker ze te zien krijgt in zijn browser.
 lazy-loading

Wil je lazy loading in actie zien? Lees maar eens een artikel op content platform Medium. Tijdens het scrollen zal je merken dat Medium gebruikmaakt van placeholder images en dat afbeeldingen pas ingeladen worden wanneer je ze tegenkomt.
 

8. Stel het inladen van JavaScript uit

JavaScript is meestal een vertragende factor en dat terwijl het vaak om code gaat die niet meteen ingeladen hoeft te worden. Als je JavaScript in externe bestanden zit, kan je het inladen van dat bestand uitstellen tot de andere elementen ingeladen zijn. Zo kan de rest van je content ingeladen kan worden zonder vertraging.

Dit kan je doen door het externe JavaScript bestand op te roepen net voor de </body> tag. Dat ziet er zo uit:

code-javascript-load
 
 

9. Beperk de DNS lookup time

Een DNS, of domain name system, is een server die een database bevat van IP-adressen en de hostname waaraan ze gelinkt zijn. Wanneer een gebruiker een URL ingeeft in de browser, vertaalt de DNS server die URL naar het IP-adres waaraan hij gelinkt is.

Tijdens de DNS lookup gaat de server op zoek naar het DNS record. (Je zou het kunnen vergelijken met een computer die een telefoonnummer opzoekt in een telefoonboek.) De snelheid van die DNS lookup is een bepalende factor in de snelheid van je website. Hoe lang de lookup duurt, is afhankelijk van de snelheid van je DNS provider. En als die niet snel genoeg is, is het misschien tijd om te veranderen van provider.
 

10. Maak gebruik van een CDN

Als je website gehost wordt op één server, stuurt elke bezoeker requests naar diezelfde server. Bij een hoog aantal bezoekers heeft die server meer tijd nodig om elke request te verwerken en wordt je website trager. En dat terwijl hij voor een bezoeker die verder van je server verwijderd is, sowieso al iets trager inlaadt.

Een Content Delivery Network (CDN) kan je helpen om die problemen te elimineren. Met een CDN wordt je website gecached op een globaal netwerk van servers. Van zodra iemand je website bezoekt - en dus bestanden opvraagt - wordt dat verzoek doorgestuurd naar de dichtstbijzijnde server. CDN's worden vaak enkel ingezet om zwaardere bestanden zoals afbeeldingen te hosten.

snellere-site-cdn

Je kan je zwaardere bestanden ook hosten op een extern platform. Zo heb je bijvoorbeeld Photobucket om afbeeldingen te hosten, en kan je video's uploaden op YouTube, Vimeo of Wistia. De requests worden dan niet naar jouw hosting server gestuurd, maar naar die van Photobucket of YouTube.

 
Wil je aan de slag met deze 10 stappen, maar zijn ze iets te technisch? Pak dan eerst de zaken aan die je gemakkelijk zelf kan oplossen: optimaliseer de afbeeldingen, verwijder overbodige plug-ins en tracking codes en bekijk welke redirects je kan elimineren.
Neem gerust contact met ons op als we je kunnen helpen met de meer technische puntjes.