Naar inhoud
Frank Spin
Contact
Menu

Lab

Wat een website traag maakt

18 oorzaken van een trage website. Per oorzaak lees je wat er gebeurt en wat je eraan doet. Begin je net? Pak dan eerst hosting en afbeeldingen aan, die twee maken meestal het grootste verschil.

Waarom het telt

  • Meer dan de helft van de internetgebruikers verwacht dat een website binnen twee seconden laadt. Na drie seconden haakt een groot deel af.
  • Wie moet wachten, bekijkt minder pagina’s. Het geld dat je uitgaf om bezoekers binnen te halen, is dan verspild.
  • Een trage site geeft een slechte ervaring, en dat kost je plek in Google. Lager in de zoekresultaten betekent minder bezoekers.
  • Het grootste gevolg voel je in je portemonnee: minder offerteaanvragen, minder verkopen en minder ingevulde contactformulieren.

Uit Waarom een trage website slecht is voor je bedrijf

Zo meet je het

Test je site gratis met een van deze tools en bespreek de uitkomst met je developer.

18 van 18 getoond

  1. Hosting en server

    Goedkope shared hosting

    Wat er gebeurt: Je site deelt een server met 10, 100 of zelfs duizenden andere sites. Hebben die het druk, dan merk jij dat.

    Zo los je het op
    • Stap over op een eigen (virtuele) server. Die heb je al vanaf zo’n € 7,50 per maand.
    • Weinig technische kennis? Kies een managed server, dan besteed je het beheer uit.
    • Of kies hosting die is ingericht op je platform, zoals WordPress of Magento.

  2. Hosting en server

    Een server ver van je bezoekers

    Wat er gebeurt: Staat je site op één server in één datacenter, dan reist elke aanvraag dat hele stuk heen en terug.

    Zo los je het op
    • Lever je site via een CDN, zodat bezoekers hem ophalen bij een server in de buurt. Bijvoorbeeld Cloudflare, Amazon CloudFront of Akamai.

  3. Hosting en server

    Geen compressie

    Wat er gebeurt: Zonder compressie gaan je HTML, CSS en JavaScript op volle grootte over de lijn. Met gzip worden pagina’s tot 70% kleiner.

    Zo los je het op
    • Laat je host compressie aanzetten.
    • Cloudflare comprimeert met Brotli, de opvolger van gzip.

  4. Hosting en server

    Een oude HTTP-versie

    Wat er gebeurt: Via HTTP/1.1 downloadt een browser in het slechtste geval één bestand tegelijk. Met HTTP/2 haalt hij er meerdere tegelijk op.

    Zo los je het op
    • Vraag je host om HTTP/2 aan te zetten. Vrijwel elke host draait het inmiddels standaard.

  5. Hosting en server

    Geen browsercaching

    Wat er gebeurt: Zonder browsercaching downloadt een terugkerende bezoeker alle bestanden opnieuw.

    Zo los je het op
    • Zet browsercaching aan. Dan bewaart de browser van je bezoeker de bestanden.
    • Op WordPress kan dat met W3 Total Cache.

  6. Hoe de site gebouwd is

    Elke pagina wordt bij elk bezoek opgebouwd

    Wat er gebeurt: WordPress start PHP, haalt content uit de database, laadt het thema en laat elke plugin draaien, bij elke bezoeker weer. Een caching-plugin helpt, maar het is een pleister.

    Zo los je het op
    • Bouw een pagina één keer, op het moment dat je publiceert. Je bezoeker krijgt dan kant-en-klare HTML.
    • Moet een pagina actueel zijn, zoals bij prijzen of voorraad? Render hem op de server en zet het resultaat in een cache aan de rand van het netwerk.

  7. Hoe de site gebouwd is

    Een standaardthema

    Wat er gebeurt: Een thema dat aan duizenden klanten verkocht wordt, zit vol functies die jij nooit aanzet. Hun JavaScript en CSS worden toch geladen.

    Zo los je het op
    • Kies een site op maat, met alleen de functies die hij echt nodig heeft.

  8. Hoe de site gebouwd is

    Plugins op elke pagina

    Wat er gebeurt: Elke plugin neemt eigen JavaScript, CSS en soms lettertypes mee, op elke pagina, of die pagina hem nu gebruikt of niet.

    Zo los je het op
    • Geef alleen onderdelen die iets moeten doen JavaScript, zoals een filter of formulier. En laad het pas als ze in beeld komen.
    • Stuur alleen de CSS mee die je pagina’s echt gebruiken.

  9. Hoe de site gebouwd is

    Opgeblazen HTML

    Wat er gebeurt: Een pagebuilder verpakt elk blok in vijf extra div’s.

    Zo los je het op
    • Houd de HTML klein. De homepage van deze site is 47 kB aan HTML en gaat met Brotli in minder dan 10 kB over de lijn.

  10. Afbeeldingen

    Te grote afbeeldingen

    Wat er gebeurt: Afbeeldingen zijn op bijna elke site het zwaarste onderdeel. Vaak staan er foto’s van een paar MB op, rechtstreeks uit de camera. Elke foto kost je bezoeker tijd en data.

    Zo zie je het
    Leg de breedte van elke afbeelding naast de breedte waarop hij getoond wordt. Is je site 700 pixels breed, dan is 700 genoeg, of 1400 voor retina-schermen.
    Zo los je het op
    • Maak afbeeldingen niet groter dan je ontwerp vraagt.
    • Comprimeer ze. TinyPNG haalt er vaak 50 tot 70% af zonder dat je verschil ziet.
    • Geef telefoons een kleinere versie.
    • Of bewaar alleen de originelen en laat het CDN elke maat maken, in AVIF of WebP als de browser dat ondersteunt.
    Tools
    TinyPNG

  11. Afbeeldingen

    Alle afbeeldingen laden tegelijk

    Wat er gebeurt: Op een pagina die langer is dan het scherm downloadt de browser afbeeldingen waar de bezoeker misschien nooit komt.

    Zo los je het op
    • Laad afbeeldingen ‘lazy’: pas als de bezoeker ernaartoe scrolt.
    • Browsers doen dat tegenwoordig zelf, met loading="lazy".

  12. Code en bestanden

    Te veel bestanden per pagina

    Wat er gebeurt: Elke video, afbeelding, script, lettertype en stylesheet is een aparte download. Een homepage met 39 van die bestanden kan er tot 10 seconden over doen.

    Zo zie je het
    Test de pagina in Pingdom of WebPageTest en kijk hoeveel bestanden hij laadt.
    Zo los je het op
    • Schrap elk bestand dat de pagina niet nodig heeft.

  13. Code en bestanden

    Ruwe CSS en JavaScript in losse bestanden

    Wat er gebeurt: Witruimte en inspringen maken code leesbaar voor een developer, maar ook groter. En tien CSS-bestanden betekent tien downloads.

    Zo los je het op
    • Minimaliseer de code: haal witruimte en regeleinden weg.
    • Voeg je CSS samen tot één bestand, en je JavaScript ook.
    • Op WordPress doet Autoptimize allebei.

  14. Extra’s op de pagina

    Fotosliders

    Wat er gebeurt: Een slider laadt meerdere foto’s plus eigen JavaScript en CSS. Dat zijn al snel vijf tot tien extra bestanden.

    Zo los je het op
    • Haal de slider weg en toon alleen de eerste slide. Daar staat meestal de belangrijkste content al.

  15. Extra’s op de pagina

    Share widgets

    Wat er gebeurt: Elke share widget neemt vaak eigen JavaScript, CSS en afbeeldingen mee.

    Zo los je het op
    • Laat ze weg. Mensen kunnen de link nog altijd uit hun browser kopiëren, en in 9 van de 10 gevallen kan je site prima zonder.

  16. Extra’s op de pagina

    Lettertypes van een andere server

    Wat er gebeurt: Elk lettertype is weer een bestand, en een dienst als Google Fonts of Adobe Typekit is een omweg naar een andere server.

    Zo los je het op
    • Weegt snelheid voor jou zwaarder dan branding? Gebruik dan de standaardlettertypes die al op het apparaat staan.
    • Of zet je lettertypes op je eigen domein. Dan heb je ook geen gedoe met privacy.

  17. Links en redirects

    Gestapelde redirects

    Wat er gebeurt: Stuurt je teampagina door naar ‘Over ons’, en ‘Over ons’ een jaar later weer naar je company-pagina? Dan gaat je bezoeker door allebei.

    Zo los je het op
    • Stuur elke oude URL rechtstreeks door naar de pagina waar hij nu moet uitkomen.

Alles op deze pagina komt uit drie van mijn artikelen. Daar lees je per punt het hele verhaal: