Verklein / combineer WordPress CSS + Javascript-bestanden = snellere site

WordPress verkleint JS- en CSS-bestanden

Een van de beste dingen die we hebben geleerd tijdens het onderzoek voor ons artikel over: hoe je Joomla website snel laadt (1.29 seconden om precies te zijn), ontdekten we een geweldig juweeltje van een tool. 

Zoals veel mensen doen wanneer ze ernaar streven een website sneller te laten laden, verwijzen ze naar de Site met aanbevelingen voor Google PageSpeed, en terecht, want als Google een statement maakt, is het meestal de moeite waard om naar te luisteren. Soms is het echter nogal rommelig om alle optimalisaties uit te voeren en hebt u misschien niet de vaardigheden om deze wijzigingen uit te voeren.

Inhoud[Producten per pagina]

Zoals u wellicht weet, moet u bij het sneller maken van uw WordPress-site een aantal optimalisaties uitvoeren. Een daarvan is weten hoe u browsercaching in WordPress correct kunt gebruiken, iets met CollectiveRay heeft hier een geweldig artikel over.  

Maar dat is lang niet genoeg als de CSS- en Javascript-bestanden vrij groot zijn. Dat is waar minificatie om draait. 

Wat is minificatie? (en hoe dit uw site ten goede kan komen)

Verkleining is de functie van het nemen van een stukje codering en het verwijderen van alle tekens (zoals spaties, regeleinden, tabs en andere) die geen enkele betekenis hebben, behalve om de tekst leesbaarder te maken. Verkleinde WordPress-bestanden presteren op dezelfde manier als de originele code, met als enige verschil dat ze een beetje in beslag nemen less ruimte omdat ze extra informatie weglaten. Om deze reden wordt het bestand kleiner om te downloaden, wat resulteert in een snellere website in het algemeen.

Minificatie is vooral belangrijk en nuttig voor scripts (zoals Javascript-bestanden), CSS-stylesheets en andere vergelijkbare websitecomponenten.

Lees verder: Hoe (GEWELDIGE) Javascript-ontwikkelaars inhuren - Top 5 sites, klik hier - https://www.collectiveray.com/hire-javascript-developer

De belangrijkste reden om dit te doen en de voordelen voor uw site zijn:

  • Laadtijden verkorten en uw website in het algemeen sneller maken. Aangezien de meeste websites verschillende scripts en stylesheet-bestanden gebruiken, resulteert dit in VEEL extra ruimte. Hoewel je misschien denkt dat het verwijderen van spaties niet tot veel veranderingen zal leiden, kan het volledige minificatieproces van alle bestanden van een WordPress-installatie een aanzienlijk voordeel opleveren.
  • De code verduisteren voor gewone lezers. Hoewel de resulterende verkleining de code van uw site niet verbergt (dit is anders dan codeverduistering), maar het maakt het wel een stuk moeilijker voor gewone gebruikers om te begrijpen, als u zich daar zorgen over maakt. 

Hoewel het onwaarschijnlijk is dat het verkleinen van uw code een reusachtig verschil met de laadtijden van uw site, gezien als onderdeel van een complete optimalisatiestrategie, zou het een van de vele dingen zijn die u zou moeten doen. Het kan de laadtijden van uw pagina met een paar procentpunten verkorten, wat het een goede tactiek maakt om niets te implementerenless.

Wat gebeurt er tijdens het minify-proces?

In wezen gaat het minify-proces door dergelijke tekstbestanden en verwijdert alles wat alleen bedoeld is voor menselijke consumptie, omdat de machine die het bestand parseert het bestand immers niet leesbaar maakt voor mensen. Het WordPress-verkleiningsproces verwijdert alle dingen zoals extra witruimte (spaties, nieuwe regels, tabbladen), opmerkingen of andere tekst die de grootte van het bestand vergroot zonder de "semantiek" van het bestand voor de browser te verminderen. De betekenis is er nog steeds, de bestanden zijn alleen kleiner.

Dit is bijvoorbeeld hoe een normaal CSS-bestand eruit zou zien:

lichaam {
marge: 30px;
padding: 30px;
color: # FFFFFF;
achtergrond:#f7f7f7;
}
h1 {
font-size: 12px;
kleur #222222;
margin-bottom: 5px;
}

Terwijl de verkleinde versie van deze code er als volgt uit zou zien:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Je kunt zien dat de tekstuele informatie precies hetzelfde is, het is alleen ontdaan van dingen die er zijn voor de leesbaarheid. Hetzelfde concept geldt voor Javascript-bestanden.

Het eindresultaat van het gebruik van plug-ins of middelen om Javascript WordPress te verkleinen, zou zijn dat de HTML-uitvoer, samen met de CSS-bestanden en JS-bestanden die door uw website en de plug-ins worden gebruikt, er ongeveer zo uit zou zien:

verkleinde code

