Doelstelling
Zelfs met een cache plugin blijft de Elementor website langzaam volgens de PageSpeed Insights test van Google en Lighthouse in Google Chrome. De website maakt ook gebruikt van de gratis Cloudflare proxy en CDN service.
Het doel is om zowel de mobiele als desktop versie een goede performance score te geven. De slechte score wordt voornamelijk veroorzaakt door grote hoeveelheid niet gebruikte JavaScript en CSS.
Achtergrond informatie
Elementor is een WordPress drag-and-drop editor, waarmee je op een eenvoudige en snelle manier prachtige WordPress-websites kunt maken. De classic WordPress editor is prima voor eenvoudige website, maar biedt zonder PHP en HTML/ CSS kennis niet veel ontwerpopties. Je kunt pas zien hoe je ontwerp eruit zal zien als je op de voorbeeldknop klikt.
Cloudflare is een bedrijf dat diensten levert zoals DNS, een content delivery network (CDN) en vele andere diensten om websites sneller en veiliger te maken. Cloudflare plaatste een eigen dienst tussen de website en de webserver in de vorm van een enorm wereldwijd netwerk. Bezoekers van websites communiceren niet meer rechtstreeks met de server, maar met het Cloudflare-netwerk, dat al een keer alle informatie van de website heeft opgeslagen en per locatie laadt.
Gutenberg is de codenaam voor de nieuwe op blokken gebaseerde editor die is geïntroduceerd in WordPress 5. Het vervangt de klassieke WordPress editor die is gebouwd op TinyMCE. Het nieuwe systeem is gemaakt om het bouwen van een website een stuk eenvoudiger te maken. In plaats van handmatig HTML- en CSS-code te schrijven, is Gutenberg ontworpen om voor niet-technische gebruikers zelf pagina’s te maken. Om een pagina in Gutenberg te maken, hoef je alleen blokken te slepen en neer te zetten.
Oplossing
Omdat Gutenberg onderdeel is van de core van WordPress, is gekozen om de site na te maken met Gutenberg blokken. Zonder HTML en CSS kennis is een page builder zoals Elementor nog krachtiger. Omdat zowel HTML/CSS en PHP voor ons geen probleem is, hebben we gekozen voor Gutenberg. Omdat Gutenberg onderdeel is van de WordPress core, is vooral performance een groot voordeel. We hebben alleen voor een zelf ontwikkelde project registratie plugin met react.js een eigen custom Gutenberg block gemaakt.
