WP Rocket-tutorial om de snelheid van je website te optimaliseren

Wat is WP Rocket?

WP Rocket is een plugin die werd geboren als een oplossing voor de verschillende cache-optimalisaties in WordPress. Vandaag is het veel meer, en kunnen we niet alleen cache optimaliseren, maar praktisch alles wat te maken heeft met optimalisatie van website-laadprestaties.

Om de impact ervan te demonstreren, kijk eens naar de prestaties van onze eigen site MET en ZONDER WP Rocket:

Waarom WP Rocket gebruiken?

Hoewel we hebben gezegd dat er andere alternatieven zijn voor WPO-optimalisatie, en iedereen vrij is om te gebruiken wat hem of haar het beste lijkt, hebben we in ons geval een speciale voorkeur voor WP Rocket. Zijn intuïtieve interface die werkt met een klik op een checkbox, de meerdere opties die het biedt voor cache-configuratie en het laden van resources, maken WP Rocket onze favoriet onder alle opties.

WP Rocket Hoofdmenu

Aangenomen dat we geen problemen hebben gehad bij het installeren van WP Rocket, laten we beginnen met het uitleggen van zijn interface en de verschillende opties die beschikbaar zijn voor optimalisatie. Wanneer je op het dashboard-tabblad klikt, verschijnt het volgende scherm:

Een welkomstbericht en opties die we aanvankelijk met rust kunnen laten, maar die we hier zullen uitleggen.

Mijn Account

Als je WP Rocket hebt gekocht, brengt het vakje "View my account" je naar de WP Rocket-gebruikerspagina, zodat je daar alles kunt invullen en controleren met betrekking tot je gebruikersprofiel: gegevens, facturering, etc.

RocketCDN

RocketCDN is een CDN-service die WP Rocket relatief recent aanbiedt. Het doel is om de nodige tools te bieden om de beste prestaties te bereiken zonder dat je naar oplossingen buiten de plugin hoeft te zoeken. Er zijn andere zeer populaire en even effectieve CDN-services zoals Cloudflare of Amazon CloudFront.

Mijn Status

Binnen deze optie hebben we twee schakelaars om in te schakelen:

• ›

  Rocket Tester: dit is het WP Rocket-verbeteringsprogramma voor het testen van hun BETA-versies. Je moet contact met hen opnemen via e-mail.

• ›

  Rocket Analytics: Je gaat ermee akkoord om je WordPress-prestatiegegevens anoniem te delen met het ontwikkelingsteam om WP Rocket te helpen verbeteren.

Hier is weinig te zeggen, dit is een persoonlijke beslissing die geen invloed zou moeten hebben op de prestaties.

Cache-configuratie in WP Rocket

Het is tijd om in de configuratie-opties te duiken en we beginnen met de cache:

In het tweede tabblad van de plugin kunnen we zien welke cache-opties het ons biedt. Laten we onthouden dat we in WP Rocket de paginacache optimaliseren en, zoals we nu zullen zien, hebben we ook een optie voor ingelogde gebruikers, maar we moeten voorzichtig zijn met deze optie.

Mobiele cache

Normaal gesproken, wanneer we het over mobiel hebben, bedoelen we ook tablets, maar deze keer hebben we het alleen over mobiele apparaten. WP Rocket detecteert via de user agent dat we browsen vanaf smartphones.

We zullen deze optie altijd inschakelen, want als algemene regel zijn desktop- en mobiele ontwerpen verschillend, tenzij we geen responsive versie hebben, zal deze optie altijd ingeschakeld zijn. Om het duidelijk te maken, waarom zouden we 2 cached versies willen geleverd krijgen als het ontwerp hetzelfde was? Met andere woorden, als we geen mobiele versie hadden, zouden we niet willen dat deze cache anders wordt behandeld, toch?

Hier wordt een uitzondering aan toegevoegd. Wanneer we een mobiele versie hebben met resources of elementen die alleen in die versie laden, zullen we bestanden afzonderlijk opslaan.

Voorbeeld:

• ›We hebben een advertentie die op mobiel een JS laadt die de desktop-versie niet heeft.

In dit geval zouden we inderdaad afzonderlijke bestanden voor mobiel opslaan.

Gebruikerscache

Gebruikerscache is een optie die WP Rocket biedt voor die gebruikers die browsen terwijl ze ingelogd zijn.

