HTML, CSS en JavaScript minimaliseren: zo eenvoudig gaat dit in WordPress

Sven Scheuerle Laatst bijgewerkt op 21.10.2020
9 Min.
css-minificatie
Laatst bijgewerkt op 21.10.2020

Het minimaliseren van HTML-, CSS- en JavaScript-bestanden is een van de vele kleine aanpassingen om de laadsnelheid van je website te optimaliseren. In dit artikel legt Sven uit wat het verkleinen van CSS, HTML en co. inhoudt, hoeveel laadtijd je bespaart door gebruik te maken van een slanke code en welke WordPress plugins je bij de uitvoering helpen.

Als je vandaag de dag naar de websites op het World Wide Web kijkt, zul je al snel merken dat ze op geen enkele manier met sites van 10 jaar geleden te vergelijken zijn. In het begin volstond een eenvoudige HTML-code en een beetje tekst. Tegenwoordig bestaan webpagina's echter uit een uitgebreide code, die vaak bestaat uit HTML, CSS en JavaScript. Dit is mede te danken aan de vele functies die nu beschikbaar zijn voor websites, maar ook aan de steeds uitgebreidere designs en templates die in het webdesign worden gebruikt. 

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

Hoe meer "requests" er worden verstuurd, hoe langer de laadtijd. Om het aantal aanvragen zo laag mogelijk te houden, en daarmee ook de laadtijd van de website, dien je de bestanden samen te voegen en te comprimeren.  

Wat betekent minimalisatie van HTML, CSS en JavaScript?

Minimalisatie - d.w.z. het zoveel mogelijk verkleinen van de bestandsgrootte van HTML, CSS, etc. - maakt deel uit van elke goede OnPage-optimalisatie. Hoewel het slechts een klein deel van de laadtijd uitmaakt, kan het ook bepalend zijn voor je rankings in de zoekmachines. 

Juist WordPress staat er niet om bekend dat ze van huis uit tools voor het optimaliseren van de laadtijd meebrengen. Daarom moet je de prestaties van je WordPress-website regelmatig controleren.

Laadtijd verkorten

Elke website-eigenaar die een tool als Google's PageSeepd Insights heeft gebruikt, is vrijwel zeker bekend met deze optimalisatiesuggestie: "Verminder CSS."

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 uitleg van andere berichten in de tool, kunt u vinden in het artikel"Google Pagespeed - De belangrijkste foutmeldingen". 

Hoe de vermindering van CSS de laadtijd van uw website kan beïnvloeden, wil ik u graag laten zien met een waterval diagram 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 (niet verkleind):

css opnieuw gecomprimeerd
Watervaldiagram - zonder het comprimeren van HTML-, CSS- en JavaScript-bestanden

Voorbeeld 2 - Gecomprimeerd (gereduceerd):

gecomprimeerd css
Watervaldiagram - met het comprimeren van HTML-, CSS- en JavaScript-bestanden

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 bij het comprimeren van HTML, CSS en JavaScript bestanden? 

Zoals in het artikel kort genoemd is, worden bij het comprimeren van bestanden zoals HTML, CSS en JavaScript individuele bestanden gecombineerd tot één bestand. 

Als gevolg daarvan hoeft de browser, die je gebruikt om toegang te krijgen tot een bepaalde webpagina, minder verzoeken naar de server te sturen om de webpagina weer te geven en eventueel benodigde scripts te laden.

Een alledaags voorbeeld voor een 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 u elk product hebt gevonden en in het winkelwagentje hebt gelegd. 

Oplossing: U vertelt de supermarkt van tevoren welke producten u nodig heeft. In de supermarkt liggen de producten op een schap, zodat u ze alleen nog maar in het winkelwagentje hoeft te leggen en aan de kassa te betalen. 

Resultaat: Door alle producten in één schap samen te brengen, hoeft u maar één kant op te lopen door de supermarkt en bespaart u dus ongelooflijk veel tijd. Dit werkt op dezelfde manier met de minificatie van individuele codes en scripts van uw website. Opdat u kunt zien hoe het geheel in de praktijk werkt, wil ik u dit met kleine voorbeelden laten zien. 

Data economy helpt niet alleen bij prestatie-optimalisatie.
Omdat een bewust gebruik van hulpbronnen ook bijdraagt aan de verduurzaming van uw website. Lees de artikelen over de onderwerpen Hoe groen is WordPress ? en Groene Hosting.

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>

Samengeperst: 

 <!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 stijlbladtaal 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;
}