Hoewel dit er misschien uitziet als een hoop rotzooi, is alle betekenis er nog steeds - het is zojuist "verkleind" om alle onnodige dingen te verwijderen die zijn omvang opzwellen.

Er zijn tal van plug-ins die u kunnen helpen dit proces te bereiken, die hieronder worden vermeld.

Javascript WordPress verkleinen

Het proces om Javascript WordPress te verkleinen is vrij eenvoudig. Je hoeft alleen maar een van de onderstaande plug-ins te installeren. Houd er ook rekening mee dat de belangrijkste WordPress Javascript-bestanden al standaard zijn verkleind.

Als je de broncode van je WordPress-website bekijkt, zie je zelfs de .min.js-extensie, die aangeeft dat de daadwerkelijke bestanden al zijn verkleind.

core minify javascript wordpress-bestanden

Dit is niet noodzakelijk het geval voor plug-ins en thema's van derden.

Misschien wil je ook de extra stap nemen om extra plug-ins te verwijderen en scripts te genereren die je misschien niet nodig hebt.

Als u absoluut gefixeerd bent op prestaties, kunt u er ook voor kiezen om versies van de Javascript-bestanden te maken die ALLEEN het script bevatten dat door uw website wordt gebruikt. Zie standaard, de meeste scriptbestanden hebben extra code die is opgenomen "voor het geval dat" het nodig is.

Misschien wil je er meer over weten hoe doe je dit hier.

Verklein CSS WordPress

Nogmaals, het proces van Minify CSS WordPress is eenvoudig. U kunt gewoon een plug-in installeren en dit zal automatisch de verkleining van uw CSS-bestanden uitvoeren. Hoewel de meeste WordPress-kernbestanden een verkleinde versie van de CSS-bestanden hebben, is dit niet noodzakelijkerwijs van toepassing op alle plug-ins en thema's.

Nogmaals, we raden ook aan om een ​​CSS-codedekkingsoefening uit te voeren om overbodige CSS-code te verwijderen die gewoon dood gewicht is.

We zullen in het volgende gedeelte hieronder een aantal plug-ins noemen die CSS WordPress verkleinen. 

5 beste plug-ins voor WordPress Minify

We bespreken zowel generieke producten die in het algemeen worden gebruikt om uw website sneller te maken door middel van minificatie, als specifieke plug-ins waarvan de enige functie het minify-proces is.

1. WP Rocket

Dit is veruit onze favoriete plug-in.

De reden is simpel, dit is verreweg het beste product dat verschillende snelheidsoptimalisatietaken kan uitvoeren, op een heel eenvoudige manier, maar met een uitstekend resultaat om uw website sneller te maken, inclusief het uitvoeren van een verkleining van CSS- en Javascript WordPress-bestanden.

Echt en waar, het is slechts een van de dingen die deze plug-in doet, maar als je hem eenmaal hebt geïnstalleerd, zul je merken dat je niets anders hoeft te doen.

Zoals je hieronder kunt zien, is deze minificatie een van de basisopties voor optimalisatie. Daarmee zul je zien dat er aaneenschakeling is, dit is een secundair proces van optimalisatie, dat één bestand maakt van alle CSS- en JS-bestanden (omdat dit het ook sneller maakt om de bestanden te downloaden)

verklein javascript css wordpress plug-in

De plug-in is niet gratis, maar de prijs is erg goedkoop voor slechts $ 49. Gezien de tijdsbesparing en het resultaat dat je website sneller laadt, letterlijk in minuten, raden we je ten zeerste aan om hiervoor te kiezen.

Getuigenis van WP Rocket

We installeren deze plug-in op elke WordPress-website die we opzetten, simpelweg omdat het ons zoveel optimalisatietijd bespaart.

Klik hier voor de laagste prijs op WP Rocket

2. JCH optimaliseren

 

Hier is een kleine truc om je heel erg te helpen - gebruik JCH Optimize - dit is een tool die werkt op meerdere platforms zoals WordPress, Joomla, Drupal en Magento.

Het mooie van JCH Optimize is dat het een groot aantal Google Page Speed en andere aanbevelingen om uw website zo snel mogelijk te laten laden.

Het is geweldig omdat het bijna geen configuratie en interventie van een gebruiker nodig heeft.

Als je op zoek bent naar een snelle hostingservice, kijk dan eens naar onze host, we hebben ze hier volledig bekeken: https://www.collectiveray.com/inmotion-hosting-review

JCH optimaliseren