Door deze optie te activeren, kunnen we een geïndividualiseerde cache-versie aanbieden voor elke gebruiker. Het beste is om het in te schakelen als gebruikers inloggen, maar je moet bijzonder voorzichtig zijn met welke pagina's worden gecached en welke niet, want als de gebruiker persoonlijke gegevens invoert (bijvoorbeeld bankgegevens), kan het opslaan ervan in de cache ons juridische problemen bezorgen.

Hoe sluit je een pagina uit van caching?

Als je problemen van dit type wilt voorkomen, is het beste om direct naar de pagina te gaan die je wilt uitsluiten en in de WP Rocket-opties (zijbalk of onderaan) "never cache this page" te selecteren.

Cache Lifespan

In deze sectie hoeven we alleen maar de duur aan te geven die we willen voor de cachebestanden die worden gegenereerd. Dat wil zeggen, WP Rocket genereert een bestand dat de versie van je pagina opslaat, en dit bestand zal degene zijn die aan de gebruiker wordt geleverd bij het bezoeken van de website.

Via een procesmanager (CRON) zullen gegenereerde bestanden die de aangegeven duur overschrijden, worden verwijderd en zullen er nieuwe worden gemaakt.

Dingen om in gedachten te houden

WP Rocket houdt al rekening met bepaalde processen om nieuwe cachebestanden te verwijderen en te genereren, namelijk:

• ›

  Het genereren van nieuwe entries, pagina's, categorieën, taxonomieën of bewerkingen

• ›

  Het genereren en bewerken van nieuwe modules, widgets of enig element van de website

• ›

  Wanneer WP Rocket-configuraties die de frontend beïnvloeden worden gewijzigd.

Daarnaast moet je in gedachten houden dat het opslaan van cachebestanden ruimte op je server inneemt en deze ruimte beperkt is. Het is ook raadzaam om de cache vanuit WP Rocket leeg te maken zodat het wordt bijgewerkt en er geen bestanden achterblijven die niet meer nodig zijn.

Wat de tijd betreft, kun je de standaardwaarde laten staan.

Bestandsoptimalisatie in WP Rocket

Na de cache-configuratie kort doorgenomen te hebben, is het tijd om aan bestandsoptimalisatie te werken. Bestandsoptimalisatie wordt gedaan om het laden en renderen van HTML te verlichten. Hoe kunnen we aan deze optimalisatie werken?

Op verschillende manieren:

• ›

  Door het gewicht van bestanden te verminderen

• ›

  Door onnodige bestanden te verwijderen, en

• ›

  Door bestanden geleidelijk uit te voeren wanneer ze nodig zijn.

CSS-bestanden

CSS-bestanden zijn verantwoordelijk voor het visuele deel van de website. De stylesheets die vorm, kleur en stijl geven aan onze WordPress. In dit aspect kan een aantrekkelijk ontwerp niet een geoptimaliseerd ontwerp zijn, omdat de ontwerper bij het bouwen van de CSS mogelijk geen reeks basisoptimalisatieregels heeft gevolgd.

Onder de meest voorkomende problemen die we meestal tegenkomen met stylesheets zijn:

• ›

  Zware CSS-bestanden

• ›

  CSS-bestanden die laden op pagina's die deze stijlen niet gebruiken

• ›

  Slecht gebouwde CSS-bestanden

• ›

  Te veel externe CSS laden

• ›

  @import gebruiken om externe stylesheets binnen te halen

Kortom, er is een wereld aan praktijken die vaak worden gebruikt en niet aan te raden zijn voor de optimalisatie van een goed ontwerp, maar laten we naar het punt komen wat WP Rocket ons biedt.

CSS-bestanden minificeren

Deze optie heeft als doel het gewicht van CSS-bestanden te verminderen door spaties en regelovergangen te verwijderen. WP Rocket implementeert het door de checkbox te activeren.

SEO Alive Tip: Telkens wanneer we een actie uitvoeren, is het een goed idee om te proberen de website te laden om te zien of alles correct is, doe het in de incognitomodus van de browser.

Het proces wordt weergegeven in de volgende afbeelding van de minifier.org-tool.

CSS-bestanden combineren

