Diafragmaat
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 HTML5 elementen (<header>, <footer>, <nav>, <article>, <section>) omdat ze niet alleen de SEO verbeteren maar ook de noodzaak voor extra div tags verminderen.
Verwijder onnodige witruimte, commentaren en inspringing. Je kunt tools of Visual Studio Code extensies zoals "Minify" gebruiken om dit proces te automatiseren.
<img>
tags om layout verschuivingen tijdens het laden te voorkomen.
Gebruik de <meta http-equiv="Cache-Control" content="max-age=0, must-revalidate"> tag
om caching beleid te beheersen.
Gebruik de async of defer attributen bij het includeren van JavaScript bestanden om het blokkeren van het renderen van de pagina te voorkomen.
Verstrek gemeenschappelijke bibliotheken of frameworks vanuit een Content Delivery Network (CDN) om gebruik te maken van versies uit de cache op browsers van gebruikers.
Externaliseer CSS en JavaScript naar cachebare bestanden, tenzij het om zeer kleine snippets gaat.
Beperk het aantal lettertypefamilies, gewichten en tekensets tot alleen die welke op de pagina worden gebruikt.
Voor op content gerichte websites, overweeg het creëren van AMP versies om het laden op mobiele apparaten te versnellen.
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.
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%!
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.
Eerst zal je moeten weten wat veroorzaakt nu een hoge laadtijd.
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.
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.