En je hoeft niet te rommelen met code, dit alles wordt gedaan door de plug-in - het behoudt al je originele codering, dus je zult niets breken door te rommelen. Meestal voert het ook die optimalisaties uit die meestal het moeilijkst uit te voeren zijn. Om er een paar te noemen, dit zijn degenen die goed zijn gedaan

  • Combineert CSS-bestanden van al uw sjablonen, modules en plug-ins in een enkel bestand, waardoor het aantal verzoeken dat naar uw website wordt verzonden, wordt verminderd
  • Combineert Javascript-bestanden, die meestal erg moeilijk te combineren zijn zonder de site te breken
  • Zipt de CSS en Javascript zodat ze kleiner worden en de overdrachtstijd wordt verkort
  • Verkleint Javascript en CSS om het compacter te maken en de omvang nog verder te verkleinen (vermindert eventuele extra witruimte, opmerkingen, enz.)
  • Voegt een DEFER-tag toe, zodat uw pagina eerst wordt geladen, en voert het Javascript uit nadat de pagina is geladen, waardoor de site sneller wordt geladen. Aangezien deze specifieke implementatie van cruciaal belang is voor een snelle website, hebben we dit hier uitgebreid behandeld: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Creëert IMAGE Sprites - dit vermindert ook het aantal verzoeken dat naar uw website wordt gestuurd met een zeer groot aantal en is een van de moeilijkste optimalisaties om handmatig te bereiken

Het stelt je ook in staat om enkele geavanceerde opties aan te passen, zoals het uitsluiten van bepaalde bestanden om ervoor te zorgen dat als een extensie niet werkt nadat deze door JCH Optimize is uitgevoerd, dit toch zal werken.

Het PRO-versie, die beschikbaar is voor een magere $ 29, geeft u toegang tot verschillende andere optimalisatie-opties, zoals het opnemen van inline CSS en Javascript en het laden van de Javascript asynchroon om het laden van de site niet te blokkeren.

Geloof me, installeer de plug-in, schakel deze in en bekijk uw voor- en na-resultaten. Als je geen goede verbetering krijgt, kom dan hier terug en klaag, maar ik ben er vrij zeker van dat je niet terugkomt :)

Klik hier om JCH Optimize te downloaden

3. W3 Total Cache

Dit is een andere plug-in die je zult zien als een generiek stuk software dat een heleboel dingen doet die te maken hebben met het snel maken van WordPress, inclusief het verkleinen van CSS-, JS- en HTML-bestanden.

Hoewel je zult merken dat dit heel vaak wordt genoemd als het gaat om dergelijke plug-ins, moet worden opgemerkt dat dit product absoluut geen goed idee is voor mensen die niet technisch zijn.

Instellingen voor paginacache in W3 Total Cache

Het is bekend dat het aanzienlijke problemen veroorzaakt, waarbij enkele bugs blijven bestaan, zelfs nadat de software is verwijderd en van de website is verwijderd.

onszelf bij CollectiveRay hebben geprobeerd deze plug-in meerdere keren te gebruiken, maar op dit moment en in de huidige staat raden we niet langer aan om deze te gebruiken voor verkleining of om websites sneller, ongedaan te makenless je weet precies wat je doet.

4. WP Super Minify

Deze plug-in gebruikt de PHP-framework verkleinen en het gebruik ervan combineert, verkleint en cachet inline JavaScript- en CSS-bestanden op aanvraag om het laden van pagina's te versnellen.

Door dit te activeren inpluggen, de bron van uw HTML, inline JavaScript en CSS zijn nu ontdaan van extra dingen, waardoor ze kleiner worden.

Wat anders is dan andere plug-ins die hier worden genoemd, is dat deze plug-in ALLEEN het minificatieproces uitvoert en geen andere optimalisaties, wat een geweldige keuze is voor diegenen die om welke reden dan ook alleen deze functie willen uitvoeren en niets anders.

5. Snelle snelheid verkleinen 

Hoewel er veel andere WordPress minify-plug-ins zijn die we kunnen aanbevelen, zal dit de laatste zijn die we hier noemen. 

De Fast Velocity plugin combineert alle CSS- en JavaScript-bestanden zodat de webserver met minder aanvragen te maken heeft. Tegelijkertijd verkleint het ook de bestanden en maakt het kopieën in de cache voor snellere laadtijden.

Deze plug-in schakelt automatisch de opties in om uw HTML, JavaScript en CSS te verkleinen, maar u wel schakel een of meer ervan handmatig uit door naar de Instellingen → Snelle snelheid verkleinen Tab.

Je kunt ervoor kiezen om specifieke bestanden uit te sluiten van verkleining als een van je plug-ins kapot gaat nadat je dit hebt ingeschakeld.

 

Snelle snelheid verkleinen

Afsluiten 

Hoewel het minificatieproces geen baanbrekende functie is, moet het worden geïmplementeerd als een van de verschillende taken om uw WordPress sneller te maken en we raden u ten zeerste aan een van de hierboven genoemde producten te implementeren.

Download de lijst met 101 WordPress-trucs die elke blogger zou moeten kennen

101 WordPress-trucs

Klik hier om nu te downloaden

 

Over de auteur
David Attard
Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/
David heeft de afgelopen 18 jaar in of rond de online / digitale industrie gewerkt. Hij heeft uitgebreide ervaring in de software- en webdesign-industrie met WordPress, Joomla en niches eromheen. Als digitale consultant richt hij zich op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door een combinatie van hun website en digitale platforms die vandaag beschikbaar zijn.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...