Deze feature voert een soort "kopiëren en plakken" uit van de code van het ene CSS naar het andere om het laden van meerdere CSS-bestanden te voorkomen en slechts één te hebben.

Het is raadzaam om te blijven testen, omdat het sterk afhangt van hoe het thema is ontwikkeld, want als ik een CSS-bestand heb dat alleen op een specifiek type pagina laadt, wat ik niet wil is dat die code in een enkel bestand op alle pagina's wordt geladen.

Het ideale is om de code te laden die door de URL wordt gebruikt. Vink het vakje aan en test met een tool zoals GTMETRIX om te zien of je de laadsnelheid hebt verbeterd.

Het voordeel van het combineren van CSS-bestanden is het verminderen van requests naar de server.

CSS-laden optimaliseren

WP Rocket is bijgewerkt rekening houdend met de aanbevelingen die door verschillende Google-tools worden gegeven voor optimalisatie van laadsnelheid. Als we al ervaring hebben met deze tools, zijn we zeker de waarschuwing "Eliminate render-blocking resources" tegengekomen. Door deze check te activeren, voorkomen we dat CSS het laden blokkeert door het asynchroon te laten laden.

Dat wil zeggen, de HTML-rendering stopt niet wanneer het CSS-bestand moet worden gedownload; dit bestand laadt op de achtergrond, waardoor wordt voorkomen dat het laadproces wordt onderbroken. Dus het is de moeite waard om het in te schakelen.

JS-bestanden (JavaScript)

JavaScript is een van de grote problemen geweest die Google is tegengekomen bij het verwerken van HTML. Zonder al te diep in dit type taal te duiken, heeft WP Rocket 5 basisacties ontworpen voor het optimaliseren van dit type bestand. Laten we eens kijken!

jQuery Migrate verwijderen

jQuery Migrate is een JavaScript-bibliotheek die compatibiliteit mogelijk maakt met jQuery-code ontwikkeld voor versies van jQuery vóór 1.9. Deze bibliotheek komt natively in WordPress maar heeft praktisch geen gebruik (sommige plugins kunnen het nodig hebben).

Met deze actie willen we een onnodige request en het laden van een JS dat niet zal worden gebruikt vermijden. Schakel het uit en navigeer door je website om te zien of alles correct werkt!

JavaScript-bestanden minificeren

Net als wat werd uitgelegd met CSS-bestanden, zou deze actie worden toegepast op JS-bestanden, waardoor de grootte van JS-bestanden licht wordt verminderd.

JavaScript-bestanden combineren

Een andere actie vergelijkbaar met de CSS-optimalisatiemodule. Onthoud dat wanneer we deze checkboxes activeren, we moeten verifiëren of alles werkt zoals voorheen.

JavaScript-bestanden uitgesteld laden

De check op deze actie maakt twee verbeteringen in prestaties:

• ›

  Het voegt het "defer"-attribuut toe aan de JS om te voorkomen dat HTML-rendering stopt vanwege een JS-load. Met deze actie downloadt het parallel en voert uit aan het einde van de HTML-verwerking.

• ›

  Het verplaatst de JS die de initiële rendering blokkeert.

WP Rocket waarschuwt ons dat dit type activering problemen kan veroorzaken, daarom introduceert het een veilige modus om laadproblemen van essentiële elementen voor de juiste visualisatie van de pagina te vermijden.

JavaScript-uitvoering uitstellen

Een andere optie om de uitvoering van JavaScript dat niet essentieel is uit te stellen tot de gebruiker met de pagina interageert. Deze actie lijkt niet erg belangrijk, maar het stelt ons in staat om tijd te winnen voor het laden om sneller te gebeuren. De interactie kan een click, scroll, muisbeweging zijn...

Media-optimalisatie

In dit tabblad behandelen we de optimalisatie van sleutelelementen in de eerste stappen van WPO-optimalisatie. We hebben het over afbeeldingen, video's, iframes en elementen ingebouwd in WordPress waarvan de functionaliteit op zijn minst twijfelachtig is.

Lazyload

Een essentiële actie in elke optimalisatie van laadsnelheid. De Lazyload-functie zorgt ervoor dat elementen zoals afbeeldingen, video's en iframes pas laden wanneer ze essentieel zijn voor weergave.

