Google PageSpeed 100 Score Bereiken: Complete Gids 2025

Waarom is je PageSpeed score belangrijk? Google gebruikt snelheid als ranking factor. Een trage site = lagere positie + hogere bounce rate + minder conversie. In deze gids leer je exact hoe je een perfecte 100 score haalt (of minimaal 90+).

Wat is Google PageSpeed?

PageSpeed Insights Uitgelegd

PageSpeed Insights is Google’s gratis tool die meet:

Performance (0-100 score)
Accessibility (toegankelijkheid)
Best Practices (veiligheid, moderne features)
SEO (search engine optimization)

De 100 score betekent:

Jouw site is het snelst mogelijke
Perfecte gebruikerservaring
Google geeft je ranking boost
Betere conversie (meer verkopen/leads)

Waarom is 100 Lastig?

Realiteit check:

0.1% van websites haalt 100
5% haalt 90+
50% zit onder de 50

Waarom zo lastig?

Third-party scripts (Google Analytics, ads, etc.)
Grote afbeeldingen
Ongeoptimaliseerde code
Slechte hosting
WordPress bloat

Goed nieuws: Met moderne tech (geen WordPress) is 90+ eenvoudig haalbaar.

Core Web Vitals: De 3 Belangrijkste Metrics

1. LCP (Largest Contentful Paint)

Wat is het?
Tijd tot de grootste content element zichtbaar is.

Target:

🟢 Goed: <2.5 seconden
🟡 Matig: 2.5-4 seconden
🔴 Slecht: >4 seconden

Hoe verbeteren?

// Slecht: Grote afbeelding zonder optimalisatie
<img src="hero.jpg" />

// Goed: Geoptimaliseerd + lazy loading
<img 
  src="hero.webp" 
  srcset="hero-400.webp 400w, hero-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="Hero afbeelding"
/>

Quick wins:

Afbeeldingen comprimeren (TinyPNG, Squoosh)
WebP formaat gebruiken
Font preloading
CDN gebruiken

2. FID (First Input Delay)

Wat is het?
Tijd voordat browser reageert op eerste interactie (klik, tap).

Target:

🟢 Goed: <100ms
🟡 Matig: 100-300ms
🔴 Slecht: >300ms

Hoe verbeteren?

JavaScript code splitsen (code splitting)
Defer/async scripts
Remove unused JavaScript
Use Web Workers voor heavy tasks

Voorbeeld:

<!-- Slecht: Blocking script -->
<script src="huge-library.js"></script>

<!-- Goed: Defer laden -->
<script src="huge-library.js" defer></script>

<!-- Beter: Async + module -->
<script type="module" src="app.js" async></script>

3. CLS (Cumulative Layout Shift)

Wat is het?
Hoeveel content “springt” tijdens laden.

Target:

🟢 Goed: <0.1
🟡 Matig: 0.1-0.25
🔴 Slecht: >0.25

Hoe verbeteren?

Reserveer ruimte voor afbeeldingen
Font fallbacks gebruiken
Geen ads die content pushen
Set dimensions op alle media

Code voorbeeld:

/* Slecht: Geen dimensies */
img {
  width: 100%;
}

/* Goed: Aspect ratio reserveren */
img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

Afbeeldingen Optimaliseren (Grootste Impact)

Probleem: Afbeeldingen = 60% van Page Weight

Typische fouten:

❌ 5MB foto’s van camera
❌ PNG gebruiken waar JPG kan
❌ Geen responsive images
❌ Geen lazy loading

Oplossing: Complete Image Optimization Stack

1. Formaat kiezen:

Foto's met veel detail → WebP (50% kleiner dan JPG)
Logo's/illustraties → SVG (vector, schaalt perfect)
Transparantie nodig → WebP with alpha (beter dan PNG)

2. Comprimeren:

TinyPNG: 60-80% kleiner zonder zichtbaar verlies
Squoosh: Fine-tune compression
ImageOptim: Mac app, batch processing

3. Responsive images:

<picture>
  <source 
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    type="image/webp"
  />
  <img 
    src="hero-800.jpg"
    alt="Hero"
    width="800"
    height="450"
    loading="lazy"
  />
</picture>

4. Lazy loading:

// Native lazy loading (super easy)
<img src="image.jpg" loading="lazy" />

// Met Intersection Observer (meer controle)
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
});
images.forEach(img => imageObserver.observe(img));

Real Impact

Voor optimalisatie:

10 afbeeldingen @ 2MB = 20MB totaal
LCP: 6.2 seconden
PageSpeed: 23/100

Na optimalisatie:

10 afbeeldingen @ 80KB = 800KB totaal (96% kleiner!)
LCP: 1.1 seconden
PageSpeed: 94/100

JavaScript & CSS Minimaliseren

JavaScript Optimalisaties

1. Code Splitting

// Slecht: Alles in 1 bestand laden
import { everything } from 'huge-library';

// Goed: Dynamic imports
const module = await import('./feature.js');

2. Tree Shaking

// Slecht: Hele library importeren
import * as _ from 'lodash';

// Goed: Alleen wat je nodig hebt
import debounce from 'lodash/debounce';

3. Minification

Terser: Best minifier voor JavaScript
Removes: Comments, whitespace, rename variables
Result: 40-60% kleiner

Voor:

function calculateTotalPrice(items, taxRate) {
  let total = 0;
  for (let item of items) {
    total += item.price * item.quantity;
  }
  return total * (1 + taxRate);
}

Na minification:

function c(i,t){let o=0;for(let r of i)o+=r.price*r.quantity;return o*(1+t)}

CSS Optimalisaties

1. Critical CSS

<!-- Inline critical CSS voor above-the-fold content -->
<style>
  .hero { background: #000; color: #fff; min-height: 100vh; }
  .nav { position: sticky; top: 0; }
</style>

<!-- Async load rest -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'" />

2. Remove Unused CSS

# PurgeCSS: Remove unused styles
npm install -D @fullhuman/postcss-purgecss

# Kan 90% van CSS verwijderen in production

3. CSS Minification

Remove whitespace
Shorten hex colors (#ffffff → #fff)
Merge rules

Server Response Time (TTFB)

Wat is TTFB?

Time To First Byte: Tijd voordat server eerste byte stuurt.

Target:

🟢 Goed: <200ms
🟡 Matig: 200-600ms
🔴 Slecht: >600ms

Hoe Verbeteren?

1. Betere Hosting

WordPress shared hosting: 800-2000ms TTFB ❌
Vercel/Netlify edge: 20-100ms TTFB ✅

Impact: 90% sneller!

2. Database Optimalisatie

N+1 queries fixen
Indexen toevoegen
Query caching

3. Server-side Caching

// Laravel cache voorbeeld
$posts = Cache::remember('posts', 3600, function () {
    return Post::with('author')->get();
});

4. CDN Gebruiken

Content dichter bij gebruiker
Cloudflare (gratis tier)
Vercel Edge (automatisch)

Caching Strategieën

Browser Caching

Headers instellen:

# Nginx config
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Betekent:

Browser slaat bestanden 1 jaar op
Bij revisit: instant load (0ms)
80% sneller voor terugkerende bezoekers

Service Workers

// Progressive Web App caching
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/script.js',
        '/logo.png'
      ]);
    })
  );
});

Voordeel:

Werkt offline
Instant herlaad
App-like ervaring

Real Case: Van 45 naar 98 PageSpeed

Situatie: WordPress E-commerce Site

Voor:

PageSpeed: 45/100
LCP: 5.2s
FID: 380ms
CLS: 0.42

Problemen:

15MB aan afbeeldingen
12 WordPress plugins
Geen caching
Shared hosting (2000ms TTFB)

Stap-voor-Stap Verbetering

Week 1: Afbeeldingen (45 → 67)

Alle afbeeldingen naar WebP
TinyPNG compressie
Lazy loading
Result: +22 punten, LCP 2.8s

Week 2: JavaScript (67 → 78)

Remove unused plugins (jQuery, etc.)
Defer alle scripts
Minification
Result: +11 punten, FID 140ms

Week 3: Hosting (78 → 92)

Migratie naar Vercel
CDN configuratie
Edge caching
Result: +14 punten, TTFB 80ms

Week 4: Fine-tuning (92 → 98)

Font optimization (preload)
Critical CSS inline
Resource hints
Result: +6 punten, CLS 0.05

Finale Resultaten

Na:

PageSpeed: 98/100 🎉
LCP: 0.9s (83% sneller)
FID: 45ms (88% sneller)
CLS: 0.05 (88% beter)

Business Impact:

Bounce rate: 68% → 31%
Conversie: +47%
Google ranking: Pagina 3 → Pagina 1
Revenue: +€12K/maand

Tools & Testing

Essentiële Tools

1. PageSpeed Insights

URL: https://pagespeed.web.dev/
Officiële Google tool
Test mobiel + desktop
Core Web Vitals data

2. Lighthouse (Chrome DevTools)

# Terminal gebruik
npm install -g lighthouse
lighthouse https://yoursite.com --view

3. WebPageTest

URL: https://www.webpagetest.org/
Test vanuit verschillende locaties
Filmstrip view (visueel laden)
Advanced metrics

