Divi heeft de reputatie zwaar te zijn. Die reputatie stamt grotendeels uit de tijd vóór versie 4.10, toen het thema op elke pagina alle stijlen laadde, ongeacht wat er op die pagina stond. Sindsdien is er veel veranderd, maar op sites die al een paar jaar meegaan staan de nieuwe instellingen vaak nog uit. De eigenaar merkt dat de site traag is, installeert een snelheidsplugin bovenop het thema en maakt het daarmee soms erger.

Divi sneller maken begint daarom niet bij een plugin, maar bij het scherm dat Elegant Themes zelf heeft ingebouwd. In dit artikel loopt u die instellingen langs, met per schakelaar wat hij doet en waar u op moet letten. Daarna volgen de zaken die buiten het thema liggen maar wel meewegen.

Het prestatiescherm van Divi

U vindt het onder Divi, dan Theme Options, dan het tabblad Performance. Er staan acht à negen schakelaars. Op een nieuwe installatie staan ze aan; op een oudere site vaak niet, omdat ze bij een update niet met terugwerkende kracht worden ingeschakeld.

  • Dynamic CSS. De belangrijkste van allemaal. In plaats van het complete stijlbestand van ruim achthonderd kilobyte laadt Divi alleen de opmaak van de modules die daadwerkelijk op de pagina staan. Op een eenvoudige pagina blijft daar zomaar vijftig kilobyte van over. Zet deze als eerste aan.
  • Dynamic Module Framework. Hetzelfde principe, maar dan voor de PHP-code. Alleen de modules die u gebruikt worden geladen. Dit verlaagt het geheugengebruik en versnelt het opbouwen van de pagina.
  • Dynamic Icons. Laadt alleen de pictogrammen die op de pagina voorkomen, in plaats van de complete verzameling.
  • Defer jQuery and jQuery Migrate. Stelt het laden van jQuery uit tot na de pagina-opbouw. Levert winst op, maar kan botsen met plugins die jQuery direct verwachten. Zet deze aan en klik daarna uw formulieren, menu’s en pop-ups na.
  • Critical CSS. Divi bepaalt welke opmaak nodig is voor het zichtbare deel van de pagina en laadt de rest later. Dit is de schakelaar die het meest oplevert en het vaakst voor kleine schoonheidsfoutjes zorgt. Test hem grondig, vooral op mobiel.
  • Defer Additional Stylesheets en Defer Gutenberg Block CSS. Beide veilig aan te zetten op vrijwel elke site.
  • Improve Google Fonts Loading en Load Google Fonts Locally. De tweede zet de lettertypen op uw eigen server. Dat is sneller en prettiger voor de privacywetgeving.
  • Limit Google Fonts Subsets. Laadt alleen de tekensets die u nodig hebt. Voor een Nederlandse site is Latijn ruim voldoende.

Zet ze niet allemaal tegelijk aan. Doe er twee, leeg de cache, klik de site door, ga dan verder. Als er iets breekt, weet u dan meteen wat het was.

Waar Divi-sites in de praktijk op vastlopen

Buiten het prestatiescherm zijn er vier dingen die wij telkens terugzien bij trage Divi-installaties.

Ten eerste de overdaad aan secties. Divi maakt het makkelijk om rij na rij toe te voegen, en een homepage van veertien secties met elk een achtergrondafbeelding is geen uitzondering. Elke sectie kost HTML, opmaak en vaak een afbeelding. Vraag u af of de bezoeker sectie negen tot en met veertien ooit ziet.

Ten tweede de slider bovenaan. Divi’s fullwidth slider laadt alle beelden tegelijk, ook die van dia’s die pas na tien seconden verschijnen. Dat is precies het element dat uw belangrijkste snelheidscijfer verpest. Eén stevige afbeelding werkt bijna altijd beter, ook voor de conversie.

Ten derde animaties bij het scrollen. Ze staan er vaak op tientallen modules tegelijk. Ze kosten rekentijd op de telefoon en zorgen ervoor dat inhoud pas verschijnt als de bezoeker er al langs is.

