WordPress-producten
Joomla-producten
Steun
Nieuws
Log inHoe u bronnen in WordPress groepeert en verkleint
Betere prestaties leveren is de droom van iedereen die een website beheert, bronnen op WordPress groepeert en minimaliseert. Dit is een van de beste dingen die we daarvoor kunnen doen, maar het kan heel moeilijk zijn. Als u al uw bronnen (vooral CSS- en js-bestanden) groepeert, kan uw website zichtbaar worden als u geen ontwikkelaar bent, omdat dit 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 laten laden met een heel vriendelijk dashboard en ja, een van deze opties is het groeperen en verkleinen van bronnen. Het opnemen/uitsluiten van een enkel bestand uit het groeps- en verkleinproces 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 u een WordPress JS- en CSS-minificatie uitvoert
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 gewoon de js en CSS verkleinen en het verschil zien, ga naar WP Speed of light > SpeedUp> Group & Minify , je zult het kunnen om het menu te zien met alle opties om te verkleinen. De versie zonder plug-in bevat wel de optie voor groeperen en verkleinen, maar de visuele bestandsuitsluiting is alleen beschikbaar in de PRO Addon-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 WordPress CSS en js optimaliseren door gewoon 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> Groeperen en verkleinen> Groepslettertypen en Google Fonts- optie.
Met de groepslettertypen en de Google-lettertypenoptie kunt u ze in één bestand groeperen, zodat ze sneller worden weergegeven. Dit is behoorlijk handig omdat de meeste WordPress-thema's en lay-outs standaard met 2 of lettertypen worden geleverd met alle declinaisons (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 verkleining kan problemen op uw site veroorzaken. Het gebeurt vooral wanneer u bepaalde bestanden groepeert die een syntaxisfout of een vergelijkbare variabele, klassenaam bevatten. Dat is de reden waarom u met de optie "uitsluiting van bestandsminimalisatie" bestanden kunt uitsluiten van het verkleinings- en groepsproces. Ga naar WP Speed of Light > SpeedUp> Groeperen en verkleinen , u kunt de Geavanceerde bestandsuitsluiting .
Om de geavanceerde bestandsuitsluiting te gebruiken, moet u eerst een scan uitvoeren en de optie inschakelen en op Scan uitvoeren klikken.
Om de scripts te kunnen weergeven die op uw website zijn geladen, moet WP Speed of Light Ze bevinden zich meestal allemaal in uw map /wp-content waarin al uw plug-ins en thema's zijn gegroepeerd. Selecteer die map (minstens) en klik op “Nu scannen”
Het zal een scan uitvoeren, klik ten slotte op resultaten bekijken wanneer de scan is voltooid.
Hieronder wordt een lijst met bestanden weergegeven, ingedeeld naar type (Alles, JS, CSS, Lettertype). Als u één bestand heeft geïdentificeerd dat problemen veroorzaakt, kunt u dit bij het activeren van de bestandsgroep en de verkleining hiervan uitsluiten met behulp van een eenvoudige 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 wij u een e-mail wanneer er nieuwe updates op de site zijn, zodat u deze niet mist.
Opmerkingen