Hoe u bronnen kunt groeperen en verkleinen in WordPress

De best mogelijke prestaties hebben is de droom van iedereen die een website beheert. Het groeperen en minimaliseren van bronnen op WordPress is een van de beste dingen die we daarvoor kunnen doen, maar het kan heel moeilijk zijn. Het groeperen van al je bronnen (voornamelijk css- en js-bestanden) kan je website blootstellen als je geen ontwikkelaar bent, omdat het conflicten kan veroorzaken.

WP Speed of Light is de beste oplossing om uw wordpress-site uit te voeren omdat het veel opties heeft om uw site snel te laden met een zeer gebruiksvriendelijk dashboard en ja, een van deze opties is het groeperen en minimaliseren van bronnen. Het opnemen/uitsluiten van afzonderlijke bestanden van de groeperings- en minimalisatieproces is een sleutel tot een aangepaste optimalisatie zonder conflicten.

We gaan een voorbeeld wordpress-site gebruiken voor deze blogpost en we zullen leren hoe we dit moeten doen, zodat het configuratieproces eenvoudiger wordt.

Hoe een WordPress JS- en CSS-minimalisatie uit te voeren

Laten we leren hoe we een WordPress JS- en CSS-minificatie kunnen doen, maar eerst moeten we weten wat minificatie betekent “Minificatie verwijst naar het proces van het verwijderen van onnodige of overbodige gegevens zonder dat dit van invloed is op hoe de bron wordt verwerkt door de browser - bijv. code-opmerkingen 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 veranderingen te zien, voor dit voorbeeld gebruiken we een site met Woocommerce en enkele producten, dus de eerste keer zal het een beetje langzaam laden.

Ja, 2,79 seconden om de pagina te laden, niet slecht, maar het kan beter. Laten we de JS en CSS minimaliseren en kijken wat het verschil is. Ga naar WP Speed of light > SpeedUp > Groeperen & Minimaliseren. Daar vind je een menu met alle opties om bestanden te minimaliseren. De gratis versie van de plugin bevat de optie om bestanden te groeperen en te minimaliseren, maar de visuele optie om bestanden uit te sluiten is alleen beschikbaar in de PRO-add-on.

De PRO-add-on-opties zijn: Inline scripts uitsluiten (sluit inline scripts uit van minificatie), scripts naar de footer verplaatsen (hiermee kunt u uw site versnellen door alle geminificeerde scripts naar de footer te verplaatsen), lettertypen en Google Fonts groeperen (groepeer lokale lettertypen en Google Fonts in één bestand voor snellere weergave) en Geavanceerde bestandsuitsluiting.
 
U kunt, zoals u ziet, JS, CSS en HTML minimaliseren. Activeer deze opties, klik op opslaan en al uw bronnen worden direct geminificeerd. Er kunnen problemen optreden omdat het een geavanceerde configuratie betreft, maar alles kan worden opgelost door bepaalde code en bestanden uit te sluiten (met de PRO-add-on).

Nu is al het ontwikkelingswerk dat uren in beslag kon nemen, in slechts enkele seconden gedaan.

Volgende stap, WordPress optimaliseert CSS en JS

Met deze plugin kunnen we WordPress CSS en JavaScript laten optimaliseren door simpelweg de groeperingsopties in het dashboard in te schakelen. Ga naar WP Speed of Light > SpeedUp > Groeperen en minimaliseren. Daar zie je een dashboard met de opties om CSS en JavaScript te groeperen.

Met deze opties kunt u:

• Groep JS: Het groeperen van meerdere Javascript-bestanden in één enkel bestand zal het aantal HTTP-verzoeken minimaliseren
• Groep CSS: Het groeperen van meerdere CSS-bestanden in één enkel bestand zal het aantal HTTP-verzoeken minimaliseren.

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

Om te controleren hoeveel bestanden en scripts je op je website kunt groeperen, open je de console van je browser (klik met de rechtermuisknop > Inspecteren of druk op F12) en open je het netwerkpaneel.

U kunt vervolgens alle geladen bestanden per type weergeven. In dit voorbeeld heb ik alleen op de lijst met JS-bestanden geklikt.

Nu we deze instellingen hebben, activeert u gewoon de groepsopties (Groep CSS en Groep JS) en klikt u op opslaan. Houd er rekening mee dat deze opties met voorzichtigheid moeten worden gebruikt en u zult uw pagina moeten testen omdat het conflicten kan veroorzaken.

Laten we serieus worden en het lettertypegewicht optimaliseren

Wat? Nog meer optimalisatie? Jazeker! Je kunt het lettertypegewicht optimaliseren. Dat is heel eenvoudig: schakel de optie in de instellingen in. Ga naar WP Speed of Light > SpeedUp > Groeperen en minimaliseren > Lettertypen en Google Fonts groeperen .
Met deze optie kun je lettertypen en Google Fonts groeperen in één bestand, zodat ze sneller geladen worden. Dit is erg handig, aangezien de meeste WordPress-thema's en -lay-outs standaard twee of meer lettertypen bevatten met alle varianten (normaal, vet, cursief, enz.). 

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

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

Wat een verschil, van 2,8 naar 0,56 seconden! Zoals we u aan het begin van deze post vertelden, kunnen we de laadtijd nog beter maken ;)

Hoe u de bestandsminificatie-uitsluiting gebruikt

Het minimaliseren van bestanden kan problemen veroorzaken op je website. Dit gebeurt vooral wanneer je bepaalde bestanden groepeert die syntaxfouten of vergelijkbare fouten in variabelen of klassenamen bevatten. Daarom kun je met de optie "Bestanden uitsluiten van minimalisatie" bestanden uitsluiten van het minimalisatie- en groeperingsproces. Ga naar WP Speed of Light > SpeedUp > Groeperen en minimaliseren. Daar vind je de geavanceerde optie voor het uitsluiten van bestanden .

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

 
Om de scripts te kunnen weergeven die op uw website zijn geladen, WP Speed of Light uw mappen scannen. Deze bevinden zich meestal in uw map /wp-content, waar al uw plugins en thema's zijn gegroepeerd. Selecteer (minimaal) die map en klik op "Nu scannen".

Er wordt een scan uitgevoerd en klik vervolgens op resultaten weergeven wanneer de scan is voltooid.

Hieronder zou een lijst met bestanden, ingedeeld naar type (Alles, JS, CSS, Lettertype), moeten worden weergegeven. Als u een bestand hebt gevonden dat problemen veroorzaakt bij het activeren van de bestandsgroep en minificatie, kunt u dit bestand hier uitsluiten met een eenvoudige aan/uit-schakelaar.

Dit helpt je om bestanden uit te sluiten en zo eenvoudig eventuele problemen op te lossen die zich kunnen voordoen bij het minimaliseren van resources. Het groeperen en minimaliseren vereist nog wel wat werk, vooral tijdens het testen, maar het is de moeite zeker waard. Je kunt altijd testen hoe het werkt door de snelheidstest rechtstreeks vanuit WP Speed of Light.
 
eens WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light