Laat me een voorbeeld geven. Terwijl we scrollen, laden afbeeldingen. Stel je voor hoe het laden van deze pagina zou zijn als 30 afbeeldingen tegelijk laadden, vooral als de gebruiker ze in eerste instantie niet eens bekijkt.

Emoji

Browsers bevatten al hun eigen emoji's, dus we kunnen die request besparen die wordt gedaan als we deze check niet activeren. Mijn aanbeveling is dat je het activeert.

Embedded Content

Voorkomt dat andere mensen content van je site embedden en voorkomt ook dat je content embedt van andere ongeautoriseerde sites. Requests gemaakt met deze JS worden verminderd.

WebP-compatibiliteit

WebP is een relatief nieuw formaat dat Google rond 2010 introduceerde, voor lossy compressie van 24-bits graphics op het web, wat de levering van deze resources verbetert om hun laden te versnellen.

Momenteel ondersteunen niet alle browsers het, dus je moet voorzichtig zijn en weten welke browser je gebruikers gebruiken bij het werken met dit formaat. Schakel deze optie in als je werkt met WebP-afbeeldingen.

Configuratie van Cache Preloading

We moeten goed begrijpen hoe de cachebestanden van WP Rocket worden gegenereerd om de Preload-functie te begrijpen.

Wanneer een gebruiker voor het eerst een pagina op onze site bezoekt, dat is wanneer de pagina wordt gecached en een cached bestand wordt gegenereerd dat aan volgende gebruikers zal worden geleverd. Hetzelfde gebeurt wanneer de cache verloopt (de tijd die we hebben bepaald) en de cached versie wordt verwijderd, of wanneer wij zelf de cache van al onze URL's leeg maken.

Preload Cache

Door de Preload-optie te activeren, zullen we een eerder gecachede versie laden, zodat zelfs de eerste gebruiker een snellere versie van onze site heeft. Deze actie wordt uitgevoerd via de sitemap-links, dus we hebben een sitemap nodig.

De sitemap is een bestand dat wordt gegenereerd waar de URL's van onze site worden getoond. Met plugins als "Rank Math" of "Yoast" kunnen we het gemakkelijk genereren. Als je wilt zien hoe je een sitemap maakt met Rank Math, hier laten we het je zien.

Preload Links

Dit is een functie die WP Rocket heeft opgenomen in zijn nieuwste versies. Het doel is om te anticiperen op het laden van de "volgende pagina's die de gebruiker gaat bezoeken". Bij het hoveren met de cursor erop, vindt de paginavoorlading plaats voor het geval de gebruiker op de link klikt.

WP Rocket heeft deze functie overgenomen die specifieke plugins zoals "Flying Pages" al implementeerden om de navigatievloeiendheid binnen de site te verbeteren (gebruikerservaring). Dat gezegd hebbende, dit is geen factor die laadtijd verbetert, en je zult de verbetering niet zien in WPO-audittool-metrics.

DNS Request Preloading

DNS request preloading komt zeer goed van pas wanneer we resources van derden gebruiken zoals YouTube, Facebook, fonts of iframes die we vaak opvragen.

Wanneer we een verbinding maken op het internet, wordt een DNS-request gedaan dat moet worden opgelost en naar de server moet worden gestuurd. Dit heeft een duur die we kunnen verbeteren als we de URL's van de nodige resources toevoegen in dit vak dat WP Rocket ons biedt.

Zoals we kunnen zien in het voorbeeld, is het alleen nodig om de domeinnaam te gebruiken //youtube.com //facebook.com

De DNS-resolutie duurt ongeveer 20 tot 120 milliseconden, zoals GTMETRIX aangeeft, de browser zal niets downloaden van de host totdat dit proces is voltooid.

Preload Fonts

Het preloaden van fonts vereist een eerdere stap, namelijk het downloaden van de fonts en deze op onze server hebben. Eenmaal daar kunnen we dezelfde actie uitvoeren als we deden met cache preload, waarbij we een veel snellere versie van het fontsbestand maken en het aan de gebruiker leveren wanneer ze verbinding maken met onze pagina.

Zodra de fonts zijn gehost, geven we WP Rocket het exacte pad van de gebruikte fonts aan. Het is aan te raden om niet te overdrijven met verschillende fonts op onze pagina's, omdat ze verschillende downloads vereisen. Merk ook op dat requests naar de server worden gemaakt met de verschillende variaties van de font, laat me uitleggen:

