Nieuwsblog: WordPress & Joomla Extensions

Hoe bronnen in WordPress te groeperen en te verkleinen

file-group-and-minify

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 heel vriendelijk dashboard en ja, een van deze opties is het groeperen en verkleinen van bronnen. De opname / uitsluiting van één bestand uit het groeps- en verkleiningsproces 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.

 

voor-test

 

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 groep en verkleinen, maar de visuele bestandsuitsluiting is alleen beschikbaar in de PRO Addon-versie.

 

groep-en-verkleinen-dashboard

 

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).

 

minify-middelen

 

 

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 WP Speed of Light , 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, scripts u op uw website kunt groeperen, opent u uw browserconsole (klik met de rechtermuisknop> Inspecteren of F12) en opent u het netwerkpaneel .

 

list-script-chrome

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 zult in staat zijn om het lettertypegewicht te 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> Group & Minify> Group fonts en Google Fonts- optie.
Met de optie Groepslettertypen en Google-lettertypen kunt u ze groeperen in een enkel bestand om sneller te worden weergegeven, dit is best handig omdat de meeste WordPress-thema's en -lay-outs standaard worden geleverd met 2 lettertypen of lettertypen met alle declinaisons (normaal, vet, cursief). ...)

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

 

groepslettertype

 


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.

 

test na

 

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 verkleining kan problemen veroorzaken op uw site, het gebeurt voornamelijk wanneer u bepaalde bestanden groepeert die een fout in de syntaxisfout of een vergelijkbare variabele, klassenaam bevatten. Daarom kun je met de optie "bestandsminificatie-uitsluiting" bestanden uitsluiten van het minificatie- en groepsproces, ga naar WP Speed of Light > SpeedUp> Group & Minify , je zult de optie Geavanceerde bestandsuitsluiting kunnen zien .

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

 

group-resource-conflict-alert

 
Om het script dat op uw website is geladen weer te geven, moet WP Speed of Light uw map scannen om ze weer te geven. Ze bevinden zich meestal allemaal in uw / wp-content-map waarin al uw plug-ins en thema zijn gegroepeerd. Selecteer die map (tenminste) en klik op "Nu scannen"

 

selecteer-mappen-om te scannen

 

Het zal een scan uitvoeren, klik ten slotte op resultaten bekijken wanneer de scan is voltooid.

 

gescand

 

Een lijst met bestanden ingedeeld naar type (All, JS, CSS, Font) zou hieronder moeten worden weergegeven. Als u één bestand heeft geïdentificeerd dat problemen veroorzaakt, kunt u bij het activeren van de bestandsgroep en verkleining het hier uitsluiten door een eenvoudige AAN / UIT-schakelaar te gebruiken .

 

uitsluiten-bestanden

 

Dit zal je helpen om bestanden uit te sluiten en op deze manier gemakkelijk elk probleem op te lossen dat kan bestaan ​​​​bij het verkleinen van bronnen ... Het groeperen en verkleinen van het proces vereist nog wat werk, vooral bij het testen, maar het is zeker de moeite waard.
 
Ga je gang en probeer WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light

5
Directe Google Drive-bestandssynchronisatie met Dro ...
WordPress koppelen aan de cloud met WP Media Fo ...
 

Opmerkingen

Er zijn nog geen opmerkingen gemaakt. Wees de eerste die een opmerking plaatst
Al geregistreerd? Hier inloggen
Gast
zondag 05 december 2021

Captcha-afbeelding

Door te accepteren krijgt u toegang tot een service van een externe partij buiten https://www.joomunited.com/