minify css html

How to Minify: CSS, HTML en JavaScript verkleinen

Het beperken van HTML, CSS en JavaScript is een van de vele kleine schakels om de laadsnelheid van je website te optimaliseren. Als je vandaag verschillende pagina's op het web bekijkt, zul je snel vaststellen dat ze in geen enkel opzicht te vergelijken zijn met de websites van 10 jaar geleden. In de begindagen was een eenvoudige HTML-code en een beetje tekst voldoende. Tegenwoordig bestaan websites echter uit uitgebreide code, vaak met HTML, CSS en JavaScript. Dit is enerzijds te wijten aan het scala van functies die nu voor websites beschikbaar zijn, maar ook aan de steeds uitgebreidere ontwerpen en templates die bij het ontwerpen van websites worden gebruikt. 

Het is niet ongewoon dat HTML-, CSS- of JavaScript-bestanden honderden kilobytes groot zijn. Om al deze code in de bestanden te verwerken en de website weer te geven, stuurt de webbrowser talrijke verzoeken (zogenaamde HTTP-verzoeken) naar de server. 

WordPress staat er niet om bekend dat het van huis uit tools voor laadtijdoptimalisatie meebrengt. Daarom moet je regelmatig de prestaties van je WordPress website controleren.

Hoe meer "requests" er worden verzonden, hoe langer de laadtijd. Om het aantal verzoeken zo laag mogelijk te houden, en dus ook de laadtijd van de website, moet je de bestanden comprimeren en zo nodig samenvoegen.

Wat betekent minificeren?

