Voor de echte die-hards die nog verder willen gaan met optimaliseren heb ik een blog geschreven welke nog meer geavanceerde technieken uitleggen. De belangrijkste stappen die je kunt maken worden in de eerdere artikelen uitgelegd, maar als je de laatste paar procent ook nog wilt pakken, dan kunnen deze technieken ook nog helpen:

• Critical CSS
• Pre party

Dit artikel hoort bij een reeks van 5 artikelen over WordPress performance optimalisatie:

1. Afbeeldingen optimaliseren
2. Caching gebruiken
3. Code optimaliseren
4. Server instellingen verbeteren
5. Geavanceerde technieken

De ideale manier op een website in te laden

Om te begrijpen waarom de technieken die we in deze blogpost gaan bespreken belangrijk zijn moet je eerst begrijpen hoe een website ingeladen wordt. Aan de hand daarvan kunnen we begrijpen hoe we dit kunnen verbeteren.

1. De website wordt opgevraagd van de server en deze reageert met een reactie in de vorm van een HTML bestand.
2. In dit HTML bestand staan referenties naar externe scripts, zoals CSS en Javascript. Deze worden vervolgens gedownload door de browser.
3. De pagina wordt gerenderd (getekend) op je scherm aan de hand van de HTML, CSS en Javascript.

In een ideale wereld laden we dingen pas in wanneer we ze nodig hebben en dingen die heel belangrijk zijn worden juist zo snel mogelijk ingeladen. Bestanden die we in de toekomst waarschijnlijk nodig gaan hebben worden alvast vooringeladen, maar pas als de belangrijkste dingen al ingeladen zijn. Kortom er zit een bepaalde hierarchie in de manier waarop dingen ingeladen moeten worden. Een voorbeeld van zo’n laadhierarchie is:

1. De HTML
2. De CSS die direct zichtbaar is
3. De Javascript die direct nodig is
4. Afbeeldingen die direct zichtbaar zijn
5. De CSS die pas later nodig is
6. De Javascript die pas later nodig is
7. De HTML, CSS en Javascript van pagina’s die pas later nodig zijn

In de browser wordt daadwerkelijk een prioriteit gegeven aan bepaalde onderdelen en je kunt hier zelf ook invloed op uitoefenen.

Laten we beginnen met de belangrijkste verbeteringsslag, Critical CSS.

Eerst de kritieke CSS inladen, daarna pas de rest

Wanneer je een website bekijkt zul je meestal niet direct de volledige website in je scherm hebben, maar alleen een gedeelte. Dit eerste gedeelte noemen we “above the fold” of boven de vouw. Het is mogelijk om alleen de CSS (de stijldefinities die verantwoordelijk zijn voor lettertype, positionering, etc.) in te laden die nodig is om de website  “above the fold” weer te geven (de kritieke CSS) en daarna pas de volledige CSS.

