Performance tests doen met ligthhouse

[amirnapoletano]

`# Lighthouse test Squadpage

Samenvatting van de belangrijkste verbeteringen:

1. Optimaliseer afbeeldingen en gebruik moderne formaten (zoals WebP en AVIF).

2. Verminder layout shifts door afmetingen te specificeren en netwerkverzoeken efficiënter te beheren.

3. Minimaliseer ongebruikte JavaScript en CSS, en gebruik compressie.

4. Elimineer render-blocking resources door kritieke CSS inline te plaatsen en niet-essentiële resources asynchroon te laden.

1. Verbeteren van de Largest Contentful Paint (LCP)**

De Largest Contentful Paint (LCP) is te hoog (10,4 seconden). Dit wordt meestal veroorzaakt door grote afbeeldingen of trage serverreacties.

Oplossingen:

• Optimaliseer afbeeldingen: Maak gebruik van moderne afbeeldingsformaten zoals WebP of AVIF en zorg dat de afbeeldingen niet groter zijn dan nodig. Gebruik ook srcset om verschillende resoluties aan te bieden.

Verhoog de laadsnelheid van de server: Zorg dat de Time to First Byte (TTFB) korter is door caching of serveroptimalisatie. Je kunt een Content Delivery Network (CDN) gebruiken om content sneller te leveren.

2. Verminder Cumulative Layout Shift (CLS)

Je CLS-score is 0,166, wat betekent dat er te veel lay-outverschuivingen plaatsvinden terwijl de pagina laadt. Dit komt vaak door afbeeldingen zonder gedefinieerde afmetingen of laate netwerkverzoeken die het lay-out veranderen.

Oplossingen:

•Altijd afmetingen specificeren voor afbeeldingen en video’s.

Codevoorbeeld:

<img src="image.jpg" width="600" height="400" alt="Afbeelding beschrijving">

•CSS-aspect-ratio gebruiken voor responsieve afbeeldingen en containers.

.image-container {
  aspect-ratio: 16 / 9;
}

•Vermijd laate netwerkverzoeken die de lay-out kunnen aanpassen. Dit kan bijvoorbeeld worden opgelost door kritieke CSS inline te plaatsen of externe resources asynchroon te laden.

Codevoorbeeld:

<link rel="stylesheet" href="global.css" media="print" onload="this.media='all'">

3. Verminder ongebruikte JavaScript en CSS

Er is potentieel 916 KB te besparen door ongebruikte JavaScript te minimaliseren. Dit vertraagt de laadtijd en kan de prestaties verbeteren.

Oplossingen:

•JavaScript minificeren en tree-shaking gebruiken om ongebruikte code te verwijderen.

Codevoorbeeld (Rollup of Webpack):

// In Rollup-configuratie
treeshake: {
  moduleSideEffects: false,
}

•Ongebruikte CSS verwijderen: Als bepaalde CSS niet gebruikt wordt op specifieke pagina’s, overweeg dan om het te verwijderen of te beperken tot alleen waar nodig.

4. Beeldformaten optimaliseren

Je hebt 1,290 KB aan besparing door afbeeldingen in moderne formaten zoals WebP te serveren in plaats van oudere formaten zoals JPG of PNG.

Oplossingen:

• Serveer afbeeldingen in moderne formaten zoals WebP of AVIF.

Codevoorbeeld:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Afbeelding beschrijving">
</picture>

5. Tekstcompressie inschakelen

Tekstbestanden zoals JavaScript en CSS zouden gecomprimeerd moeten worden (bijv. Gzip of Brotli) om bandbreedte te besparen.

Oplossing:

•Stel servercompressie in met bijvoorbeeld Gzip of Brotli.

Apache-configuratievoorbeeld:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

Nginx-configuratievoorbeeld:

gzip on;
gzip_types text/plain text/css application/json application/javascript;

6. Render-blocking resources elimineren

Er zijn render-blocking resources gevonden (CSS/JS) die de First Contentful Paint vertragen. Je kunt deze optimaliseren door kritieke CSS inline te plaatsen en niet-essentiële JS asynchroon te laden.

Oplossingen:

• Inline critical CSS en andere CSS asynchroon laden.

Codevoorbeeld:

<style>
  /* Kritieke CSS inline */
</style>
<link rel="stylesheet" href="global.css" media="print" onload="this.media='all'">

•JavaScript asynchroon of uitgesteld laden.

Codevoorbeeld:

<script src="script.js" async></script>