4. GTmetrix

URL: https://gtmetrix.com/
Historical tracking
Video playback
Waterfall analysis

Testing Strategie

1. Baseline meten:

# Test 5x voor gemiddelde
for i in {1..5}; do
  lighthouse https://yoursite.com --output json --output-path report-$i.json
done

2. Één verbetering per keer

Test voor/na elke change
Meet impact isolate
Keep wat werkt

3. Real User Monitoring

// Gebruik Google Analytics 4
gtag('event', 'page_view', {
  page_load_time: performance.timing.loadEventEnd - performance.timing.navigationStart
});

Advanced Optimalisaties

HTTP/3 & QUIC

Waarom belangrijk?

30% sneller dan HTTP/2
Betere mobiele performance
Multiplexing zonder head-of-line blocking

Hoe activeren:

# Nginx 1.25+ with quiche
listen 443 quic reuseport;
listen 443 ssl;
http3 on;

Preload/Prefetch/Preconnect

<!-- Preload kritieke resources -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

<!-- Prefetch volgende pagina -->
<link rel="prefetch" href="/next-page" />

<!-- Preconnect naar external domain -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

Resource Hints Impact

Preload: Save 200-500ms
Prefetch: Instant next page
Preconnect: Save DNS + TLS time (100-300ms)

Checklist: 100 Score Bereiken

Must-Have Optimalisaties

Afbeeldingen:

JavaScript:

CSS:

Critical CSS inline
Minified
Unused CSS removed
Async loading non-critical

Fonts:

Preload critical fonts
Font-display: swap
WOFF2 format
Subset fonts (only needed chars)

Server:

TTFB <200ms
HTTP/2 or HTTP/3
Gzip/Brotli compression
CDN configured

Caching:

Browser cache headers
Service Worker (optional)
CDN caching
Static generation where possible

Conclusie: Is 100 Het Doel?

Praktische Aanpak

Realiteit:

90-95: Excellent (haalbaar voor meeste sites)
95-98: Great (vergt effort)
98-100: Perfect (lastig met third-party scripts)

Belangrijker dan score:

✅ Real user experience (Core Web Vitals)
✅ Conversion rate
✅ Business goals

Mijn Aanbeveling

Targets:

Minimum: 80+ (acceptabel)
Goed: 90+ (concurrentievoordeel)
Excellent: 95+ (market leader)

Focus op:

Core Web Vitals groen krijgen
Laadtijd <1 seconde
Mobiele ervaring perfect

Niet:

100 score als doel op zich
Third-party scripts verwijderen voor score
User experience opofferen

Hulp Nodig met PageSpeed?

Gratis Website Audit:

Stuur je URL
Ik analyseer performance
Je krijgt actieplan
Geen verplichtingen

Of laat mij bouwen:

Modern tech stack
90+ PageSpeed guaranteed
2-4 weken development
Vanaf €2.500

Vraag gratis audit aan →

Laatst bijgewerkt: 31 oktober 2025

Tags: google pagespeed, core web vitals, website snelheid, performance optimalisatie, lcp verbeteren, seo technisch

Google PageSpeed 100 Score Bereiken: Complete Gids 2025

Inhoudsopgave

Wat is Google PageSpeed?

PageSpeed Insights Uitgelegd

Waarom is 100 Lastig?

Core Web Vitals: De 3 Belangrijkste Metrics

1. LCP (Largest Contentful Paint)

2. FID (First Input Delay)

3. CLS (Cumulative Layout Shift)

Afbeeldingen Optimaliseren (Grootste Impact)

Probleem: Afbeeldingen = 60% van Page Weight

Oplossing: Complete Image Optimization Stack

Real Impact

JavaScript & CSS Minimaliseren

JavaScript Optimalisaties

CSS Optimalisaties

Server Response Time (TTFB)

Wat is TTFB?

Hoe Verbeteren?

Caching Strategieën

Browser Caching

Service Workers

Real Case: Van 45 naar 98 PageSpeed

Situatie: WordPress E-commerce Site

Stap-voor-Stap Verbetering

Finale Resultaten

Tools & Testing

Essentiële Tools

Testing Strategie

Advanced Optimalisaties

HTTP/3 & QUIC

Preload/Prefetch/Preconnect

Resource Hints Impact

Checklist: 100 Score Bereiken

Must-Have Optimalisaties

Conclusie: Is 100 Het Doel?

Praktische Aanpak

Mijn Aanbeveling

Hulp Nodig met PageSpeed?

Hulp nodig met je website?

🍪 Cookies & Privacy

Cookie Voorkeuren

Functionele Cookies

Analytische Cookies