• ›

  Vetgedrukte font --> 1 request

• ›

  Onderstreepte font --> 1 request

• ›

  Hoofdletter-font --> 1 request

WP Rocket's geavanceerde regels configureren

Cache deze URL's nooit

Er zijn bepaalde URL's waarvan we, vanwege hun uniciteit, geen cached versie willen opslaan. Vanuit dit tabblad stelt WP Rocket ons in staat een lijst met URL's in te voeren die we nooit gecached willen hebben.

Cache deze cookies nooit

WP Rocket geeft ons een andere controletool dan dit per URL te doen. Veel plugins werken met hun eigen cookies of we kunnen zelfs onze eigen installeren om bepaalde gebruikers te identificeren; er zijn veel manieren om deze kleine bestanden te gebruiken.

Met WP Rocket kunnen we het cachen van URL's die zijn geïdentificeerd door de cookie-ID stoppen, eenmaal gedownload in de browser van de gebruiker, waardoor het type URL's dat we gecached willen hebben verder wordt aangepast.

Cache deze user agents nooit

De user agent is een beschrijvend veld binnen het HTTP-protocol, gebruikt om informatie te verstrekken over het apparaat dat een request doet. Met deze informatie kunnen we voorkomen dat gecachede pagina's aan deze user agents worden geleverd.

Een van Google's user agents is bijvoorbeeld Googlebot, dus door dit aan te geven in dit deel van het web, zullen we elke keer dat het toegang heeft tot onze website, de pagina's zonder caching aanbieden.

Purge deze URL's altijd

Deze optie is zeer interessant voor een type URL waarvan je bijvoorbeeld geïnteresseerd bent om altijd de cache-bestand verwijderd te hebben wanneer het wordt bijgewerkt.

Bijvoorbeeld, ik heb URL's met sportresultaten en wat ik niet wil is een gecachede versie aan de gebruiker leveren, omdat de resultaten zeer vaak worden bijgewerkt.

Cache deze query strings

Query strings zijn data die worden verzonden bij het maken van een request naar een webpagina via de URL.

Ze worden meestal geïdentificeerd door het vraagteken-symbool "?" en als algemene regel cached WP Rocket dit type URL niet. In deze optie kunnen we het dwingen dit te doen.

Database-configuratie met WP Rocket

Zoals we herhaaldelijk in het artikel hebben gezegd, is WP Rocket gestopt met alleen een cache-plugin te zijn om een plugin te worden voor het optimaliseren van de laadsnelheid van onze website. In deze configuratiesectie kunnen we dieper ingaan op database-optimalisatie.

Terwijl we werken aan onze content binnen WordPress, genereren we andere types informatie die niet nuttig zijn en de prestaties van onze website schaden. Hiervoor biedt WP Rocket ons deze tool om een min of meer grondige cleanup uit te voeren.

Post cleanup

Zoals we kunnen zien in de afbeelding, zijn er 3 elementen die ruimte kunnen innemen in de database zonder dat we erin geïnteresseerd zijn. Wanneer we content updaten, wordt een vorige versie opgeslagen, een auto-draft van wat we aan het bewerken zijn wordt ook gegenereerd, en weggegooide entries.

Als we deze elementen verwijderen, zullen we ruimte vrijmaken in onze database.

Comments cleanup

Dit deel is belangrijk omdat onze database soms volloopt met "spam"-comments, daarom heeft WP Rocket deze optie geïntroduceerd om dit type element op te ruimen.

Transients Cleanup

Wanneer we werken in WordPress, worden bepaalde transient-elementen gegenereerd die we zonder problemen kunnen verwijderen, omdat ze opnieuw worden gegenereerd.

Database Cleanup

Zowel dit punt als het volgende, raad ik aan om een back-up van de database te maken, want hoewel er niets zou moeten gebeuren, heeft dieper ingaan op acties binnen de database altijd zijn risico's, dus het is geen slecht idee om een back-up te maken.

Door deze check te activeren, wordt een cleanup uitgevoerd van de databasetabellen. Dit proces kan worden geautomatiseerd.

CDN configureren met WP Rocket

Voordat we dieper ingaan op hoe je CDN's configureert met WP Rocket, wil ik uitleggen wat een CDN is en waarom het wordt gebruikt.