Ten vierde de dubbele optimalisatie. Divi doet met Critical CSS en het uitstellen van scripts al ongeveer hetzelfde als een snelheidsplugin. Staan ze allebei aan, dan verwerkt de site dezelfde bestanden twee keer en gaan de instellingen door elkaar lopen. Dit is de meest voorkomende oorzaak van “ik heb alles aangezet en het is trager geworden”. Meer daarover leest u in ons artikel over het stapelen van optimalisatieplugins.

Divi naast een cacheplugin

Betekent het bovenstaande dat u geen cacheplugin moet gebruiken? Nee. Paginacache is een andere laag dan wat Divi doet, en die wilt u wel. Wat u niet wilt, is dat de plugin óók CSS gaat samenvoegen, kritieke opmaak gaat bepalen en scripts gaat uitstellen.

De praktische verdeling die bij ons doorgaans goed uitpakt: Divi regelt de opmaak en de lettertypen, de cacheplugin of uw hostingpartij regelt de paginacache en de browsercache. Alles wat met samenvoegen en uitstellen te maken heeft, zet u aan één kant aan en aan de andere kant uit. Welke kant maakt minder uit dan de consequentie. Wilt u eerst begrijpen welke lagen er allemaal spelen, lees dan ons stuk over de vier lagen caching in WordPress.

Onderhoud dat u niet vergeet

Twee dingen die na een tijd gaan knellen. Divi bewaart de gegenereerde CSS-bestanden in een map op uw server. Na jaren staan daar duizenden bestanden van pagina’s die allang niet meer bestaan. In het prestatiescherm zit een knop om die opslag te legen; doe dat een paar keer per jaar, en zeker na een grote wijziging aan het ontwerp.

Daarnaast bewaart Divi, net als Elementor, een revisie bij elke opslagbeurt van de paginabouwer. Die revisies bevatten de complete opmaak van de pagina en zijn dus fors. Beperk het aantal bewaarde revisies en ruim de bestaande op. Op een site van drie jaar oud is het niet ongewoon dat dit de databaseomvang halveert.

Een praktijkvoorbeeld

Een aannemersbedrijf uit Tilburg had een Divi-site uit 2021 die nooit was bijgewerkt qua instellingen. De homepage laadde op mobiel in ruim negen seconden. Er stonden twee snelheidsplugins actief, allebei met samenvoegen aan.

De aanpak: beide plugins vervangen door één die alleen paginacache doet, alle prestatie-instellingen in Divi aangezet, de slider met vier dia’s vervangen door één afbeelding, en de CSS-opslag geleegd. De laadtijd op mobiel kwam uit rond de 3,4 seconden. De site ziet er nagenoeg hetzelfde uit; alleen de slider is weg, en dat vond de eigenaar achteraf een verbetering.

Wanneer u er iemand bij haalt

De schakelaars in het prestatiescherm kunt u zelf aanzetten, mits u een back-up hebt en de tijd neemt om na elke wijziging te controleren. Ga voorzichtig om met Critical CSS en het uitstellen van jQuery; dat zijn de twee die opmaak en functionaliteit kunnen breken.

Lastiger wordt het als de site aangepaste CSS bevat van een eerdere bouwer, of als er een kindthema met eigen code onder ligt. Dan kan het uitzetten van de oude stijlbestanden onbedoeld dingen slopen. Blijft de site na alle instellingen traag, of durft u de knoppen niet aan te raken, dan is het verstandig dit op een oefenomgeving te laten doen, bijvoorbeeld binnen een eenmalige snelheidsoptimalisatie.

Uw eerste stap

Open vandaag nog Divi, dan Theme Options, dan Performance. Kijk of Dynamic CSS aanstaat. Staat hij uit, dan zet u hem aan, leegt u de cache en meet u opnieuw. Bij veel oudere sites is dat in één handeling de grootste verbetering van het hele lijstje.