Diafragmaat
logo Diafragmaat

Waarom een snellere website?

Minimaliseer HTML Bestandsgrootte

Logo Diafragmaat.

Je website heeft interessante tekst, leuke foto's en misschien een Youtube filmpje en een like button. Maar heeft al dat moois niet een negatief effect op de laad snelheid?

De eerste vraag is dus moet ik mijn webpagina wel sneller maken? Je kan je pagina openen op je computer of smartphone en kijken hoe lang het duurt voordat de pagina geladen is.

Er is een psychologische reden waarom een website snel moet laden: Hoe langzamer de pagina laad, hoe eerder de bezoeker afhaakt. Haakt de bezoeker af na je eerste pagina, word dit in je statistieken weergegeven als de bounce rate.

Gebruik semantische HTML

Gebruik semantische HTML5 elementen (<header>, <footer>, <nav>, <article>, <section>) omdat ze niet alleen de SEO verbeteren maar ook de noodzaak voor extra div tags verminderen.

Minify HTML

Verwijder onnodige witruimte, commentaren en inspringing. Je kunt tools of Visual Studio Code extensies zoals "Minify" gebruiken om dit proces te automatiseren.

Optimaliseer Afbeeldingen

  • Gebruik Geschikte Format: JPEGs voor foto's, PNGs voor grafieken met transparantie, en SVG voor vectorafbeeldingen.
  • Comprimeer Afbeeldingen: Gebruik tools zoals TinyPNG of ImageOptim om de bestandsgrootte te verminderen zonder kwaliteitsverlies.
  • Specificeer Afbeelding dimensies: Voeg breedte en hoogte attributen toe in <img> tags om layout verschuivingen tijdens het laden te voorkomen.
  • Lazy Load Afbeeldingen: Implementeer lazy loading voor off-screen afbeeldingen om hun laden uit te stellen tot ze op het punt staan om in de viewport te komen.

Benut Browser Caching

Gebruik de <meta http-equiv="Cache-Control" content="max-age=0, must-revalidate"> tag om caching beleid te beheersen.

Beperk Externe HTTP Verzoeken

  • Inline Kleine CSS/JS: Overweeg voor zeer kleine JavaScript of CSS om deze direct in je HTML in te lijnen om verzoeken te verminderen.
  • Concateneer Bestanden: Combineer meerdere CSS of JS bestanden in enkele bestanden om het aantal HTTP verzoeken te verlagen.
  • Gebruik CSS Sprites: Combineer meerdere afbeeldingen in een enkele afbeelding sprite om het aantal afbeelding verzoeken te verminderen.

Laad JavaScript Asynchroon

Gebruik de async of defer attributen bij het includeren van JavaScript bestanden om het blokkeren van het renderen van de pagina te voorkomen.

Gebruik CDN voor Bibliotheken/Frameworks

Verstrek gemeenschappelijke bibliotheken of frameworks vanuit een Content Delivery Network (CDN) om gebruik te maken van versies uit de cache op browsers van gebruikers.

Vermijd Inline Stijlen en Scripts

Externaliseer CSS en JavaScript naar cachebare bestanden, tenzij het om zeer kleine snippets gaat.

Gebruik Web Lettertypen Verstandig

Beperk het aantal lettertypefamilies, gewichten en tekensets tot alleen die welke op de pagina worden gebruikt.

Implementeer AMP (Accelerated Mobile Pages) voor Mobiel

Voor op content gerichte websites, overweeg het creƫren van AMP versies om het laden op mobiele apparaten te versnellen.

Gebruik Tools voor Analyse en Validatie

Gebruik tools zoals Google PageSpeed Insights, GTmetrix, of Lighthouse in Chrome DevTools om je website's prestatie te analyseren en aanbevelingen te krijgen voor verbetering. Deze tools bieden inzichten specifiek voor het gebruik van HTML, CSS, en JavaScript op je site.

Is snelheid belangrijk?

Veel mensen onderschatten het positieve effect van een snellere webpagina op smartphones. Google rapporteerde in deze PDF uit 2017 al  dat als je je pagina van 3 naar 1 seconden versneld, je bounce rate maar liefst 32% lager wordt! Kan je terug van 5 naar 1 seconde is dat zelfs 90%!

Duurt je website te lang om te laden?

Dan is er goed nieuws en slecht nieuws voor je. Het goede nieuws is dat je niet alleen bent met een langzame website.

Maar liefst 60% van alle webpagina's is groter is dan 1,5 MB. 36% is over 2 MB en 12% over 4 MB. De tijd om 1,5 MB over een 3G connectie te downloaden is 7 seconden. En het slechte nieuws is nu eigenlijk: Dit is echt slecht want bezoekers haken af!

Laadtijd laad perceptie Verhoging Bounce
tot 1 sec vrijwel direct 0 %
3 sec onder verwachting 32 %
6 sec ongeduldig 90 %
12 sec ondraaglijk 123 %

Tabel laadtijden en bounce rate toename.

Het mag duidelijk zijn dat niemand zit te wachten op langer wachten. In de ideale wereld laad je pagina altijd, en overal onder de 1,5 seconde.

De bounce percentages zijn sinds 2017 zelfs nog hoger geworden, omdat meer en meer mensen snellere laadtijd anticiperen.

Hoe versnel web pagina's?

Eerst zal je moeten weten wat veroorzaakt nu een hoge laadtijd.

Je kan 4 categorieƫn onderscheiden

  • pagina grootte
  • beschikbare bandbreedte
  • pagina complexiteit
  • rekenkracht van server en client

Er moet vaak een (groot) aantal dingen gebeuren tijdens het openen van een webpagina. Daarom is het belangrijk te erkennen dat je wellicht beter je pagina kunt simplificeren.

Albert wist het al en probeerde daar waar het kon, te simplificeren. Albert wist het al en probeerde daar waar het kon, te simplificeren.

Het simpelweg weghalen van componenten uit je pagina is daarom ook de meestgemakkelijke en effectieve optie tegen te lange wachttijden. Uiteraard is dit niet altijd wenselijk of mogelijk.