Wat is een CDN?

Een CDN (Content Delivery Network) is een service met als doel de snelheid van contentoverdracht naar de gebruiker te verbeteren. Om dit te doen, creëert het een content-distributienetwerk in verschillende servers over de hele wereld om de tijden in de resourcerequest van de gebruiker te verkorten. Dat wil zeggen, als de gebruiker in Brazilië is, biedt een CDN de content gehost op een server dichter bij hen dan de werkelijke webhostingserver.

Afbeeldingen overgenomen van de WP Rocket-pagina

Hoe werkt een CDN?

Het werkt via deze andere servers die een gecachede kopie van de website opslaan, en wanneer de gebruiker deze content/resources opvraagt, voert een dichterbij gelegen server de overdracht uit.

Deze types services zijn zeer nuttig wanneer je zware content hebt zoals afbeeldingen, audio's, video en/of veel bezoeken. Als je in eerste instantie een website hebt met weinig bezoeken, hoef je je geen zorgen te maken over dit aspect.

RocketCDN

WP Rocket biedt ons de mogelijkheid om zijn CDN in te huren tegen een prijs van 7,99 dollar per maand, minder dan 7 euro.

CDN

Wanneer we een CDN inhuren, wordt ons informatie verstrekt om het te gebruiken. Een van deze elementen die wordt verstrekt is de CNAME, hoewel als het niet wordt verstrekt we het kunnen verkrijgen.

De CNAME is een type DNS-record dat een bron-domeinnaam toewijst aan een doel-domeinnaam

Om deze functie te gebruiken hoeven we alleen die CNAME aan te geven en te vertellen voor welke bestanden we het willen.

Bestanden uitsluiten van CDN

De volgende optie, zoals verwacht, is om die bestanden uit te sluiten die we niet door de CDN willen laten gaan.

WordPress Heartbeat-functie-optimalisatie

WordPress heartbeat is een gegevensoverdracht voor controle om communicatie tussen de backend en frontend van WordPress en de server tot stand te brengen. Dit type proces kan een van de redenen zijn waarom je traagheid in je WordPress kunt ervaren.

Onder de acties die kunnen worden beperkt zijn:

• ›

  Auto-save en revisies in de post-editor.

• ›

  Notificaties in het WordPress-administratiepaneel.

• ›

  Informatie over wie aan het bewerken is.

• ›

  Real-time data.

Als onze WordPress correct werkt, raad ik niet aan om iets te doen op dit punt, maar als we traagheid opmerken, kunnen we proberen activiteit te beperken in de verschillende opties.

WP Rocket Add-ons configureren

Er zijn bepaalde elementen zoals de Google Analytics- en Facebook-scripts, die we simpelweg door ze te activeren in dit deel van de configuratie kunnen verkrijgen een cache-versie en de prestaties verbeteren. Deze actie reageert direct op een van de requests die meestal worden aangegeven in laadsnelheid-audits zoals Pagespeed "Leverage browser caching".

Beeldoptimalisatie

Beeldoptimalisatie is een proces dat vanwege zijn complexiteit zijn eigen gids zou kunnen hebben. WP Rocket biedt een onafhankelijke plugin om met deze resources te werken. Vanuit WP Rocket hebben we toegang tot het downloaden van de "Free"-versie.

WP Rocket Tools

WP Rocket-configuraties kunnen worden opgeslagen en geïmporteerd om te voorkomen dat je opnieuw tijd aan dit proces moet besteden. Het geeft ons ook de mogelijkheid om een "Rollback" uit te voeren, d.w.z. terug te gaan in termen van de geïnstalleerde versie.

WP Rocket Tutorials

Om deze WP Rocket-gids te beëindigen, biedt de plugin zelf een reeks video's met informatie over de verschillende acties die worden uitgevoerd en hoe ze uit te voeren.

Conclusies

Zoals je hebt gezien, is WP Rocket meer dan een cache-plugin; we hebben een complete suite tot onze beschikking om de snelheid en prestaties van onze website te optimaliseren, dus nu hoeven we alleen maar de verschillende opties te proberen. Waar wacht je nog op om je WordPress te laten vliegen?

Kende je WP Rocket al? Heb je je prestaties kunnen verbeteren met deze gids? Heb je vragen? We wachten op je in de comments!