Samengeperst:

 /* 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). Hiermee hebben websitebeheerders tegenwoordig de mogelijkheid om HTML en CSS op een uitgebreide manier te gebruiken. 

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

Samengeperst: 

 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 kunt u heel mooi zien hoe de minificatie van HTML, CSS en JavaScript code werkt. Als gevorderde en professionele gebruiker kunt u deze compressie ook handmatig uitvoeren en een hulpmiddel gebruiken zoals linkcode-generator.de. Als WordPress gebruiker, kan de speciale "Minify Plugins" dit werk voor u doen. Dit bespaart niet alleen tijd, maar werkt ook volledig automatisch.

5 Minify Plugins voor WordPress

In het volgende lijstje heb ik vijf populaire minify plugins opgesomd die het werk van het comprimeren van HTML, CSS en JavaScript voor jou doen. 

#1 Merge + Minify + Refresh

merge minify refresh

Zoals de naam van de Plugins Samenvoegen + Minimaliseren + Vernieuwen (Samenvoegen + Minimaliseren + Vernieuwen) al zegt, ligt de nadruk van dit gereedschap geheel op het comprimeren van zowel CSS als JavaScript code. 

Deze plugin combineert Cascading Style Sheets (CSS) en Javascript-bestanden in individuele groepen. Deze worden op hun beurt geminimaliseerd met Minify voor CSS en Google Closure voor JavaScript. 

Na de installatie in WordPress biedt de Plugin Merge + Minify + Refresh u enkele instellingen om de laadtijd van uw website te optimaliseren.

merge minify refresh wordpresspng

Je kunt hier onder andere kiezen of CSS-bestanden en JS-bestanden moeten worden samengevoegd of niet. Bovendien kun je kiezen of het comprimeren gedaan moet worden via WP-Cron en of de gegevens tussendoor moeten worden opgeslagen of binnen een gzip-bestand gecomprimeerd moeten worden. 

Een zeer nuttige functie is de zogenaamde "HTTP2 Server Push". De server stuurt meteen meerdere antwoorden voor een aanvraag naar de betreffende browser. 

De 3 belangrijkste functies van Samenvoegen + Minimaliseren + Vernieuwen Plugins: 

  • Samenvoegen / Comprimeren van CSS en JavaScript
  • HTTP2-server duwen
  • Geschikt voor multisite

#2 WP Super Minify

wp super minify

Met de Plugin WP Super Minificeren CSS en JavaScript bestanden kunnen worden geminified en gecached. Het versneld laden van deze bestanden wordt vervolgens mogelijk gemaakt via 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 elke gebruiker verder ontwikkeld worden.

In de instellingen van WP Super Minify is er niet veel keuze voor gebruikers. U kunt alleen de instellingen voor de compressie van JavaScript en CSS zien.

wp super minif wordpress

Belangrijkste kenmerken van WP Super Minify Plugins: 

  • Comprimeren / reduceren van CSS- en Javascript-bestanden
  • Minify PHP Framework

#3 Fast Velocity Minify

fast velocity minify

De Plugin Snelheid Minify maakt laadtijdoptimalisatie mogelijk voor ontwikkelaars en geavanceerde gebruikers. Enerzijds vermindert het HTTP-verzoeken door CSS- en Javascript-bestanden samen te voegen, en anderzijds minimaliseert het de bestanden met PHP Minify. 

In de WordPress-backend vind je na de installatie van de Minify plugin talrijke instellingsmogelijkheden, die voor sommige gebruikers een beetje overweldigend kunnen zijn. Het goede is: veel standaardinstellingen zijn al voorgeprogrammeerd, dus het is voor leken voldoende om de plugin te activeren. 

Voor gevorderde gebruikers en ontwikkelaars biedt de Plugin Fast Velocity Minify vele foefjes en optimalisatiemogelijkheden.

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 Ondersteuning
  • Compatibel met een groot aantal caching-plugins

#4 Autoptimize

autoptimize

De WordPress -Plugin Autoptimize biedt u de eenvoudige optimalisatie van uw website. Met slechts een paar eenvoudige stappen kunt u HTML-, CSS- en JavaScript-bestanden comprimeren en zo de laadtijd van uw pagina versnellen. 

De Autoptimize-Plugin verplaatst scripts naar de voettekst en vertraagt het laden van bestanden, zoals HTML, CSS en JavaScript, of vele andere bestanden, zoals Google Fonts.

Belangrijk voor RAIDBOXES klanten

Autoptimize is niet compatibel met andere caches, zoals de RAIDBOXES server cache. Daarom raden wij het gebruik van Autoptimize op ons systeem sterk af!

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.

wordpress autoptimize

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, bijv. voor Google Fonts, voor Emojis 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

#5 WP Speed of light

wp speed of light

De Plugin WP Lichtsnelheid is ook een WordPress -Plugin, die HTML, CSS en JavaScript bestanden combineert. De krachtige Plugin heeft ook een cache en Gzip compressie, een database opruim systeem en ook een htacces optimalisatie. 

In de gratis versie van WP Speed of Light-Plugins zijn alle standaard functies voor de optimalisatie van uw website beschikbaar. In de Plugin instellingen kunt u de afzonderlijke groepen (HTML, CSS, JavaScript) selecteren die u wilt minimaliseren en combineren.

wp snelheid van het licht 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
  • Groepshulpmiddelen
  • Database opruimen
  • Beeldoptimalisatie

Een directe vergelijking van de plugins

 Samenvoegen + Minimaliseren
+ Vernieuwen
WP Super
Minify
Snelle Snelheid
Minify
AutoptimizeWP Snelheid
van Licht
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 enkele milliseconden versnellen. Hiervoor kun je bij WordPress kiezen uit een aantal zeer nuttige en gratis plugins. 

Zelfs als deze stelschroef 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.

Afbeelding bijgedragen: Paula Schmidt | Unsplash

Sven Scheuerle - Zelfstandig freelancer en affiliate marketeer met passie, is al vele jaren actief in de online marketing. Daarnaast is hij blogger en doet hij regelmatig verslag op zijn blog BLOGGiraffe.de, over zelfstandig ondernemerschap in het online bedrijfsleven en geeft hij zijn lezers tips & trucs.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.