Stap voor stap uitleg bij Provisual Speed: de aanvulling op LiteSpeed Cache met critical CSS, JavaScript defer en delay, lazy-load en fontoptimalisatie. Van installeren tot en met problemen oplossen.
Inhoud
  1. Wat doet Provisual Speed?
  2. Wat heb je nodig?
  3. Installeren
  4. Licentie activeren
  5. LiteSpeed Cache controleren
  6. Zo stel je het in: stap voor stap
  7. Critical CSS
  8. JavaScript defer en delay
  9. Lazy-load
  10. Fonts
  11. Problemen oplossen
  12. Hulp nodig?
Wat doet Provisual Speed?

Provisual Speed maakt je WordPress-site sneller met technieken die een gewone cacheplugin niet of niet fijnmazig genoeg doet. Het is geen cacheplugin: het opslaan van complete pagina’s laat je over aan LiteSpeed Cache, dat dit op de server doet. Provisual Speed vult dat aan met vier onderdelen:

  • Critical CSS: de opmaak voor het zichtbare deel van de pagina staat direct in de pagina, de rest van de stylesheets laadt daarna.
  • JavaScript defer en delay: scripts laden later of pas bij de eerste klik of scroll van de bezoeker.
  • Lazy-load: afbeeldingen en iframes (video’s, kaarten) laden pas als ze in beeld komen.
  • Fonts: lettertypes worden eerder opgehaald en tonen direct tekst, zonder te wachten.

Alle onderdelen staan na de installatie uit. Je zet ze één voor één aan en test na elke stap je site. Zo zie je meteen welke instelling effect heeft, en welke eventueel iets breekt.

De plugin doet geen externe aanroepen voor de optimalisatie zelf, alleen voor de licentiecontrole en updates.

Wat heb je nodig?
  • een WordPress-site met WordPress 6.0 of nieuwer en PHP 7.4 of nieuwer;
  • de gratis plugin LiteSpeed Cache, actief op een LiteSpeed-server (aanbevolen, niet verplicht);
  • een licentiesleutel om updates te kunnen ontvangen.

De optimalisaties werken ook zonder geldige licentie. De licentie bepaalt alleen of je updates kunt downloaden.

Installeren
  1. Log in op het klantportaal van Provisual en ga naar Mijn licenties. Klik bij Provisual Speed op Download laatste versie.
  2. Ga in WordPress naar Plugins → Nieuwe plugin → Plugin uploaden en kies het zip-bestand.
  3. Klik op Nu installeren en daarna op Activeren.
  4. Ga naar Provisual Speed in het WordPress-menu.
Licentie activeren

Bovenaan de instellingenpagina staat het blok Licentie. Plak je sleutel in het veld Licentiesleutel en klik op Activeren. Daarna zie je de status en de datum waarop de licentie verloopt.

De status kan zijn:

  • Actief: alles in orde.
  • Verlopen: de licentie is niet verlengd. De optimalisaties blijven werken, maar je krijgt geen updates meer.
  • Geschorst of Ongeldig: stuur ons een supportticket.
  • Domeinlimiet bereikt: de sleutel is al op het maximale aantal sites actief. Klik op Deactiveren op een site die je niet meer gebruikt.
  • Niet geactiveerd: er is nog geen sleutel ingevuld.

Ga je verhuizen naar een ander domein? Klik dan eerst op Deactiveren op de oude site, zodat je de sleutel op de nieuwe site kunt gebruiken.

De instellingenpagina van Provisual Speed met het blok Licentie en het blok Critical CSS

De instellingenpagina onder Provisual Speed: bovenaan de licentie, daaronder Critical CSS.

LiteSpeed Cache controleren

Staat er bovenaan een oranje melding “LiteSpeed Cache niet gevonden”? Dan ontbreekt de plugin LiteSpeed Cache of is hij niet actief:

  • Draait je server wel op LiteSpeed (zoals onze hosting)? Installeer en activeer dan de gratis plugin LiteSpeed Cache. Zonder die plugin is er geen pagina-caching.
  • Draait je site niet op een LiteSpeed-server? Dan werken de onderdelen hieronder nog steeds, maar zonder pagina-caching eronder is het effect kleiner.
Zo stel je het in: stap voor stap

Sla na elke stap op met Instellingen opslaan, leeg de cache in LiteSpeed Cache en bekijk je site in een privévenster (of uitgelogd). Controleer minstens de homepage, een formulier en, bij een webshop, de winkelwagen en de kassa.

  1. Zet Lazy-load voor afbeeldingen aan. Dit is de veiligste stap.
  2. Zet Google Fonts op font-display: swap en voeg zo nodig fonts toe om te preloaden.
  3. Zet JavaScript defer aan.
  4. Zet JavaScript delay aan, de meest ingrijpende stap.
  5. Voeg tot slot Critical CSS toe, als je dat hebt.

Merk je na een stap dat iets niet meer werkt? Zet die ene instelling weer uit, of voeg het onderdeel dat misgaat toe aan de bijbehorende uitsluitlijst (zie hieronder).

