Hoe bronnen in WordPress te groeperen en te verkleinen
De betere prestaties mogelijk maken is de droom van iedereen die een website, groep en bronnen op WordPress beheert, is een van de beste dingen die we daarvoor kunnen doen, maar het kan heel moeilijk zijn. Groepeer al uw bronnen (voornamelijk css- en js-bestanden) om uw website te ontmaskeren als u geen ontwikkelaar bent, omdat dit tot conflicten kan leiden.
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 laten laden met een echt vriendelijk dashboard en ja, een van deze opties is het groeperen en verkleinen van bronnen. Het opnemen/uitsluiten van één bestand uit het groep- en minify-proces is een sleutel voor een aangepaste optimalisatie zonder conflicten.
We gaan een voorbeeld van een wordpress-site gebruiken voor dit blogbericht en we zullen leren hoe we dit moeten doen, zodat het proces om alles te configureren gemakkelijker zal zijn.
Hoe maak je een WordPress JS- en CSS-minificatie
Laten we leren hoe we een WordPress- en CSS-minificatie kunnen doen, maar eerst moeten we weten wat de minificatie betekent. “Minificatie verwijst naar het proces van het verwijderen van onnodige of redundante gegevens zonder de manier te beïnvloeden waarop de bron door de browser wordt verwerkt - bijvoorbeeld codereacties en formatteren, ongebruikte code verwijderen, kortere variabelenamen en functienamen gebruiken, enzovoort ”.
Wat we nu gaan doen, is een snelheidstest naar onze pagina om de wijzigingen te zien, voor dit voorbeeld gebruiken we een site met woocommerce en sommige 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 verkleinen en het verschil zien, ga naar WP Speed of light > SpeedUp > Group & Minify , je zult in staat zijn om het menu te zien met alle opties om te verkleinen. De gratis versie van de plug-in bevat de optie groeperen en verkleinen, maar de uitsluiting van visuele bestanden is alleen beschikbaar in de PRO Add-on-versie.
PRO-add- onopties
zijn: Inline-script uitsluiten (inline-script uitsluiten van minificatie), scripts naar voettekst verplaatsen (hiermee kunt u uw site versnellen door alle verkleinde scripts naar voettekst te verplaatsen), groepslettertype en Google-lettertypen (lokale lettertypen groeperen en Google-lettertypen in een enkel bestand om sneller te worden weergegeven) en Geavanceerde bestandsuitsluiting. Je hebt de mogelijkheid om, zoals je kunt zien, JS, CSS en ook de HTML te verkleinen, activeer nu deze opties, klik op opslaan en al je bronnen worden meteen verkleind, het kan problemen hebben omdat het een geavanceerde configuratie is, maar alles kan worden opgelost met uitsluiting van enkele code en bestanden (met de pro-add-on).
Nu is al het werk van de ontwikkelaar dat uren kan duren in slechts enkele seconden voltooid.
Volgende stap, WordPress optimaliseert CSS en JS
Met deze plug-in laten we die WordPress CSS en js optimaliseren door de groepsopties op het dashboard in te schakelen, ga naar WP Speed of Light > SpeedUp> Group & Minify , je zult een dashboard kunnen zien met de opties om te groeperen CSS en js.
Met deze opties kunt u:
- Groep JS: Door meerdere Javascript-bestanden in één bestand te groeperen, wordt het aantal HTTP-verzoeken geminimaliseerd
- Groepeer CSS: Door meerdere CSS-bestanden in één bestand te groeperen, wordt het aantal HTTP-verzoeken geminimaliseerd.
HTTP-verzoeken: dit zijn verzoeken die aan 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, zou de laadtijd verminderen.
Om te controleren hoeveel bestanden en scripts u op uw website kunt groeperen, opent u gewoon uw browserconsole (klik met de rechtermuisknop > Inspecteren of F12) en open het netwerkpaneel .
U kunt dan alle bestanden die op type zijn geladen vermelden, hier in dit voorbeeld heb ik alleen op de JS-bestandslijst geklikt.
Nu we deze instellingen hebben, schakelt u gewoon de groepsopties in (Group CSS en Group JS) en klikt u op opslaan, houd er rekening mee dat deze opties met voorzichtigheid moeten worden gebruikt en dat u uw pagina moet testen omdat deze conflicten kan veroorzaken .
Laten we serieus worden en het lettertype optimaliseren
Wat? Andere optimalisatie? Ja! u 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 en Google Fonts- optie.
Met de optie Groepslettertypen en Google-lettertypen kunt u ze in een enkel bestand groeperen om sneller te kunnen worden weergegeven, dit is best handig omdat de meeste WordPress-thema's en lay-outs standaard met 2 of lettertypen worden geleverd met alle declinaties (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 in de laadtijd van onze site moeten zien. Laten we de snelheid controleren.
Wat een verschil, van 2,8 tot 0,56 seconden! Zoals we je aan het begin van dit bericht vertelden, kunnen we de laadtijd verbeteren;)
Hoe de uitsluiting van bestandsminificatie te gebruiken
De minificatie kan problemen op uw site veroorzaken, het gebeurt voornamelijk wanneer u bepaalde bestanden groepeert die een syntaxisfout bevatten of een vergelijkbare variabele, klassenaam. Daarom kun je met de optie "bestandsminificatie-uitsluiting" bestanden uitsluiten van het minificatie- en groepsproces, ga naar WP Speed of Light > SpeedUp> Group & Minify Geavanceerde bestandsuitsluitingsoptie kunnen zien .
Om de geavanceerde bestandsuitsluiting te gebruiken, moet u eerst een scan uitvoeren en de optie inschakelen en op Scan uitvoeren klikken.
Om het script dat op uw website is geladen te kunnen weergeven, moet WP Speed of Light uw map scannen om ze weer te geven. Ze bevinden zich meestal allemaal in uw /wp-content-map die al uw plug-ins en thema groepeert. Selecteer (tenminste) die map en klik op "Nu scannen"
Het zal een scan uitvoeren, klik ten slotte op resultaten bekijken wanneer de scan is voltooid.
Hieronder moet een lijst met bestanden worden weergegeven die zijn geclassificeerd op type (All, JS, CSS, Font). Als je één bestand hebt geïdentificeerd dat problemen veroorzaakt, kun je bij het activeren van de bestandsgroep en de verkleining het hier uitsluiten door een simpele AAN/UIT-schakelaar .
Dit zal je helpen bestanden uit te sluiten en op deze manier gemakkelijk elk probleem op te lossen dat zich kan voordoen bij het verkleinen van bronnen... Het groeperen en verkleinen van processen vergen nog steeds wat werk, vooral bij het testen, maar het is zeker de moeite waard, en dat zal ook zo zijn. je kunt altijd testen hoe het werkt door de snelheidstest rechtstreeks vanuit WP Speed of Light .
Ga je gang en probeer WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light
Wanneer u zich abonneert op de blog, sturen we u een e-mail wanneer er nieuwe updates op de site zijn, zodat u deze niet mist.
Opmerkingen