Om deze kritieke”CSS te genereren kun je gebruik maken van een plugin, maar helaas zijn hier wel kosten aan verbonden. Je moet eerst de plugin Autoptimize installeren (https://nl.wordpress.org/plugins/autoptimize/) en daarna kun je onder de instellingen een API-sleutel toevoegen van een betaalde dienst genaamd CriticalCSS.com. Je kunt deze key aanvragen via www.criticalcss.com.

Wat deze plugin doet is dat het de kritieke CSS van alle pagina’s genereert en deze plaatst op de juiste plek. Ook zorgt het ervoor dat de overige CSS later wordt ingeladen dan normaal. Het verlaagt als het ware de prioriteit voor het inladen van de CSS.

De Pre Party: Preload, prefetch, preconnect en prerender

Om de juiste dingen op het juiste moment in te laten laden kun je de browser hints geven. Hierdoor kan de browser in sommige gevallen dingen sneller inladen. Om deze hints te kunnen geven gebruiken we 4 verschillende Pre-tags. Het is mogelijk om deze met een plugin in te voeren.

Begin met het installeren van de plugin Pre* Party Resource Hints (https://wordpress.org/plugins/pre-party-browser-hints/). Nadat je deze plugin hebt geïnstalleerd en hebt geactiveerd kun je naar de voorpagina van je website gaan. Nu wordt er automatisch een scan gedaan van de website en gekeken welke externe scripts er ingeladen worden. Aan de hand hiervan worden er prefetch tags toegevoegd aan jouw website. Hieronder leg ik uit wat de verschillende tags betekenen.

Preload

Dit kun je gebruiken voor bestanden die pas later “ontdekt” worden door de browser, maar die wel belangrijk zijn om direct in te laden. Veruit het meest voorkomende voorbeeld hiervan zijn webfonts. Vaak worden deze ingeladen via de CSS en deze worden pas vrij laat ontdekt door de browser. Door een preload tag toe te voegen met dit bestand kun je de prioriteit hiervan verhogen.

Om erachter te komen of jouw website gebruik maakt van webfonts moet je je website openen in Google Chrome en vervolgens met de rechtermuis klikken en “Inspect” selecteren. 

Vervolgens kun je op het tabblad “Network” klikken en hier “Font” selecteren bij de filters. Vernieuw vervolgens de pagina en nu worden hier de fonts weergegeven die ingeladen worden op jouw website.

Nu gaan we deze fonts preloaden door naar de plugin te gaan. Klik op Pre* Party in de backend van WordPress en scroll naar onderen totdat je “Add New Resource Hint” krijgt te zien. Hier kun je vervolgens de verschillende Pre-tags toevoegen.

Om de juiste preload tag toe te voegen doe je het volgende:

• Domain or URL: Kopieer hier het font dat je zojuist hebt ontdekt via Google Chrome. Klik op de font en kopieer de tekst naar “Request URL”
• Selecteer vervolgens: Preload
• Crossorigin moet aangevinkt zijn (!)
• As: font
• Mime Type: font/woff of font/woff2, afhankelijk van de extensie van het bestand
• Media Attribute kun je leeg laten

Klik vervolgens op “Insert Resource Hint” en herhaal voor elke font die je hebt ontdekt.

Preconnect

Preconnect wordt gebruikt om verbinding te maken met een extern bestand die ingeladen moet worden voordat deze daadwerkelijk “ontdekt” is door de browser. Dit betekent dat we al eerder verbinding kunnen maken met de juiste server en dat scheelt tijd wanneer dit bestand daadwerkelijk gedownload moet worden.

Het goede nieuws is dat de plugin die we hebben geïnstalleerd dit al gedetecteerd heeft voor ons. Je zult in de backend van WordPress onder Pre* Party wellicht al zien dat hier een aantal “preconnect” regels in staan.

Wanneer dit niet het geval is kun je naar de voorpagina van je website gaan, refreshen en even 6 seconde wachten. Als de regels er dan nog steeds niet instaan maakt jouw website misschien geen gebruik van externe bronnen. De meest voorkomende externe bronnen zijn gerelateerd aan tracking scripts van Google, Facebook, Hotjar, etc.

Het is mogelijk om ook hier handmatig scripts aan toe te voegen, mochten deze niet opgepikt zijn door de plugin. Dit kan bijvoorbeeld voorkomen wanneer je gebruik maakt van Google Tag Manager om scripts in te laden.

Prefetch

Prefetch lijkt op Preload, maar wordt gebruikt voor bestanden die pas later nodig zijn. Bij Preload wil je dus op de pagina zelf iets zo snel mogelijk in laten laden, maar prefetch gebruik je om bestanden in te laden die later pas van pas komen, bijvoorbeeld als je naar een andere pagina gaat.

De plugin maakt het mogelijk om standaard alle links die in het scherm staan te prefetchen. Dit houdt in dat er alvast verbinding wordt gemaakt met de pagina’s die achter die links staan, zodat hier sneller mee verbonden wordt wanneer je er op klikt. Dit geldt dus alleen voor links die op dat moment zichtbaar zijn. Als je naar beneden scrollt worden eventuele extra links toegevoegd.

Je kunt dit aanzetten in de plugin door de onderstaande configuratie over te nemen. Let op! Gebruik dit alleen als jouw website niet al te veel links heeft, want het zorgt wel voor een zwaardere belasting van jouw server.

Prerender

Prerender is de zwaarste variant van alle Pre-tags en moet ook met de nodige voorzichtigheid benaderd worden. Het zorgt ervoor dat een bepaalde pagina, inclusief alle bestanden alvast ingeladen wordt terwijl de gebruiker nog aan het browsen is. Je kunt maximaal 1 prerender tag toevoegen via de plugin.

Je kunt dit handmatig toevoegen via de “Add New Resource Hint” met de volgende variabelen:

• Domain or URL: De pagina die je altijd wilt voorladen op elke pagina. Dit kan bijvoorbeeld je belangrijkste landingspagina zijn.
• Selecteer hier Prerender
• Crossorigin mag uit
• As: mag leeg blijven
• Mime Type: mag leeg blijven
• Media Attribue: mag leeg blijven

Wanneer je, na het opslaan van deze instellingen, nu jouw website bezoekt, je even wacht en vervolgens de desbetreffende pagina bezoekt, zul je merken dat deze zeer snel opent. 

Mijn advies is om dit alleen te gebruiken wanneer jouw website een heel duidelijke pagina heeft waar de meeste mensen naartoe gaan. Je kunt dit bijvoorbeeld achterhalen via Google Analytics. 

Er is een mogelijkheid om via de betaalde versie van de plugin dit per pagina te laten bepalen aan de hand van Google Analytics, mocht je daarin geïnteresseerd zijn.

Conclusie

We hebben gekeken naar nog twee geavanceerde technieken die je kunt gebruiken om de snelheid van jouw WordPress website te verbeteren: Critical CSS en Pre party. Hoewel deze technieken in sommige gevallen veel kunnen opleveren zijn ze van ondergeschikt belang aan de overige technieken die ik deze reeks heb besproken.

Als jij alle technieken uit deze blogreeks toepast zul je zeker goede vooruitgang moeten kunnen boeken in de snelheid van jouw WordPress website. Ik ben benieuwd welke scores jij hebt kunnen bereiken!

Als je hulp nodig hebt bij het optimaliseren van jouw website help ik jou daar natuurlijk graag mee verder. Klik hier om een vrijblijvend kennismakingsgesprek af te spreken.