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

9 Min.
css-mijnbouw
Laatst bijgewerkt op

De miniaturisatie van HTML-, CSS- en JavaScript-bestanden is een van de vele kleine aanpassingen om de laadsnelheid van uw website te optimaliseren. In dit artikel leggen we uit Sven Scheuerlewat de miniaturisatie van CSS, HTML en Co. inhoudt, hoeveel laadtijd u bespaart door gebruik te maken van lean code en welke WordPress -Plugins helpen u met de implementatie.

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 te vergelijken zijn met sites van 10 jaar geleden. 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 ontwerpen en templates die in het webdesign worden gebruikt. 

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

Hoe meer "verzoeken" er worden verstuurd, hoe langer de laadtijd. Om het aantal vragen zo laag mogelijk te houden, en dus de laadtijd van de website, dient u de bestanden samen te voegen en te comprimeren.  

Wat betekent miniaturisatie 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 uw positie in de zoekmachines. 

Rechtstreeks WordPress is niet bekend dat ze inherente instrumenten hebben voor het optimaliseren van de laadtijd. Daarom moet u de prestaties van uw WordPress -Controleer de pagina regelmatig.

RB Performance E Book Nieuwsbrief 02

Verminder de laadtijden

Elke website-exploitant die al gebruik heeft gemaakt van een tool als PageSeepd Inzichten van Google, weet met zekerheid deze optimalisatie suggestie: "Verminder CSS".

Deze maatregel wordt aanbevolen wanneer PageSpeed Insightsde 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 is te vinden in het artikel "Google Pagespeed - De belangrijkste foutmeldingen”. 

Hoe de verkorting van CSS de laadtijd van uw website kan beïnvloeden, wil ik u graag laten zien met een watervaldiagram uit mijn blog bloggiraffe.com tonen. De voorbeelden zijn slechts kleine delen, maar ze laten duidelijk zien hoe de laadtijd kan worden verkort.

Voorbeeld 1 - Ongecomprimeerd (niet verkleind):

css hergecomprimeerd
Watervaldiagram - zonder compressie van HTML-, CSS- en JavaScript-bestanden

Voorbeeld 2 - Gecomprimeerd (verkleind):

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

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

Wat gebeurt er bij het comprimeren van HTML-, CSS- en JavaScript-bestanden? 

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

Als gevolg daarvan hoeft de browser die u 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 om te begrijpen

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

Gevolg: Het kost veel tijd om elk product te vinden en in het winkelwagentje te stoppen. 

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

Resultaat: Door alle producten samen te voegen in één schap, hoeft u maar één weg door de supermarkt te lopen en bespaart u ongelofelijk veel tijd. Het werkt op dezelfde manier met de miniaturisatie van individuele codes en scripts van uw website. Zodat u kunt zien hoe het geheel in de praktijk werkt, wil ik u dit graag laten zien met kleine voorbeelden. 

Data economy helpt niet alleen om de prestaties te optimaliseren.
Want een bewust gebruik van middelen draagt ook bij aan het verduurzamen van uw website. Lees de bijdragen aan de onderwerpen Hoe groen is WordPress dat? en Groen hosting door.

HTML

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

Een standaard HTML-code ziet er bijvoorbeeld zo 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 stylesheet-taal wordt echter gebruikt om het uiterlijk van afzonderlijke website-elementen te veranderen. 

Een standaard CSS-code ziet er bijvoorbeeld zo 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 is ontwikkeld voor de uitvoer van dynamische HTML in webbrowsers (wikipedia.org). Hiermee hebben de beheerders van webpagina's vandaag de dag de mogelijkheid om HTML en CSS uitgebreid te gebruiken. 

Een standaard JavaScript-code (wiki.selfhtml.org) ziet er als volgt 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); 

Aan de hand van bovenstaande voorbeelden kunt u heel mooi zien hoe de miniaturisatie van HTML, CSS en JavaScript code werkt. Als gevorderde en professionele gebruiker kunt u deze compressie ook handmatig uitvoeren en gebruik maken van een tool als linkcode-generator.com gebruik. Als WordPress gebruiker kan speciale "MinifyPlugins" het werk voor u doen. Dit bespaart niet alleen tijd, maar werkt ook volledig automatisch.

5 Minify Pluginsvoor WordPress

In de volgende lijst heb ik vijf populaire miniaturisatiesPlugins opgesomd die het werk van het comprimeren van HTML, CSS en JavaScript voor u doen. 

#1 Merge + Minify + Refresh

samenvoegen minify refresh

Zoals de naam van de Plugins Samenvoegen + Minifiëren + Vernieuwen (Merge + Minimize + Refresh) zegt al, de focus van deze tool ligt volledig op de compressie van CSS en JavaScript code. 

Dit Plugincombineert 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 installatie inWordPress , biedt PluginMerge + Minify + Refresh u een aantal instellingen om de laadtijd van uw website te optimaliseren.

samenvoegen minify refresh wordpresspng

U kunt hier onder andere kiezen of CSS-bestanden en JS-bestanden moeten worden samengevoegd of niet. Bovendien, of de compressie moet worden gedaan via WP-Cron en of de gegevens moeten worden gecached buiten of gecomprimeerd in een gzip-bestand. 

Een zeer nuttige functie is de zogenaamde "HTTP2 Server Push". De server stuurt meerdere antwoorden voor één vraag naar de betreffende browser. 

De 3 belangrijkste functies van Merge + Minify + RefreshPlugins : 

  • Samenvoegen / Compressie van CSS en JavaScript
  • HTTP2 Server Push
  • Multisite geschikt

#2 WP Super Minify

