Door CLS Trainingen – De snelheid van een website is enorm belangrijk. Door je website te versnellen, verbeter je de gebruikerservaring van de website. Bovendien is de laadtijd van een website een SEO-factor: met het verkorten van de laadtijd vergroot je de kans om beter gevonden te worden door zoekmachines!
Met de WP-Optimize plug-in kun je je website versnellen en optimaliseren. Om dit mogelijk te maken, heeft de plug-in meerdere ingebouwde functies:
- het opschonen en optimaliseren van de WordPress-database van je website;
- het verkleinen ofwel comprimeren van afbeeldingen;
- het cachen van pagina’s, ofwel het opslaan van pagina’s in het geheugen, om de laadsnelheid van pagina’s te vergroten;
- het verkleinen van de diverse (coderings-)bestanden waarmee je website is opgebouwd, zoals CSS, Javascript en HTML. Bovendien worden bepaalde bestanden pas geladen wanneer de rest van de pagina volledig is geladen.
Het opschonen van de WordPress-database
Om je database op te schonen voer je de volgende handelingen uit. Je klikt in de linkerkolom van het WordPress-dashboard op WP-Optimize en klikt vervolgens in het submenu op Database: WP-Optimize » Database. Vervolgens volg je de volgende stappen:
- De standaard optimalisatie-instellingen staan al goed ingesteld, hier hoef je niets aan te veranderen;
- bovenaan het venster klik je op de blauwe knop Start alle geselecteerde om het opschonen van de database te starten;
- het optimaliseren van alle items kan een tijdje duren. Wanneer het opschonen gereed is, merk je dat vanzelf door de opmerkingen die bij de diverse items vermeld staan. Bij het item Verwijder alle berichtversies staat dan bijvoorbeeld Berichtrevisies verwijderd.
Afbeeldingen verkleinen en comprimeren
Wanneer de afbeeldingen van je website veel geheugen innemen, vertraagt dat de laadtijd van de website. Met de WP-Optimize plug-in kun je de afbeeldingen in je WordPress-bibliotheek verkleinen, terwijl de beeldkwaliteit behouden blijft.
Er zijn twee methoden om afbeeldingen te optimaliseren:
- automatische beeldcompressie inschakelen voor nieuwe afbeeldingen die in de WordPress-bibliotheek worden geplaatst;
- afbeeldingen handmatig optimaliseren.
Om automatische beeldcompressie in te schakelen, ga je als volgt te werk:
- klik in de linkerkolom van het WordPress-dashboard op WP-Optimize en klik vervolgens in het submenu op Afbeeldingen: WP-Optimize » Afbeeldingen;
- schakel op het tabblad Afbeeldingen comprimeren van het geopende dialoogvenster Automatisch nieuw toegevoegde afbeeldingen comprimeren in.
Handmatig optimaliseren van meerdere bestaande afbeeldingen (bulk) werkt als volgt:
- klik in de linkerkolom van het WordPress-dashboard op WP-Optimize en klik vervolgens in het submenu op Afbeeldingen: WP-Optimize » Afbeeldingen;
- selecteer in het verschenen dialoogvenster de afbeeldingen die je wilt verkleinen. Je kunt ook eventueel alle afbeeldingen selecteren door op de knop Alles selecteren, bovenaan de verzameling afbeeldingen te klikken;
- klik onderaan het venster (onder de foto’s) op de knop Geselecteerde afbeeldingen comprimeren.
Voor het handmatig optimaliseren van een bestaande afbeelding via de Mediabibliotheek ga je als volgt te werk:
- ga via het WordPress-dashboard naar de Mediabibliotheek;
- het overzicht van afbeeldingen in de Mediabibliotheek wordt getoond. Bij de afbeelding die je wilt verkleinen klik je op de link Bewerken;
- in de rechterkolom van het bewerkingsvenster vind je de sectie Afbeelding comprimeren. Klik binnen deze sectie op de blauwe knop Comprimeren om de afbeelding te verkleinen.
Compromis tussen kwaliteit afbeelding en mate van verkleining
Helaas moet je bij het verkleinen van afbeeldingen altijd een compromis sluiten tussen het verkleinen van een afbeelding en het behouden van de beeldkwaliteit. In de WP-Optimize plug-in kun je aangeven waar je de meeste nadruk op wilt leggen: op het verkleinen of op het behoud van beeldkwaliteit.
In onze werkwijze wordt er net iets meer nadruk op de beeldkwaliteit gelegd. In onderstaande afbeeldingen zie je de aanbevolen instellingen (schuifregelaar), in het dialoogvenster van de plug-in en in het bewerkingsvenster van de Mediabibliotheek.
Het cachen van pagina’s
Wat is caching?
Wat betreft de snelheid en prestaties van je website levert het inzetten van caching het meeste resultaat. Met caching worden de dynamische gegevens tijdelijk opgeslagen. Hierdoor kunnen deze gegevens sneller worden opgehaald; de gegevens hoeven niet iedere keer opnieuw te worden omgezet van WordPress-data naar een daadwerkelijke websitepagina of bericht.
Met de WP-Optimize plug-in wordt een bericht of pagina in het geheugen opgeslagen, wanneer voor de eerste keer een pagina of bericht op je website wordt bezocht. De dynamische bestanden worden in een statisch bestand opgeslagen. Wanneer nu een volgende bezoeker dezelfde pagina of hetzelfde bericht bekijkt, dan wordt het statische bestand getoond, dat niet meer hoeft te worden verwerkt en omgezet in een zichtbare pagina of een zichtbaar bericht.
Om te zorgen dat ook de eerste bezoeker van een pagina of bericht van de caching profiteert, kan de eerste bezoeker door de plug-in worden nagebootst. Hierdoor is de cache altijd gereed voor gebruik.
Voor de technici onder ons: WordPress verwerkt dynamische PHP-bestanden om een pagina of bericht te genereren en haalt daarbij gegevens uit een database op. De plug-in slaat dit op in een statisch html-bestand in de cachemap. Bezoekt een eerste gebruiker deze pagina of dit bericht, dan wordt deze pagina of dit bericht in de cache opgeslagen. Bij een volgend bezoek of bij een volgende bezoeker wordt de pagina of het bericht uit de cache gehaald en kunnen de verwerkingsstappen worden overgeslagen.
Naast het opslaan van berichten en pagina’s, biedt de plug-in ook de mogelijkheid om de bestanden, waaruit een website is opgebouwd en die voor langere tijd niet worden gewijzigd, in je browser op te slaan.
Wederom voor de technici onder ons: het betreft de volgende statische bestanden: HTML, CSS, Javascript en afbeeldingen.
Tot slot kunnen statische bestanden (HTML, Javascript en CSS) worden verkleind, voordat ze van de server naar de browser van een bezoeker worden verstuurd: zogenaamde Gzip-compressie.
In de volgende paragraaf leggen wij meer uit over de benodigde plug-in-instellingen.
Aan de slag met pagina-caching
Om optimaal gebruik te maken van pagina-caching volg je de volgende stappen:
- klik in de linkerkolom van het WordPress-dashboard op WP-Optimize en klik vervolgens in het submenu op Cache: WP-Optimize » Cache;
- schakel op het tabblad PaginaCache van het geopende dialoogvenster Cachen pagina’s inschakelen in;
- de overige instellingen van het tabblad PaginaCache kun je zo laten. Ook de levensduur van de cache kun je op 24 uur laten staan. Dit betekent dat een pagina of bericht na 24 uur wordt ververst en opnieuw in het geheugen (van de server) wordt opgeslagen;
open in het dialoogvenster het tabblad Vooraf laden. Vink Activeer geplande cache-preloading aan. Hiermee wordt het eerdergenoemde eerste bezoek van een pagina of bericht nagebootst. Het veld Type schema kun je op de standaardinstelling laten staan. Het opnieuw vooraf laden vindt dan op dezelfde tijdstippen plaats als de pagina-caching;
open het tabblad Gzip-compressie. Klik daarna op de knop Inschakelen, om Gzip-compressie in te schakelen. Hiermee worden dus vaste statische bestanden (HTML, Javascript en CSS) verkleind;
open het tabblad Statische bestandsheaders. Via dit tabblad kun je ervoor zorgen dat de bestanden die langere tijd niet worden gewijzigd, worden opgeslagen in het geheugen van de browser van een websitebezoeker. Klik op de knop Bijwerken om deze optie in te schakelen. De vervaltijd van 28 dagen staat al goed ingesteld; na 28 dagen worden de bestanden ververst en opnieuw in het geheugen van de browser opgeslagen.
Websitebestanden verkleinen
Tot slot kun je de websitebestanden verkleinen. Om de bestanden waaruit de uiteindelijke website is opgebouwd te verkleinen volg je de volgende stappen:
- klik in de linkerkolom van het WordPress-dashboard op WP-Optimize en klik vervolgens in het submenu op Minify: WP-Optimize » Minify;
- schakel op het tabblad Minify status het dialoogvenster Verkleinen inschakelen in;
- Schakel daarbij ook alle mogelijke opties in:
- HTML verwerken;
- Verwerk Javascript bestanden;
- Verwerk CSS-bestanden;
- Controleer of alles op de website nog functioneert. Werken alle functies nog, is de opmaak nog correct? Mochten er fouten optreden, dan is het het eenvoudigst om eerst alle drie de verkleinopties uit te schakelen. Vervolgens schakel je ze één voor één weer in, waarbij je steeds tussendoor de website weer test. Dit herhaal je net zo lang, totdat het bij het inschakelen van een optie fout gaat. Deze optie laat je nu uitgeschakeld. Dit is immers de optie die de fout veroorzaakt. In het algemeen kun je van het volgende uitgaan:
- HTML verwerken: HTML bepaalt de inhoud van de website. Wanneer er dus iets fout gaat met de inhoud van je website, kun je het beste deze optie uitschakelen. Mocht er inhoud zijn verdwenen, dan kan dit echter ook worden veroorzaakt door de optie Verwerk CSS bestanden. Via deze optie kunnen in een uitzonderlijk geval onderdelen onzichtbaar worden gemaakt;
- Verwerk Javascript bestanden: mochten bepaalde functies op je website niet meer werken, dan laat je deze optie uitgeschakeld. Een voorbeeld van functie is het uitklappen van een hamburgermenu;
- Verwerk CSS-bestanden: CSS bepaalt de opmaak van je website. Wanneer er een fout optreedt in de lay-out of opmaak van je website, schakel je deze optie dus uit.
Over CLS Trainingen
CLS Trainingen heeft al meer dan 25 jaar ervaring in het aanbieden van kwaliteitsopleidingen. CLS Trainingen luistert naar opdrachtgevers en geeft opleidingsadviezen op basis van je situatie en wensen.
