Les 5 van 5

Les 5: Snelheid, prestaties en bekende valkuilen

Divi heeft de reputatie zwaar te zijn — en dat is niet geheel onterecht. Een ongeoptimaliseerde Divi-site laadt traag. Maar met de juiste instellingen is een snelle Divi-site zeker haalbaar. In deze les behandelen we de belangrijkste prestatieoptimalisaties.

Divi’s ingebouwde performance-instellingen

Ga naar Divi → Thema-opties → General → Performance. De belangrijkste opties:

  • Enable Static CSS File Generation: Schakel in. Divi genereert dan één gecombineerd CSS-bestand in plaats van meerdere inline stijlen. Dit verkleint de paginagrootte aanzienlijk.
  • Defer jQuery Loading: Schakel in. jQuery laadt dan na de pagina-inhoud zodat de pagina sneller zichtbaar is.
  • Critical CSS: Divi genereert kritieke CSS die above-the-fold sneller toont. Schakel in.
  • Dynamic CSS: Schakel in voor kleinere CSS-bestanden.

Afbeeldingen optimaliseren

De grootste oorzaak van trage Divi-sites zijn te grote afbeeldingen. Divi laadt achtergrondafbeeldingen van secties ook op mobiel — ook als ze op mobiel verborgen zijn. Gebruik voor elke sectie-achtergrond een gecomprimeerde versie van maximaal 200-400 KB.

Gebruik de plugin Smush of ShortPixel om afbeeldingen automatisch te comprimeren bij het uploaden. Overweeg ook het WebP-formaat — 30-40% kleiner dan JPEG bij vergelijkbare kwaliteit.

Caching instellen

Divi werkt goed met cacheplugins, maar er zijn specifieke instellingen om te controleren:

  • Sluit de Divi Builder-CSS niet uit van caching
  • Leeg de cache altijd na het opslaan van Divi-pagina’s — anders zie je mogelijk de oude versie
  • Divi heeft een eigen “Clear Divi Builder Cache”-knop in het dashboard (Divi → Thema-opties → Builder → Clear Cache)

Bekende valkuilen

Teveel modules op één pagina

Elke module voegt JavaScript en CSS toe. Een pagina met 50+ modules laadt merkbaar trager. Gebruik de Theme Builder om herhalende secties (header, footer, CTA) slechts één keer te bouwen.

Divi en caching-plugins

Sommige cacheplugins minificeren JavaScript op een manier die conflicteert met Divi. Als na het inschakelen van JS-minificatie je pagina kapot gaat, sluit dan Divi’s JavaScript-bestanden uit van minificatie.

Inline CSS overload

Elke module-instelling (kleur, grootte, marge) wordt als inline CSS in de HTML geplaatst — tenzij Static CSS File Generation is ingeschakeld. Zonder die instelling groeit je HTML onnodig groot.

Opdracht

Meet de snelheid van je Divi-site via PageSpeed Insights. Schakel daarna alle performance-opties in via Divi → Thema-opties → Performance. Meet opnieuw. Noteer het verschil in score.