Minificatie betekent dat alle elementen die de leesbaarheid van de code ten goede komen (d.w.z. regeleinden, spaties, inspringingen, onnodige puntkomma's en commentaar) uit het bestand worden verwijderd om de bestandsgrootte te verkleinen. Dit omvat ook de omzetting van meer complexe uitdrukkingen in eenvoudiger uitdrukkingen. Zelfs de identifiers van variabelen kunnen worden afgekort, bijvoorbeeld door de variabele numberOfButtons te vervangen door n. Het effect van minificatie varieert natuurlijk sterk, afhankelijk van hoeveel van deze elementen werden opgenomen bij het schrijven van de code, maar de bestandsgrootte wordt meestal verminderd met een waarde tussen 20 en 40 procent, wat hoe dan ook relevant kan zijn voor je zoekmachine rankings. Minimaliseren is altijd zinvol en leidt zelden tot problemen.

Wat betekent comprimeren?

Code wordt gecomprimeerd door gebruik te maken van gzip codering aan de kant van de server. 

gzip bij Raidboxes

Bij Raidboxes wordt Brotli gebruikt in plaats van gzip. In ons artikel leggen wij uit wat het verschil is.

Hier worden strings die al eerder zijn verschenen vervangen door een pointer. Deze pointers bestaan uit veel minder inhoud dan de eigenlijke string. Dat komt omdat niet langer een string is voor de browser, maar een verwijzing naar de vorige string. De header van het HTTP-antwoord zal dan "content-encoding: gzip" bevatten. Het effect van compressie is extreem; je kunt de bestandsgrootte terugbrengen tot ongeveer 20 procent van de oorspronkelijke grootte.

Laadtijd verkorten

Als je ooit een tool hebt gebruikt zoals PageSpeed Insights van Google, ken je zeker deze optimalisatiesuggestie: "CSS minificeren".

Deze maatregel wordt aanbevolen door PageSpeed Insights als de verzoeken om de CSS-bestanden op te halen een sterke invloed hebben op de laadtijd van de website. Een gedetailleerde uitleg en verklaringen van andere berichten in de tool zijn te vinden in het artikel"Google Pagespeed – De belangrijkste foutmeldingen". 

Ik wil je graag laten zien hoe het verminderen van CSS de laadtijd van je website kan beïnvloeden aan de hand van een watervaldiagram van mijn blog bloggiraffe.de. De voorbeelden zijn slechts kleine delen, maar zij laten duidelijk zien hoe de laadtijd kan worden verkort.

Voorbeeld 1 – Niet gecomprimeerd:

How to Minify: CSS, HTML en JavaScript verkleinen

Voorbeeld 2 – Gecomprimeerd (gereduceerd):

How to Minify: CSS, HTML en JavaScript verkleinen

Al bij het laden van het hoofddomein kun je zien dat ik de laadtijd van 1233 milliseconden tot 860 milliseconden kon terugbrengen. Ook de laadtijd van de afzonderlijke bestanden kan in sommige gevallen minimaal verkort worden.

Wat gebeurt er als CSS en JavaScript bestanden worden samengevoegd? 

Zoals al kort vermeld in het artikel, bij het samenvoegen van CSS en JS bestanden, worden de individuele bestanden samengevoegd tot één enkel bestand. 

Dit betekent dat de browser – waarmee je een bepaalde website bezoekt – minder verzoeken naar de server hoeft te sturen om de website te kunnen weergeven en eventueel benodigde scripts te laden.

Bestanden samenvoegen

Hoe meer "requests" er worden verzonden, hoe langer de laadtijd. Om het aantal verzoeken en dus de laadtijd van de website zo laag mogelijk te houden, moet je de bestanden samenvoegen.

Een alledaags voorbeeld voor beter begrip

Stel je voor dat je naar de supermarkt gaat en je hebt 10 producten op je boodschappenlijstje staan. Maar deze staan in verschillende gangen en schappen. 

Gevolg: Het duurt ongelooflijk lang voordat je elk product hebt gevonden en in het winkelwagentje hebt gelegd. 

Oplossing: Je vertelt de supermarkt van tevoren welke producten je nodig hebt. De supermarkt biedt de producten aan op een schap, zodat je ze alleen nog maar in het winkelwagentje hoeft te leggen en aan de kassa te betalen.  

Resultaat: Door alle producten in één schap te groeperen, hoef je maar één kant uit te lopen in de supermarkt en bespaar je dus ongelooflijk veel tijd. Het werkt op een vergelijkbare manier met de combinatie van individuele codes en scripts op je website. Zodat je kunt zien hoe het geheel in de praktijk werkt, wil ik je enkele kleine voorbeelden laten zien. 

Het opslaan van gegevens helpt niet alleen de prestaties te optimaliseren.
Een bewust gebruik van hulpbronnen draagt ook bij aan het duurzamer maken van je website. Lees de artikelen over de onderwerpen Hoe groen is WordPress? en Duurzaam webdesign.

Bij sommige setups – d.w.z. combinaties van plugins en themes – kan het samenvoegen van CSS-bestanden en vooral JavaScript-bestanden helaas ook tot problemen leiden. De LCP-waarde of andere Web Vitals-waarden kunnen hierdoor ook negatief worden beïnvloed. Of het samenvoegen een positief effect heeft op je site of tot problemen leidt, is iets wat je gewoon moet testen. Maak je geen zorgen, je kunt de instelling op elk moment terugdraaien.

HTML

HTML (Hypertext Markup Language) is noodzakelijk voor de basisstructuur van een website. De teksten, links en ook afbeeldingen worden via deze weg uitgevoerd. 

Een standaard HTML-code ziet er bijvoorbeeld als volgt uit: 

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Geminificeerd:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CSS (Cascading Style Sheets) is geen echte programmeertaal. De zogenaamde Stylesheet-taal wordt echter gebruikt om het uiterlijk van afzonderlijke website-elementen te veranderen. 

Een standaard CSS-code ziet er bijvoorbeeld als volgt uit: 

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Geminificeerd:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

JavaScript is een pure scripttaal die oorspronkelijk werd ontwikkeld voor de uitvoer van dynamische HTML in webbrowsers (wikipedia.org).

Een standaard JavaScript code (wiki.selfhtml.org) ziet er bijvoorbeeld zo uit:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Geminificeerd:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

Met behulp van de bovenstaande voorbeelden kun je heel duidelijk zien hoe de minificatie van HTML, CSS en JavaScript-code werkt. Gevorderde en professionele gebruikers kunnen deze compressie ook handmatig uitvoeren met een tools zoals linkcode-generator.de. Speciale "minify plugins" of minifiers kunnen dit werk voor jou doen. Dit bespaart niet alleen tijd, maar werkt ook volledig automatisch.

4 Minify Plugins voor WordPress

In de volgende lijst heb ik vijf populaire minificatie plugins opgesomd die het werk uit handen nemen om HTML, CSS en JavaScript te comprimeren. 

Plugins en de cache

Je moet de cache van je site wissen na het installeren van nieuwe plugins of het aanbrengen van wijzigingen in de instellingen.

#1 Autoptimize

Autoptimize

De WordPress plugin Autoptimize bied je de eenvoudige optimalisatie van je website. Met slechts een paar eenvoudige stappen kun je HTML-, CSS- en JavaScript-bestanden comprimeren en zo de laadtijd van je website versnellen. 

Autoptimize verplaatst bijvoorbeeld scripts naar de footer, en vertraagt het laden van bestanden zoals HTML, CSS en JavaScript, of vele andere bestanden zoals Google Fonts.

Autoptimize bij Raidboxes

Lange tijd was Autoptimize niet compatibel met andere caches, waaronder de Raidboxes servercache. Dit probleem is nu opgelost – Autoptimize kan weer zonder aarzeling samen met Raidboxes worden gebruikt.

Zodra je de plugin in WordPress geïnstalleerd hebt, vind je in de instellingen verschillende tabbladen zoals "JS, CSS, HTML", "Afbeeldingen" en "Extra's". De individuele mogelijkheden en opties zijn hier zeer goed beschreven en zijn ook voor leken zeer eenvoudig te begrijpen.

Autoptimize WordPress

In het tabblad "JS, CSS & HTML" kun je kiezen uit verschillende optimalisatieopties voor de bestanden JavaScript, CSS en HTML. Met het tabblad "Afbeeldingen" kun je automatisch afbeeldingen optimaliseren en het laden van beeldbestanden uitstellen. 

Onder het menu-item "Extra's" kunnen verdere auto-optimalisaties worden gemaakt, bijvoorbeeld voor Google Fonts, voor emoji's en voor het laden van bestanden via domeinen van derden. 

De belangrijkste functies van Autoptimize

  • Minimalisatie / caching van HTML, CSS en JavaScript bestanden
  • Beeldoptimalisatie
  • Google Fonts verwijderen
  • Emoji's verwijderen
  • JavaScript synchroniseren
  • Compatibel met een groot aantal caching-plugins

#2 WP Super Minify

WP Super Minify

Met de plugin WP Super Minificeren kunnen CSS- en JavaScript-bestanden worden verkleind en in de cache worden opgeslagen. Het versneld laden van deze bestanden wordt vervolgens mogelijk gemaakt door het Minify PHP framework.  

Het bijzondere aan deze plugin is dat het open source software is. De broncode van de tool is dus open en kan door iedereen verder worden ontwikkeld.

Er zijn niet veel opties in de WP Super Minify instellingen. Je kunt alleen de instellingen voor de compressie van JavaScript en CSS zien.

WP Super Minify WordPress

Belangrijkste kenmerken van WP Super Minify Plugins: 

  • Compressie / reductie van CSS en JavaScript bestanden
  • Minify PHP Framework

#3 Fast Velocity Minify

Fast Velocity Minify

De plugin Fast Velocity Minify maakt laadtijdoptimalisatie voor geavanceerde gebruikers mogelijk. Enerzijds vermindert het HTTP-verzoeken door CSS- en JavaScript-bestanden samen te voegen, en anderzijds minimaliseert het de bestanden met PHP Minify.  

Na het installeren van de Minify plugin, vind je tal van instelmogelijkheden in de WordPress backend, die een beetje overweldigend kunnen zijn voor sommigen. Het goede is dat veel standaard instellingen al voorgedefinieerd zijn, zodat het voor niet-professionals voldoende is om de plugin te activeren. 

Voor gevorderde gebruikers biedt de Fast Velocity Minify plugin vele foefjes en optimaliseringsopties.

Fast Velocity Minify WordPress

Daarnaast biedt deze plugin ook een Pro-versie aan. Deze versie stelt je functies voor het uitsluiten van diverse CSS- en JavaScript-bestanden ter beschikking. 

De belangrijkste kenmerken van Fast Velocity Minify

  • Comprimeren / reduceren van HTML-, CSS- en JavaScript-bestanden
  • PHP Minify
  • Uitsluiten van bestanden en scripts
  • Statische cache-bestanden
  • WP-CLI steun
  • Compatibel met een groot aantal caching-plugins

#4 WP Speed of Light

WP Speed of Light

De plugin WP Speed of Light is ook een WordPress plugin die HTML, CSS en JavaScript bestanden combineert. De krachtige plugin heeft ook cache en Gzip compressie, een databaseschoonmaaksysteem en ook htacces-optimalisatie.  

In de gratis versie van WP Speed of Light zijn alle standaardfuncties voor het optimaliseren van je website beschikbaar. In de plugin-instellingen kun je de individuele groepen (HTML, CSS, JavaScript) selecteren die je wilt minimaliseren en combineren.

WP Speed of Light WordPress

Bovendien biedt de Pro-versie van de plugin nog enkele andere functies, zoals het uitsluiten of verplaatsen van scripts. 

WP Speed of Light biedt naast het puur comprimeren van bestanden nog veel meer functies, die je op een eenvoudige manier kunt gebruiken via de overzichtelijke backend. 

De belangrijkste functies van de Plugins: 

  • Comprimeren van HTML-, CSS- en JavaScript-bestanden
  • Cache en gzip compressie
  • Groepstools
  • Database opruimen
  • Beeldoptimalisatie

Een directe vergelijking van de plugins

 Merge + Minify
+ Refresh
WP Super
Minify
Fast Velocity
Minify
AutoptimizeWP Speed
of Light
Gratisjajajajaja
Geschikt voorBeginnerBeginnerGevorderden + ProfessionalsBeginner + GevorderdeBeginner + Gevorderde
HTML comprimerenneeneejajaja
CSS comprimerenjajajajaja
JavaScript comprimerenjajajajaja
Rating4/53/54/55/54/5

Conclusie

Het verkleinen van HTML-, CSS- of JavaScript-bestanden kan de laadtijd van je website met een paar milliseconden verlengen. WordPress biedt een aantal zeer nuttige en gratis plugins voor dit doel. 

Zelfs als deze schakel slechts een klein onderdeel van je OnPage-optimalisatie is, moet je deze altijd opnieuw controleren. Op deze manier kun je ervoor zorgen dat de laadtijd van je website niet negatief wordt beïnvloed door de bovengenoemde bestanden.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd.