Hoe je resources groepeert en minificeert in WordPress

De best mogelijke prestaties behalen is de droom van iedereen die een website beheert. Het groeperen en verkleinen van resources op WordPress is een van de beste dingen die we daarvoor kunnen doen, maar het kan behoorlijk lastig zijn. Het groeperen van al je resources (voornamelijk css- en js-bestanden) kan je website kwetsbaar maken als je geen ontwikkelaar bent, omdat het conflicten kan veroorzaken.

WP Speed of Light is de beste oplossing om je WordPress-site te optimaliseren, omdat het tal van opties heeft om je site snel te laten laden met een zeer gebruiksvriendelijk dashboard, en ja, een van die opties is het groeperen en verkleinen van resources. Het individueel opnemen/uitsluiten van bestanden in het groepeer- en verkleinproces is essentieel voor een aangepaste optimalisatie zonder conflicten.

We gaan voor dit blogbericht een voorbeeld WordPress-site gebruiken en we leren hoe je dit doet, zodat het proces om alles te configureren gemakkelijker wordt.

Hoe doe je een WordPress JS- en CSS-minificatie

Laten we leren hoe je een WordPress JS- en CSS-minificatie uitvoert, maar eerst moeten we weten wat minificatie betekent: “Minificatie verwijst naar het proces van het verwijderen van onnodige of redundante gegevens zonder de manier waarop de browser de resource verwerkt te beïnvloeden - bijvoorbeeld codecommentaar en opmaak, het verwijderen van ongebruikte code, het gebruik van kortere variabele- en functienamen, enzovoort”.

Wat we nu gaan doen, is een snelheidstest uitvoeren op onze pagina om de wijzigingen te zien. Voor dit voorbeeld gebruiken we een site met woocommerce en enkele producten, dus de eerste keer zal deze wat langzaam laden.

Ja, 2,79 seconden om de pagina te laden, niet slecht maar het kan beter. Laten we de js en CSS minificeren en het verschil zien, ga naar WP Speed of light > SpeedUp > Group & Minify, je zult het menu met alle opties voor minificatie kunnen zien. De gratis versie van de plugin bevat de optie voor groeperen en minificeren, maar de visuele bestandsuitsluiting is alleen beschikbaar in de PRO Addon-versie.

PRO-addon-opties zijn: Inline script uitsluiten (Inline script uitsluiten van minificatie), scripts naar footer verplaatsen (hiermee kun je je site versnellen door alle geminificeerde scripts naar de footer te verplaatsen), Groepeer lettertypen en Google Fonts (Groepeer lokale lettertypen en Google Fonts in één bestand om sneller te worden geleverd) en Geavanceerde bestandsuit sluiting.
 
Je hebt de mogelijkheid om te minificeren, zoals je kunt zien, JS, CSS en ook de HTML, activeer nu gewoon deze opties, klik op opslaan en al je bronnen worden direct geminificeerd. Het kan problemen opleveren omdat het een geavanceerde configuratie is, maar alles kan worden opgelost met het uitsluiten van bepaalde code en bestanden (met de pro-addon).

Nu is al het ontwikkelaarswerk dat uren kon duren in slechts enkele seconden gedaan.

Volgende stap, WordPress CSS en JS optimaliseren

Met deze plugin laten we WordPress CSS en js optimaliseren door simpelweg de groepsopties op het dashboard in te schakelen, ga naar WP Speed of Light > SpeedUp > Group & Minify, dan zie je een dashboard met de opties om CSS en js te groeperen.

Met deze opties kunt u:

• Group JS: Het groeperen van meerdere Javascript-bestanden in één bestand minimaliseert het aantal HTTP-verzoeken
• CSS groeperen: het groeperen van meerdere CSS-bestanden in één bestand minimaliseert het aantal HTTP-verzoeken.

HTTP-verzoeken: dit zijn verzoeken die naar de server worden gestuurd telkens wanneer we iets selecteren of naar een andere pagina op dezelfde site gaan, dus als we deze verzoeken kunnen verminderen, zou de laadtijd afnemen.

Om te controleren hoeveel bestanden en scripts je op je website kunt groeperen, open je gewoon de browserconsole (rechtermuisknop > Inspecteren of F12) en open je het netwerkpaneel.

Je kunt dan alle bestanden die geladen zijn op type weergeven, in dit voorbeeld heb ik alleen op de JS-bestandenlijst geklikt.

Nu we bij deze instellingen zijn, schakelt u gewoon de groepsopties in (Group CSS en Group JS) en klikt u op opslaan. Houd er rekening mee dat deze opties met de nodige voorzichtigheid moeten worden gebruikt en dat u uw pagina moet testen, omdat dit conflicten kan veroorzaken.

Laten we het serieus aanpakken en het lettertypegewicht optimaliseren

Wat? Nog een optimalisatie? Ja! je kunt het lettertypegewicht optimaliseren en het is net zo eenvoudig als het inschakelen van de optie in de instellingen, ga gewoon naar WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts optie.
De optie Groep lettertypen en Google Fonts stelt je in staat om ze in één bestand te groeperen zodat ze sneller worden weergegeven. Dit is erg handig, aangezien de meeste WordPress-thema's en lay-outs standaard met 2 of meer lettertypen komen met alle varianten (normaal, vet, cursief...) 

Schakel die optie gewoon in, klik op opslaan en alle lettertypen worden gegroepeerd.

Nu we alle opties hebben geactiveerd om de bronnen te verkleinen en te groeperen, zouden we een verschil moeten zien in de laadtijd van onze site. Laten we de snelheid controleren.

Wat een verschil, van 2,8 naar 0,56 seconden! Zoals we je aan het begin van dit bericht vertelden, kunnen we de laadtijd verbeteren ;)

Hoe u de uitsluiting van bestandsminificatie gebruikt

De minificatie kan problemen veroorzaken op je site, dit gebeurt vooral wanneer je bepaalde bestanden groepeert die een syntaxisfout of een vergelijkbare variabele- of klassenaam bevatten. Daarom kun je met de optie "bestandsminificatie-uitsluiting" bestanden uitsluiten van het minificatie- en groeperingsproces. Ga naar WP Speed of Light > SpeedUp > Group & Minify, dan zie je de optie Geavanceerde bestandsuitsluiting .

Om de geavanceerde bestandsuit sluiting te gebruiken, moet u eerst een scan uitvoeren, de optie inschakelen en op Scan uitvoeren klikken.

 
Om de scripts die op je website zijn geladen te kunnen weergeven, WP Speed of Light je map scannen om ze te inventariseren. Ze bevinden zich meestal allemaal in je /wp-content-map, die al je plugins en thema's bevat. Selecteer die map (minimaal) en klik op “Nu scannen”

Er wordt een scan uitgevoerd; klik ten slotte op resultaten bekijken wanneer de scan is voltooid.

Hieronder zou een lijst met bestanden moeten verschijnen, ingedeeld op type (Alle, JS, CSS, Lettertype). Als je een bestand hebt geïdentificeerd dat problemen veroorzaakt bij het activeren van de bestandsgroepering en -minificatie, kun je het hier uitsluiten met een eenvoudige AAN/UIT-schakelaar.

Dit helpt je om bestanden uit te sluiten en zo eventuele problemen bij het minificeren van resources eenvoudig op te lossen… Het groeperen en minificeren vergt nog wat werk, vooral bij het testen, maar het is zeker de moeite waard, en je zult altijd kunnen testen hoe het werkt door de snelheidstest rechtstreeks uit te voeren vanuit WP Speed of Light.
 
Ga je gang en probeer WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light