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, minificeer gewoon de js en CSS en zie het verschil, ga naar WP Speed of light > Versnellen > Groeperen en minificeren, je kunt het menu zien met alle opties om te minificeren. De gratis versie van de plugin bevat de optie groeperen en minificeren, maar de visuele bestandsuitsluiting is alleen beschikbaar in de PRO Addon-versie.

PRO-add-on-opties zijn: Uitsluiten van inline-script (sluit inline-script uit van minificatie), verplaats scripts naar de voet (hiermee kunt u uw site versnellen door alle geminimaliseerde scripts naar de voet te verplaatsen), Groepslettertype en Google-lettertypen (groepeer lokale lettertypen en Google-lettertypen in één enkel bestand om sneller te worden bediend) en Geavanceerde bestandsuitsluiting.
 
U hebt de optie om te minificeren, zoals u kunt zien, JS, CSS en ook de HTML nu gewoon activeren deze opties, klik op opslaan en alle bronnen worden onmiddellijk geminimaliseerd, het kan problemen opleveren omdat het een geavanceerde configuratie is, maar alles kan worden opgelost door de uitsluiting van enige code en bestanden (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 laten we WordPress CSS en JS optimaliseren door simpelweg de groepopties op het dashboard in te schakelen, ga naar WP Speed of Light > Snelheid omhoog > Groeperen & Minificeren, u zult een dashboard zien met de opties om CSS en JS 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 u op uw website kunt groeperen, opent u gewoon uw browserconsole (rechtermuisknop > Inspecteren of F12) en opent u 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? Andere optimalisatie? Ja! U kunt het lettertypegewicht optimaliseren en het zal net zo eenvoudig zijn als het inschakelen van de optie in de instellingen. Ga gewoon naar WP Speed of Light > SpeedUp > Groeperen & Minify > Groepslettertypen en Google-lettertypen optie.
Groepslettertypen en Google-lettertype-optie stellen u in staat om ze te groeperen in één bestand om sneller te worden bediend. Dit is heel handig omdat de meeste WordPress-thema's en -lay-outs standaard worden geleverd met 2 of meer lettertypen met alle declinaties (regulier, 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 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

De minificatie kan problemen veroorzaken op uw site, het gebeurt meestal wanneer u bepaalde bestanden groepeert die een fout bevatten in syntaxisfout of vergelijkbare variabele, klassenaam. Dat is waarom met de “bestandsminificatie-uitsluiting”-optie, u bestanden kunt uitsluiten van het minificatie- en groeperingsproces, ga naar WP Speed of Light > Versnelling > Groep & Minificeer, u zult de Geavanceerde bestandsuitsluiting-optie zien.

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

  To be able to list the script loaded on your website, WP Speed of Light needs to scan your folder to list them. They are usually all contained in your /wp-content folder that group all your plugins and theme. Select that folder (at least) and click on “Scan Now”

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

Er wordt een lijst met bestanden weergegeven, ingedeeld op type (Alle, JS, CSS, Lettertype). Als u één bestand hebt geïdentificeerd dat problemen veroorzaakt bij het activeren van de bestands groepering en minificatie, kunt u het hier uitsluiten met behulp van een eenvoudige AAN/UIT-schakelaar.

Dit zal u helpen om bestanden uit te sluiten en op deze manier eenvoudig eventuele problemen op te lossen die kunnen optreden bij het minificeren van bronnen… De groeperings- en minificatieproces vereist nog wat werk, vooral bij het testen, maar het is zeker de moeite waard, en u zult altijd in staat zijn om te testen hoe het werkt door het snelheidstest rechtstreeks uit te voeren vanuit WP Speed of Light.
 
Ga verder en probeer WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light