Hoe kan ik de bestanden op mijn WordPress site minimaliseren met LWS Optimize?

Procédure

Minificatie is het verkleinen van een bestand, meestal een CSS stylesheet, een JS-script of een HTML-bestand, om de laadtijd van de site te verbeteren. Het is een veelgebruikte praktijk die eenvoudig kan worden toegepast om de prestaties van de site te verbeteren. Omdat deze bestanden door mensen worden gemaakt, staan ze vol met commentaar, spaties en regeleinden, terwijl de namen van functies en variabelen vaak lang en beschrijvend zijn zodat iedereen het bestand kan begrijpen en aanpassen zonder het te hoeven ontcijferen.

Deze elementen zijn dus essentieel voor een mens, maar totaal nutteloos voor een machine, en maken het bestand alleen maar zwaarder, wat leidt tot een toename in het gebruik van bandbreedte en dus de laadtijd van uw site. Dit is waar minificatie om de hoek komt kijken: door deze overbodige elementen uit het bestand te verwijderen, is het mogelijk om de grootte ervan aanzienlijk te verminderen, zonder op enige manier afbreuk te doen aan de inhoud of de werking van de site.

Verbeter de laadsnelheid van je WordPress site door eenvoudig minificatie van CSS, JavaScript en HTML bestanden in te schakelen via LWS Optimize. Met slechts één klik comprimeert deze beste WordPress caching plugin onnodige code om pagina's lichter te maken, terwijl de navigatie soepel blijft. Voor een gratis installatie kun je deze oplossing ook vinden in de officiële directory als de beste gratis WordPress cache plugin.

Een voorbeeld zegt meer dan duizend woorden, dus laten we het volgende ongewijzigde CSS bestand nemen:

/* Verander de grootte en achtergrond van alinea's in de klasse */ p.class { font-size: 15px; background-color: blue; } /* Verander de kleur van de invoertag */ input { color: white; }

Door het te minimaliseren, ziet de inhoud er als volgt uit:

p.class{font-size:15px;background-color:blue;}input{color:white;}

Nu alle overbodige tekens zijn verwijderd, is het moeilijker om je weg te vinden in het bestand, vooral als het oorspronkelijk honderden of zelfs duizenden regels lang was, maar aan de andere kant is het nu een paar Kb lichter.

Het verkleinen van een bestand van bijvoorbeeld 60 Kb naar 55 Kb lijkt misschien onbeduidend, maar het vertegenwoordigt een aanzienlijke vermindering, in dit geval van ongeveer 9% van de totale bestandsgrootte.
Het effect is des te zichtbaarder als alle bestanden op de site worden verkleind: als elk bestand met 9% wordt verkleind, vertaalt dit zich in een totale vermindering van 9% van het gewicht van de site, wat overeenkomt met evenveel minder gegevens om te laden, waardoor de site sneller laadt.

De bestanden op je WordPress site minimaliseren

Er zijn twee manieren om dit te doen: handmatig de inhoud van elk bestand vervangen door een geminificeerde versie of de minificatie automatiseren via extensies of andere scripts.

De eerste methode zou haalbaar kunnen zijn voor een kleine, zelfgemaakte site (zonder gebruik te maken van een CMS zoals WordPress), maar zou al snel complex en tijdrovend worden naarmate het aantal te verwerken bestanden toeneemt. Voor een WordPress site zou dit eenvoudigweg onmogelijk te onderhouden zijn: een typische WordPress installatie bevat honderden CSS bestanden, nog afgezien van alle extensies die je zou kunnen installeren, en deze bestanden worden bij elke update teruggezet naar hun oorspronkelijke staat, wat betekent dat je het proces elke keer opnieuw moet beginnen als je site wordt bijgewerkt.

Daarom is het beter en aanbevolen om een extensie te gebruiken die de bestanden van je site automatisch minimaliseert, zoals onze LWS Optimize-extensie.

Minimaliseren met LWS Optimize

LWS Optimize, een siteoptimalisatie-extensie van LWS, biedt minificatie van alle HTML-, CSS- en JS-bestanden van je site, naast het bestandscaching-systeem dat standaard is geactiveerd op de extensie. Standaard is minificatie al ingeschakeld in de plugin.

Om minificatie in meer detail te beheren, ga je naar de instellingen van de plugin, klik je op "Ga naar geavanceerde modus" en ga je naar het tabblad "Front-End":

Hier kun je de opties "Minify CSS files", "Minify JS files" en "Minify HTML" aan- of uitvinken om de minificatie van alle bestanden te activeren:

Bevestig je keuze door rechtsonder op de knop "Nieuwe configuratie opslaan" te klikken.

Minification wordt beheerd op uw site, maar omdat het gekoppeld is aan het cache-systeem voor bestanden, moet u deze cache wissen zodat de nieuwe instellingen van kracht worden op de pagina's van uw site. Ga hiervoor naar het tabblad "Caching" en klik op de knop "Cache legen" naast de actie "Handmatig legen":

Als je niet wilt dat bepaalde bestanden worden geminified, kun je teruggaan naar het tabblad "Front-End" en klikken op de knop "Bestanden uitsluiten" van de actie van je keuze om het uitsluitingsmodaal te openen:

Voer in het veld van het nieuw geopende venster de volledige URL in van het bestand dat je wilt uitsluiten, of slechts een deel ervan als je alle bestanden wilt uitsluiten waarvan de URL dat deel bevat. Je kunt op de groene "+" knop klikken om andere URL's toe te voegen of op de rode "-" knop om ze te verwijderen. Je kunt zoveel URL's uitsluiten als je wilt. Als u klaar bent, klikt u op de knop "Opslaan" om uw wijzigingen op te slaan.

In het bovenstaande voorbeeld zijn het bestand "woocommerce.css", dat zich in een map voor de WooCommerce-extensie bevindt, en alle CSS-bestanden voor de Elementor-extensie uitgesloten van CSS-bestandsminificatie. Nogmaals, je moet de bestandscache wissen om je uitsluitingen toe te passen.

Hoe LWS Optimize je bestanden minificeert

Bij het maken van de cache voor een pagina op je site, zoekt LWS Optimize op de pagina naar alle en

HTML-minificatie daarentegen is een beetje anders dan de andere: de volledige inhoud wordt hersteld nadat de andere acties zijn uitgevoerd en de pagina is geladen, vervolgens geminificeerd voordat deze in de cache wordt geplaatst in "wp-content/cache/lwsoptimize/cache".

Conclusie

Je weet nu hoe je :

• Handmatig minifyen van je CSS, JS en HTML bestanden en de voordelen van deze praktijk.
• Extensies kunt gebruiken, zoals LWS Optimize, om minificatie te automatiseren en de efficiëntie van je WordPress site te verbeteren.
• Sluit bepaalde bestanden uit van minificatie als dat nodig is om de functionaliteit van je site te behouden.
• Begrijp de innerlijke werking van LWS Optimize bij het minen van je bestanden.

Door je bestanden te optimaliseren met minificatie, zet je een grote stap naar een snellere site en een betere gebruikerservaring. 🌐

🙌 Bedankt voor het volgen van dit technische artikel! Als je vragen of feedback hebt over de minificatieservice of de LWS Optimize-extensie, aarzel dan niet om een reactie achter te laten. Uw feedback is van onschatbare waarde om ons te helpen onze services voortdurend te verbeteren. 💬