Critical CSS

Critical CSS is de opmaak die nodig is om het zichtbare deel van de pagina meteen goed te tonen. Die staat dan direct in de pagina, zodat de bezoeker niet hoeft te wachten tot alle stylesheets binnen zijn.

  • Ingeschakeld: zet de functie aan. De opties hieronder werken alleen als dit vinkje aan staat.
  • Critical CSS: plak hier de CSS voor het deel boven de vouw. De plugin maakt deze niet zelf. Je genereert hem met een losse critical-CSS-tool en plakt het resultaat hier.
  • Preload overige stylesheets: de overige stylesheets laden daarna op de achtergrond, in plaats van de pagina te blokkeren.
  • Uitsluiten (handle bevat): een stylesheet dat gewoon als vanouds mag laden. Zet één naam (of een deel daarvan) per regel. admin-bar en wc- staan er al.

Zie je even een “kale” pagina voordat de opmaak verschijnt? Dan mist er CSS in je critical CSS. Vul die aan met de opmaak van het zichtbare deel, of zet de functie uit.

JavaScript defer en delay

Twee technieken om scripts de pagina minder te laten ophouden. Je kunt ze los van elkaar aanzetten.

Defer

Scripts laden tegelijk met de pagina, maar worden pas uitgevoerd als de pagina klaar is. Dat is veilig voor de meeste scripts.

Delay

Scripts worden pas uitgevoerd bij de eerste interactie van de bezoeker (scrollen, klikken, een toets of aanraking), of na ongeveer 8 seconden. Dit geeft de grootste winst, maar kan scripts breken die meteen nodig zijn.

Uitsluitlijsten

Onder beide opties staat een lijst met scripts die je uitsluit: zet per regel een script-naam of een stukje van de URL. Bij Delay staan standaard al jQuery, WooCommerce, Stripe, PayPal, reCAPTCHA en Google Analytics/Tag Manager in de lijst. Gebruik je betaalproviders, een cookiebanner of een chatwidget die niet goed werkt? Voeg die dan toe.

De blokken JavaScript defer/delay, Lazy-load en Fonts op de instellingenpagina van Provisual Speed

De blokken JavaScript defer/delay, Lazy-load en Fonts.

Lazy-load

Afbeeldingen en iframes onderaan de pagina laden pas als de bezoeker ernaartoe scrolt. Dat bespaart data en maakt de pagina sneller.

  • Afbeeldingen: bouwt voort op de ingebouwde ondersteuning van WordPress.
  • Iframes: bijvoorbeeld ingesloten video’s en kaarten.
  • Eerste N overslaan: het aantal afbeeldingen bovenaan de pagina dat nooit uitgesteld wordt (standaard 2). Zo verschijnen de belangrijkste beelden direct. Heeft je pagina een grote kop-afbeelding met daaronder meer, verhoog dit getal dan.
  • Uitsluiten (class bevat): afbeeldingen met deze CSS-class laden altijd direct. Standaard skip-lazy.
Fonts
  • Preloaden: zet per regel de URL van een lettertypebestand dat je eerder wilt laten ophalen. Een .woff2-bestand heeft de voorkeur. Doe dit alleen voor de belangrijkste fonts die bovenaan de pagina gebruikt worden.
  • Google Fonts: voegt font-display: swap toe aan Google Fonts. De tekst is dan meteen leesbaar in een standaardlettertype en schakelt over zodra het eigen lettertype binnen is. Deze optie staat standaard aan.

Lettertypes die in je thema zelf zijn opgenomen (zelf gehost) worden niet aangepast.

Problemen oplossen

Een formulier, betaling of menu werkt niet meer

Waarschijnlijk is een script uitgesteld dat meteen nodig is. Zet Delay uit om te testen. Werkt het dan weer? Zet Delay aan en voeg het script toe aan de uitsluitlijst, of laat Delay uit.

Mijn wijzigingen zie ik niet op de site

Leeg de cache in LiteSpeed Cache en bekijk de site in een privévenster. Een bezoeker kan nog de oude pagina uit zijn browser of de cache krijgen.

De pagina flitst of ziet er even kaal uit

Je critical CSS is onvolledig. Vul hem aan of zet Critical CSS uit.

Een afbeelding bovenaan de pagina verschijnt traag

Verhoog Eerste N overslaan bij Lazy-load, of geef die afbeelding de class skip-lazy.

De plugin geeft “Domeinlimiet bereikt”

Deactiveer de sleutel op een site die je niet meer gebruikt, of vraag een extra site aan via een supportticket.

Hulp nodig?

Kom je er niet uit? Stuur een supportticket via je klantportaal. Vermeld het webadres van je site en welke instelling je het laatst hebt aangepast.

Wijzigingen per versie
Interne efficientieverbetering: licentie-/update-check laadt niet meer mee op front-end paginas.

Komt je hier niet uit? Stuur ons een supportticket.