Hoe je resources in WordPress kunt groeperen en minimaliseren

Optimale prestaties zijn de droom van elke websitebeheerder. Het groeperen en minimaliseren van resources op WordPress is een van de beste manieren om dit te bereiken, maar het kan erg lastig zijn. Het groeperen van al je resources (voornamelijk CSS- en JavaScript-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 veel opties biedt om je site snel te laten laden met een gebruiksvriendelijk dashboard. Een van die opties is het groeperen en minimaliseren van resources. De mogelijkheid om individuele bestanden wel of niet op te nemen in het groeperings- en minimalisatieproces is essentieel voor een aangepaste optimalisatie zonder conflicten.

We gaan voor dit blogbericht een voorbeeld van een WordPress-website gebruiken en we zullen leren hoe je dit doet, zodat het configuratieproces eenvoudiger wordt.

Hoe minimaliseer je JavaScript en CSS in WordPress?

Laten we leren hoe je WordPress JavaScript- en CSS-bestanden kunt minimaliseren, maar eerst moeten we weten wat minimaliseren precies inhoudt. "Minimalisatie verwijst naar het proces waarbij onnodige of redundante gegevens worden verwijderd zonder de manier waarop de bron door de browser wordt verwerkt te beïnvloeden - bijvoorbeeld codecommentaar en -opmaak, het verwijderen van ongebruikte code, het gebruik van kortere variabele- en functienamen, enzovoort.".

Nu gaan we een snelheidstest uitvoeren op onze pagina om de veranderingen te bekijken. In dit voorbeeld gebruiken we een website met WooCommerce en een aantal producten, dus de eerste keer zal het laden iets trager verlopen.

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 ontwikkelwerk dat normaal uren zou duren, in slechts enkele seconden gedaan.

De volgende stap is het optimaliseren van de CSS en JavaScript van WordPress

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:

• Groeperen van JavaScript-bestanden: Door meerdere JavaScript-bestanden samen te voegen tot één bestand, wordt het aantal HTTP-verzoeken geminimaliseerd
• CSS groeperen: Door meerdere CSS-bestanden in één bestand te groeperen, wordt het aantal HTTP-verzoeken geminimaliseerd.

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. Als we deze verzoeken kunnen verminderen, zal de laadtijd afnemen.

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 .

Je kunt vervolgens alle geladen bestanden op type weergeven; in dit voorbeeld heb ik alleen op de lijst met JS-bestanden geklikt.

Nu we deze instellingen hebben, schakel je de groepsopties (Group CSS en Group JS) in en klik je op opslaan. Houd er rekening mee dat je deze opties met de nodige voorzichtigheid moet gebruiken en dat je je pagina moet testen, omdat ze conflicten kunnen veroorzaken.

Laten we het serieus aanpakken 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 in, klik op opslaan en alle lettertypen worden gegroepeerd.

Nu we alle opties voor het minimaliseren en groeperen van de resources hebben geactiveerd, zouden we een verschil moeten zien in de laadtijd van onze site. Laten we de snelheid eens controleren.

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

Hoe gebruik je de uitsluitingsoptie voor bestandsminificatie?

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. Klik ten slotte op 'Resultaten bekijken' 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 .
 
WP Speed of Light eens : https://www.joomunited.com/wordpress-products/wp-speed-of-light