Een snelle website zorgt voor betere gebruikerservaring, hogere conversie en betere SEO-ranking. Met deze checklist optimaliseer je de prestaties van je site.
HTML & CSS optimalisatie
| Richtlijn | Voorbeeld / Tip |
|---|
| Minimaliseer HTML en CSS | Gebruik minifiers zoals CSSNano of HTMLMinifier |
| Vermijd inline CSS | Zet stijlen in externe stylesheets |
Gebruik media-attributen | <link rel="stylesheet" href="print.css" media="print"> |
| Verwijder ongebruikte CSS | Tools zoals PurgeCSS |
JavaScript optimalisatie
| Richtlijn | Voorbeeld / Tip |
|---|
| Laad scripts asynchroon | <script src="app.js" async></script> |
Gebruik defer voor scripts | <script src="app.js" defer></script> |
| Bundel en minimaliseer | Webpack, Rollup of esbuild gebruiken |
| Lazy load JavaScript | Laad zware scripts pas wanneer nodig |
| Vermijd blocking scripts | Zet scripts onderaan <body> of gebruik async/defer |
Afbeeldingen
| Richtlijn | Voorbeeld / Tip |
|---|
| Optimaliseer bestandsgroottes | TinyPNG, Squoosh, ImageOptim |
| Gebruik moderne formaten | WebP, AVIF i.p.v. JPG/PNG |
| Responsive images | <img src="klein.jpg" srcset="middel.jpg 768w, groot.jpg 1200w"> |
| Lazy loading | <img src="foto.jpg" loading="lazy" alt="Beschrijving"> |
Caching
| Richtlijn | Voorbeeld / Tip |
|---|
| Browser caching instellen | Via .htaccess of serverconfig |
| Gebruik service workers | Voor offline caching en snellere laadtijden |
| HTTP cache-control | Cache-Control: max-age=31536000 |
Server & netwerk
| Richtlijn | Voorbeeld / Tip |
|---|
| Gebruik een CDN | Content Delivery Network voor snelle distributie |
| HTTP/2 of HTTP/3 | Moderne protocollen voor parallelle requests |
| GZIP / Brotli compressie | Activeer compressie voor HTML, CSS en JS |
| Verminder HTTP-requests | Combineer bestanden, gebruik sprites of inline SVG’s |
Fonts
| Richtlijn | Voorbeeld / Tip |
|---|
| Beperk aantal fonts | Gebruik max. 2–3 verschillende lettertypes |
Gebruik font-display: swap | Zorg dat tekst direct zichtbaar is |
| Zelf hosten i.p.v. extern | Fonts lokaal opslaan voorkomt extra requests |
Mobile performance
| Richtlijn | Voorbeeld / Tip |
|---|
| Viewport goed instellen | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| Aanraakvriendelijke knoppen | Minimaal 44x44px |
| Optimaliseer voor traag internet | Afbeeldingen en JS kleiner maken |
Monitoring & tools
| Tool | Functie |
|---|
| Google PageSpeed Insights | Analyseert snelheid en verbeterpunten |
| Lighthouse | Browser tool voor performance-audit |
| WebPageTest.org | Gedetailleerde laadtijd-analyse |
| GTmetrix | Combineert laadtijd en performance-data |
