Een snelle website hebben is niet langer een luxe. Het is een essentieel kenmerk van je website, zelfs als je een kleinere website bent.
Wist je dat de meerderheid van de mensen een websitezal verlaten als het langzamer dan 3 seconden laadt?
Veel bedrijven zien een opmerkelijke verbetering in hun bezoekerscijfers als ze de snelheid van hun websites optimaliseren.
Maar laten we weer bij het onderwerp komen. Je bent hier waarschijnlijk omdat je WordPress gebruikt. En je wilt waarschijnlijk een snellere WordPress website ook. Eigenlijk is het niet moeilijk om WordPress te verkleinen. Je hebt geluk! Laat het me uitleggen.
Omdat de WordPress gemeenschap groot is en er veel plugins voor optimalisatie zijn, zijn er veel mogelijkheden om je website sneller te maken. Je hoeft niet eens een professionele webontwikkelaar te zijn om je WordPress website schreeuwend snel te maken.
Ja, je leest het goed, je kunt dit doen! In dit artikel hoop ik je wegwijs te maken in één aspect van het onderwerp dat optimalisatie heet. Dit aspect heet Minificatie.
Trouwens, als je een complete gids wilt over hoe je je WordPress website kunt optimaliseren en het razendsnel kunt maken, bekijk dan mijn gids over Hoe kun je WordPress versnellen in 6 stappen.
Wat is Minificatie?
Voor we in Minificatie duiken, moet ik eerst een kleine uitleg geven over hoe de software en programmering achter WordPress werkt.
Een kleine inleiding tot de talen die in WordPress gebruikt worden
WordPress, zoals alle software en websites, wordt gemaakt met behulp van programmeertalen. Er zijn veel programmeertalen, maar WordPress wordt gebouwd met de volgende:
- PHP: PHP is de taal die op de server wordt uitgevoerd, en waarmee WordPress dynamische onderdelen kan hebben. Bijvoorbeeld door berichten toe te voegen of mensen een formulier te laten versturen op je website.
- JavaScript: JavaScript is een taal die op de browser wordt uitgevoerd, en de interactie op een website verbetert. Heb je bijvoorbeeld die fancy FAQ rubrieken op websites gezien? Waarbij je op een FAQ klikt en hij open schuift? JavaScript maakt deze schuivende functionaliteit mogelijk.
- HTML en CSS: Dit zijn technisch gezien geen programmeertalen, maar bepalen vooral de structuur, lay-out, kleuren, typografie en het uiterlijk van de website. Deze worden door elke website gebruikt.
Zoals je weet kan WordPress plugins en thema's hebben die de extra functionaliteit en het uiterlijk van een website bepalen. Deze plugins en thema's hebben vaak veel PHP, CSS en JavaScript bestanden.
Waarom vertel je me dit?
Je vraagt je misschien af waarom ik dit vertel. De reden is eenvoudig. want met minificatie hebben we te maken met CSS, HTML en JavaScript bestanden.
Het is eigenlijk eenvoudig om WordPress te minifiëren, maar het is ook belangrijk te begrijpen wat deze bestanden doen.
Veel plugins en thema's gebruiken CSS en JavaScript bestanden om een webpagina te stijlen (kleuren, layout, typografie, enzovoort) en functionaliteit toe te voegen. Zodra je een website in je browser opent, moeten deze bestanden van de server geladen worden.
En hier komt het caveat. Als je er veel hebt en ze zijn groot, dan heeft dat invloed op hoe snel een website laadt. Negatief, natuurlijk.
Later deel ik een eenvoudige truc hoe je het aantal geladen bestanden kunt zien.
Terugkomend op minificatie. Laten we WordPress minifiëren!
Wat is minificatie nu eigenlijk? Het is vrij eenvoudig! Minificatie is het kleiner maken van de JavaScript, CSS en HTML bestanden.
En omdat deze bestanden kleiner zijn, hoeft je browser minder van de server te downloaden. Letterlijk minder kilobytes. En dat maakt je website sneller!
Vaak wordt minificatie ook gebruikt om bestanden samen te voegen, maar technisch heet dit concatenatie. Je vindt het misschien moeilijke woorden, maar soms kan de technische breedsprakigheid niet vermeden worden.
Als je bestanden combineert, hoeft ook jouw (of eventuele bezoekers) browser minder verzoeken te doen aan de server waar een website staat. En je raadt het misschien al, hierdoor kan de website ook sneller laden.
Nu zijn moderne websites beter in het verwerken van meerdere verzoeken tegelijk. Maar dat is een onderwerp voor een andere keer.
Een WordPress Minify Plugin: Autoptimize
Nu gebruik je misschien een mooi WordPress thema en een paar plugins op je WordPress website. Het ziet er allemaal mooi uit, maar je WordPress website is een beetje traag.
Dat komt omdat veel van deze thema's en plugins onder-geoptimaliseerde JavaScript en CSS bestanden plaatsen. En de slechtste plugins en thema's die er zijn hebben ook veel van deze bestanden!
En ze moeten allemaal gedownload worden door je website bezoekers....
Gelukkig zijn er een paar WordPress plugins die dit probleem in een paar minuten kunnen oplossen. Ik heb er veel geprobeerd, en er is één plugin die er echt uitspringt.
Deze plugin heet Autoptimize. Hij werkt op de meeste sites out of the box, zonder fouten. Joepie! Laten we WordPress minifiëren!
Autoptimize gebruiken
Autoptimize installeren en instellen is eenvoudig. Laten we ervoor gaan!
1. Autoptimize installeren
Login op je WordPress, ga dan naar plugins. Klik op nieuw toevoegen en zoek naar Autoptimize.
Installeer en activeer de Autoptimize plugin door te klikken op Install Now, en dan op Activate na enig wachten. Dat ging tot nu toe gemakkelijk.
2. De beste instellingen voor Autoptimize
Zodra je de plugin geactiveerd hebt, komt er een nieuw instellingsscherm. Het staat in je WordPress Admin Menu, onder Instellingen, Autoptimize. Laten we erheen gaan!
Vanaf hier is het echt eenvoudig:
- Schakel de Optimaliseer JavaScript code selectievakje.
- Doe hetzelfde voor de Optimaliseer CSS code selectievakje.
- Scroll naar beneden, en weer hetzelfde voor de Optimaliseer HTML code selectievakje.
- Scroll nog verder naar beneden, en druk op Wijzigingen opslaan en cache legen.
- En klaar ben je! Je hebt WordPress wel geminificeerd! Zo gemakkelijk was het.
Zoals je ziet heeft Autoptimize ook nog enkele andere tabbladen. Deze vallen buiten het bestek van dit artikel, maar neem er gerust een kijkje.
Laten we nu eens kijken hoe we het effect kunnen meten van het gebruik van Autoptimize in je eigen browser.
Een ontwikkelaarstruc om je website bestanden te onderzoeken
Oké, ik moet iets toegeven. Ik heb vroeger vele jaren gewerkt als professioneel WordPress Ontwikkelaar. En ik wil een van de trucs uit mijn gereedschapsgordel delen. Het heet het ontwikkelaarsgereedschap en de meeste browsers hebben het.
1. Open de hulpmiddelen voor ontwikkelaars
Ga naar de website die je wilt analyseren. Met Chrome of Firefox kun je op F12 drukken (op Windows) of een rechtermuisklik doen, en klikken op Inspect, of Inspect Element.
Er verschijnt een scherm dat je eerst misschien overweldigend lijkt. Het is een scherm waarin je de publieke code van een website kunt onderzoeken.
2. Ga naar het tabblad netwerk
Zowel in Firefox als in Chrome heb je verschillende tabbladen. Er is een tabblad met de naam Netwerk. Klik op dat tabblad.
Je ziet een lijst met enkele bestanden (of url's) die je browser moet opvragen, of beter gezegd, moet laden.
Overigens gebruik ik voor dit voorbeeld Enfold, een zeer populair thema op ThemeForest (een marktplaats voor WordPress Thema's). En het perfecte voorbeeld van een opgeblazen thema dat te veel CSS en JavaScript bestanden doorduwt.
3. Herlaad de website
Voor we kunnen analyseren, moeten we de Network tab opnieuw laden. Dit zal dit tabblad vullen met alle bestanden die de browser moet downloaden.
Zoals je ziet, is nu een lijst van veel verschillende bestanden zichtbaar onder het Netwerk tabblad. Je kunt zelfs zien wat voor bestanden het zijn, zoals CSS of JavaScript (JS).
Onderaan zie je hoeveel verzoeken de browser moet doen en hoe groot de bestanden in totaal zijn.
Er zijn dus veel te veel bestanden (125) en we moeten 1.63 MB downloaden! Uuugh, dit WordPress thema is het tegenovergestelde van geoptimaliseerd. Laten we het verschil zien als ik Autoptimize aanzet zoals we eerder deden.
4. Zet Autoptimize aan en vergelijk het verschil.
In dit voorbeeld moeten we, om WordPress bestanden te minifiëren, nog enkele Autoptimize instellingen veranderen.
Ik ging naar het back-end en schakelde de Optimalisatie van HTML, JavaScript en CSS in bij de instellingen van Autoptimize. Ga nu terug naar het front-end en herlaad de pagina.
We zien dat veel van de bestanden uit de schermen ervoor verwijderd zijn, en dat er een paar gecombineerde bestanden staan met namen als autoptimize_124erqwe.css. Het lijkt erop dat Autoptimize zijn magie heeft gedaan!
En dit is veel beter, hé? We vragen nu nog maar 23 bestanden aan en we hebben meer dan 200kb van de website geschoren. De website laadt ook iets sneller.
Als je meer informatie en een snelheidsscore voor je website wilt hebben, kun je ook de fantastische hulpmiddelen van Pingdom. Het is net als de netwerk tab, maar dan veel beter.
Wat Autoptimize onder de motorkap doet
Al dit schrijven kan je dus nieuwsgierig gemaakt hebben. Voor wie van nieuwsgierigheid leeft, leg ik hier in meer detail uit wat minificatie doet.
Combineren en minifiëren van code
Zoals we in het bovenstaande voorbeeld zagen, combineert Autoptimize code tot minder bestanden. Maar het maakt ook de eigenlijke code kleiner. Het proces is vrij eenvoudig.
Autoptimize neemt code zoals het voorbeeld hieronder (de code kan je moeilijk lijken, maar negeer dat voorlopig maar):
var Waterval = {
init: functie () {
deze.lightbox();
deze.woocommerceGallery();
},
// Stel de lichtbak in
lichtbak: functie () {
jQuery('.waterfall-lightbox').find('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"], a[href$=".svg"], a[href$=".webp"]').swipebox();
}
}En comprimeert het tot de onderstaande code (hij is nu veel meer gecondenseerd):
var Waterval={init:functie(){deze.lightbox(),deze.woocommerceGallery()},lightbox:functie(){jQuery(".waterval-lightbox").find('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"], a[href$=".svg"], a[href$=".webp"]').swipebox()}};Bovendien, wanneer Autoptimize zijn ding doet om WordPress te minifiëren, voegt het de code van al deze bestanden samen tot een paar bestanden. Zoals je je kunt voorstellen, zijn deze bestanden een stuk kleiner dan de oorspronkelijke bestanden.
Wat is Lege Cache?
Vraag je je trouwens af wat Wijzigingen opslaan en Cache legen betekent (binnen het Instellingen scherm van Autoptimize)?
Het betekent eigenlijk dat Autoptimize je geminificeerde bestanden opnieuw opbouwt. Met andere woorden, minificeer ze opnieuw. Autoptimize minificeert de CSS, JS en HTML bestanden en slaat ze op in een z.g. cache, die dan in plaats van de oorspronkelijke bestanden geladen wordt.
Maar wanneer denk je dat je deze functie moet gebruiken? Het antwoord is eenvoudig: telkens als er nieuwe bestanden aan je WordPress website worden toegevoegd. En dat gebeurt telkens als je een nieuwe plugin toevoegt, een nieuw thema toevoegt of van thema wisselt.
Om WordPress weer te minifiëren, druk je gewoon op de knop Wijzigingen opslaan en Cache legen en je bent klaar.
Je hebt het gehaald!
Gefeliciteerd, hopelijk ben je een stuk wijzer geworden wat betreft minificatie, hulpmiddelen voor ontwikkelaars, de programmeertalen die in WordPress gebruikt worden en hoe je WordPress kunt minifiëren.
En waarschijnlijk is je website ook sneller.
Als minificatie je nieuwsgierig heeft gemaakt, bekijk dan mijn complete gids over Hoe kun je WordPress versnellen in 6 stappen. Je leert over vele andere technieken om je website te versnellen.
Als je vragen, opmerkingen of iets anders te zeggen hebt, dan hoor ik dat graag. Je kunt je commentaar hieronder achterlaten.