wp super minify

Met de Plugin WP Super Minify CSS- en JavaScript-bestanden kunnen worden aangepast en in de cache worden geplaatst. Het versneld laden van deze bestanden wordt vervolgens ingeschakeld via Minify PHP Framework. 

Het bijzondere aan deze Pluginis 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. Alleen de instellingen voor de compressie van JavaScript en CSS worden hier getoond.

wp-superminif WordPress

De belangrijkste functies van de WP Super MinifyPlugins : 

  • Compressie / reductie van CSS- en Javascript-bestanden
  • Minimaliseren van het PHP-kader

#3 Snelle Snelheid Minify

snelle snelheid minify

De Plugin Snelle snelheid Minify maakt het mogelijk de laadtijd te optimaliseren voor ontwikkelaars en gevorderde gebruikers. Aan de ene kant vermindert het HTTP-verzoeken door CSS- en Javascript-bestanden samen te voegen en aan de andere kant minimaliseert het de bestanden met PHP Minify. 

In de WordPress backend vindt u na de installatie van de Minify tal Pluginsvan instelmogelijkheden, die voor sommige gebruikers een beetje overweldigend kunnen zijn. Het goede is: veel standaardinstellingen zijn al voorgedefinieerd, dus het is genoeg voor leken om het te Pluginactiveren. 

Voor gevorderde gebruikers en ontwikkelaars biedt PluginFast Velocity Minify vele gadgets en optimalisatiemogelijkheden.

snelle snelheid minify WordPress

Daarnaast biedt dit Pluginook een Pro-versie. In deze versie heeft u functies voor het uitsluiten van diverse CSS- en JavaScript-bestanden. 

De belangrijkste functies van Fast Velocity Minify

  • Compressie / verkleining van HTML-, CSS- en JavaScript-bestanden
  • PHP Minify
  • Exclusief bestanden en scripts
  • statische cache-bestanden
  • WP CLI-ondersteuning
  • Compatibel met een verscheidenheid aan cachingPlugins

#4 Autoptimize

autoptimiseren

De- WordPress Plugin Autoptimisatie biedt u de eenvoudige optimalisatie van uw website. In slechts enkele stappen kunt u HTML-, CSS- en JavaScript-bestanden comprimeren om de laadtijd van uw pagina te versnellen. 

De Autoptimize-Plugin scripts in de voettekst, bijvoorbeeld, en vertraagt het laden van bestanden, zoals HTML, CSS en JavaScript, of vele andere bestanden, zoals Google Fonts. Bovendien is de Plugin compatibel met vele bekende cachingsystemenPlugins. 

Zodra u de Pluginin hebt WordPress geïnstalleerd, vindt u verschillende tabbladen in de instellingen 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.

autoptimiseren WordPress

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

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

De belangrijkste functies van Autoptimize

  • Minimalisatie / caching van HTML-, CSS- en JavaScript-bestanden
  • Optimalisatie van beelden
  • Google-lettertypen verwijderen
  • Emojis verwijderen
  • Synchroniseer JavaScript
  • Compatibel met een verscheidenheid aan cachingPlugins

#5 WP Snelheid van het licht

wp-snelheid van het licht

Bij de Plugin WP Snelheid van het licht het is ook een WordPress -Plugindie HTML-, CSS- en JavaScript-bestanden combineert. De krachtige Plugin beschikt ook over cache en gzip compressie, een database schoonmaak systeem en ook htacces optimalisatie. 

In de gratis versie van WP Speed of Light zijnPlugins alle standaardfuncties voor het optimaliseren van uw website beschikbaar. In de Plugininstellingen kunt u de afzonderlijke groepen (HTML, CSS, JavaScript) selecteren die u wilt minimaliseren en combineren.

wp-snelheid van het licht WordPress

Daarnaast Pluginsheeft de Pro-versie nog enkele functies, zoals het uitsluiten of verplaatsen van scripts. 

WP Speed of Light biedt naast de pure compressie van bestanden nog veel meer functies, die u eenvoudig kunt gebruiken via de overzichtelijke backend. 

De belangrijkste functies van de Plugins: 

  • Compressie van HTML-, CSS- en JavaScript-bestanden
  • Cache en Gzip-compressie
  • Groepstools
  • Schoonmaken van databases
  • Beeldoptimalisatie

De Pluginsin directe vergelijking

 Samenvoegen + Minifiëren
+ Verfrissen
WP Super
Minimaliseer
snelle snelheid
Minimaliseer
AutoptimisatieWP Snelheid
van licht
Gratisjajajajaja
Geschikt voorbeginnersbeginnersgevorderden + professionalsbeginners + gevorderdenbeginners + gevorderden
HTML-compressieneeneejajaja
CSS-compressiejajajajaja
JavaScript-compressiejajajajaja
Evaluatie4/53/54/55/54/5

Conclusie

Het verkleinen van HTML-, CSS- of JavaScript-bestanden kan de laadtijd van uw website met enkele milliseconden verlengen. U kunt kiezen uit een aantal WordPress zeer nuttige en gratis Pluginsexemplaren. 

Zelfs als deze instelschroef slechts een klein onderdeel is van uw OnPage-optimalisatie, moet deze altijd opnieuw worden gecontroleerd. Op deze manier kunt u ervoor zorgen dat de laadtijd van uw website niet negatief wordt beïnvloed door de bovengenoemde bestanden.

Beeld: Paula Schmidt | Unsplash

Sven Scheuerle - Zelfstandige freelancer en affiliate marketeer met passie, is al vele jaren actief in online marketing. Daarnaast is hij een 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.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een commentaar

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.