Att minska HTML, CSS och JavaScript är en av många små justeringsskruvar för att optimera laddningshastigheten på din webbplats. Om du tittar på olika webbplatser på nätet idag inser du snabbt att de inte på något sätt är jämförbara med webbplatserna för 10 år sedan. I början räckte det med en enkel HTML-kod och lite text. Numera består dock webbplatser av omfattande kod, som ofta består av både HTML, CSS och JavaScript. Å ena sidan beror detta på det utbud av funktioner som nu är tillgängliga för webbplatser, men också på de alltmer omfattande mönster och mallar som används i webbdesign. 

Så det är inte ovanligt att HTML-, CSS- eller JavaScript-filer snabbt är hundratals kilobyte stora. För att bearbeta all denna kod i filerna och för att kunna visa webbplatsen skickar webbläsaren många förfrågningar (så kallade HTTP-förfrågningar) till servern. 

WordPress i synnerhet är inte känt för att tillhandahålla verktyg för att optimera laddningstiden. Det är därför du bör kontrollera prestandan på din WordPress-webbplats regelbundet.

Ju fler "förfrågningar" som skickas, desto längre laddningstid. För att hålla antalet frågor så lågt som möjligt, och därmed också laddningstiden för webbplatsen, bör du komprimera filerna och slå samman dem om det behövs.

Vad betyder minifisering?

Minifiering innebär att alla element som behövs för att koden ska bli lättare att läsa (t.ex. radbrytningar, mellanslag, indragningar, onödiga semikolon och kommentarer) tas bort från filen för att minska filstorleken. Detta omfattar även konvertering av mer komplexa uttryck till enklare uttryck. Till och med identifierare av variabler kan förkortas, till exempel genom att ersätta variabeln numberOfButtons med n.

Effekten av minifiering varierar naturligtvis mycket beroende på hur många av dessa element som ingick när koden skrevs, men filstorleken minskas vanligtvis med ett värde mellan 20 och 40 procent, vilket i alla fall kan vara relevant för din placering i sökmotorerna. Minifiering är alltid vettigt och leder sällan till problem.

Vad betyder komprimering?

Koden komprimeras genom att tillämpa gzip-kodning på serversidan. 

Strängar som redan har inträffat i förväg ersätts av en pekare. Dessa pekare består av mycket mindre innehåll än den faktiska strängen. Detta  beror på att webbläsaren inte längre är  en sträng utan en referens till föregående sträng. Rubriken för HTTP-svaret innehåller sedan "content-encoding: gzip". Effekten av komprimering är extrem, du kan minska filstorleken till cirka 20 procent av sin ursprungliga storlek.

Minska laddningstiderna

Om du någonsin har använt ett verktyg som PageSpeed Insights från Google, känner verkligen till detta optimeringsförslag: "Minimera CSS"

Denna åtgärd utförs av PageSpeed Insights rekommenderas om förfrågningarna om att hämta CSS-filerna i hög grad påverkar webbplatsens laddningstid. En detaljerad förklaring och förklaringar av ytterligare meddelanden i verktyget finns i artikeln "Google Pagespeed - De viktigaste felmeddelandena". 

Hur minskningen av CSS kan påverka laddningstiden för din webbplats, skulle jag vilja visa dig med hjälp av ett vattenfallsdiagram från min blogg bloggiraffe.de . Exemplen är bara små utdrag, men de visar redan tydligt hur laddningstiden kan minskas.

Exempel 1 – Okomprimerad:

Exempel 2 - Komprimerat (reducerat):

Även när jag hämtar huvuddomänen kan jag se att jag kunde minska laddningstiden från 1233 millisekunder till 860 millisekunder. Laddningstiderna för de enskilda filerna kan också minskas till ett minimum.

Vad händer när du slår samman CSS- och JavaScript-filer? 

Som kort nämnts i artikeln kombinerar sammanslagning av CSS- och JS-filer enskilda filer till en enda fil. 

Som ett resultat måste webbläsaren - genom vilken du kommer åt en viss webbplats - skicka färre förfrågningar till servern för att kunna visa webbplatsen och ladda alla nödvändiga skript.

Ett vardagligt exempel på förståelse

Föreställ dig att gå till snabbköpet och ha 10 produkter på din inköpslista. Dessa finns dock i olika gångar och hyllor. 

Konsekvens: Det tar väldigt mycket tid tills du hittar varje enskild produkt och lägger den i kundvagnen. 

Lösning: Du berättar för snabbköpet i förväg vilka produkter du behöver. Detta ger dig dina produkter inom en hylla, så att du bara behöver lägga dem i kundvagnen och betala i kassan. 

Resultat: Genom att sätta ihop alla produkter i en hylla behöver du bara gå en väg genom snabbköpet och spara otroligt mycket tid. Detta liknar att sammanfatta enskilda koder och skript på din webbplats. Så att du kan se hur det hela fungerar i praktiken vill jag visa dig detta med små exempel. 

Dataekonomi hjälper inte bara till med prestandaoptimering.
Eftersom en medveten användning av resurser också bidrar till att göra din webbplats mer hållbar. Läs gärna artiklarna om ämnena Hur grönt är WordPress? och Hållbar webbdesign .

I vissa konfigurationer - t.ex. kombinationer av insticksprogram och teman - kan det tyvärr också leda till problem att slå ihop CSS-filer och särskilt JavaScript-filer. LCP-värdet eller andra Web Vitals-värden kan också påverkas negativt av detta.

Om sammanslagningen har en positiv effekt på din webbplats eller om den leder till problem är något som du helt enkelt måste testa i slutändan. Oroa dig inte, du kan återkalla inställningen när som helst.

HTML

HTML -språk (Hypertext Markup Language) är nödvändigt för den grundläggande ramen för en webbplats. Så här matas texterna, länkarna eller till och med bilderna ut. 

En standard HTML-kod ser till exempel ut så här: 

 <!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>

Minified:

 <!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) är inte ett korrekt programmeringsspråk. Det så kallade formatmallsspråket används dock för att ändra utseendet på enskilda webbplatselement. 

En vanlig CSS-kod ser till exempel ut så här: 

 /* 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;
}

Minified:

 /* 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 är ett rent skriptspråk som ursprungligen utvecklades för utdata från dynamisk HTML i webbläsare (wikipedia.org).

En standard JavaScript-kod (wiki.selfhtml.org) ser till exempel utså här:

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

Minified:

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

Med hjälp av ovanstående exempel kan du se mycket snyggt hur minifieringen av HTML, CSS och JavaScript-kod fungerar. Avancerade och professionella kan också utföra denna komprimering manuellt med hjälp av ett verktyg som linkcode-generator.de . Speciella "Minify Plugins" eller Minifier kan göra detta arbete åt dig. Detta sparar inte bara tid utan fungerar också helt automatiskt.

4 Minify Plugins För WordPress

I listan nedan har jag listat fem populära minifieringsplugins som kommer att göra jobbet med att komprimera HTML, CSS och JavaScript. 

#1 Autoptimera

WordPress-plugin Autoptimize erbjuder dig enkel optimering av din webbplats. Med bara några enkla steg kan du komprimera HTML-, CSS- och JavaScript-filer och därmed påskynda laddningstiden för din webbplats. 

Autoptimize flyttar till exempel skript till sidfoten och fördröjer inläsningen av filer, till exempel HTML, CSS och JavaScript, eller många andra filer, till exempel Google Fonts.

Så fort du Plugin I WordPress installerat hittar du olika flikar i inställningarna som "JS, CSS, HTML", "Pictures" och "Extras". De individuella möjligheterna och alternativen beskrivs här mycket väl och även för lekmän mycket väl förståeliga.

På fliken "JS, CSS & HTML" kan du välja mellan olika optimeringsalternativ för JavaScript-, CSS- och HTML-filerna. På fliken Bilder kan du automatiskt optimera bilder och fördröja inläsningen av bildfiler. 

Under menyalternativet "Verktyg" kan ytterligare automatiska optimeringar göras, till exempel för Google Fonts, för emojis och för att ladda filer via tredjepartsdomäner. 

Huvuddragen i Autoptimize: 

• Minimering/cachelagring av HTML-, CSS- och JavaScript-filer
• Optimering av bilder
• Ta bort Google-teckensnitt
• Ta bort emojis
• Synkronisera JavaScript
• Kompatibel med en mängd olika cachelagringar Plugins

#2 WP Super Minify

Med WP Super Minify-plugin kan CSS- och JavaScript-filer minskas i storlek och cachas. Den accelererade laddningen av dessa filer möjliggörs sedan via Minify PHP Framework. 

Det speciella med detta plugin är att det är en programvara med öppen källkod. Källkoden för verktyget är därför öppen och kan vidareutvecklas av alla.

Det finns inte många val i inställningarna för WP Super Minify. Du kan bara se inställningarna för komprimering av JavaScript och CSS.

Huvuddragen i WP Super Minify Plugins : 

• Komprimering / reduktion av CSS- och JavaScript-filer
• Minifiera PHP-ramverket

#3 snabb hastighet minifierar

Plugin-programmet Fast Velocity Minify möjliggör avancerad optimering av laddningstiden. Å ena sidan minskar det HTTP-förfrågningar genom att slå samman CSS- och JavaScript-filer, och å andra sidan minimerar det filerna med PHP Minify. 

I WordPress-backend hittar du många inställningsalternativ efter installationen av Minify-plugin, vilket säkert kan överväldiga vissa. Det som är bra är: Många standardinställningar är redan fördefinierade, så det räcker för lekmän om de aktiverar plugin. 

För avancerade användare erbjuder Fast Velocity Minify-plugin många gimmicks och optimeringsalternativ.

Dessutom bör denna Plugin också en Pro-version. På så sätt kan du utesluta olika CSS- och JavaScript-filer. 

Huvuddragen i Fast Velocity Minify: 

• Komprimering/minskning av HTML-, CSS- och JavaScript-filer
• PHP Minifiera
• Exkludera filer och skript
• statiska cachefiler
• WP-CLI Stöd
• Kompatibel med en mängd olika cachelagringar Plugins

# 4 WP Ljusets hastighet

Plugin WP Speed of Light är också ett WordPress-plugin som kombinerar HTML-, CSS- och JavaScript-filer. Det kraftfulla pluginet har också cache- och Gzip-komprimering, ett databasrensningssystem och även htacces-optimering. 

I gratisversionen av WP Speed of Light har du alla standardfunktioner för att optimera din webbplats. I plugin-inställningarna kan du välja de enskilda grupper (HTML, CSS, JavaScript) som du vill minimera och sammanfatta.

I Pro-versionen av Plugins vissa andra funktioner, till exempel.B. exklusive eller flytta skript. 

Förutom den rena komprimeringen av filer erbjuder WP Speed of Light många andra funktioner som du enkelt kan använda via den tydliga backend. 

De viktigaste funktionerna i Plugins : 

• Komprimering av HTML-, CSS- och JavaScript-filer
• Cache- och gzip-komprimering
• Gruppverktyg
• Rensning av databas
• Bildoptimering

Den Plugins i direkt jämförelse

	Sammanfoga + minifiera + Uppdatera	WP Super Minify	Snabb hastighet Minify	Komplettera automatiskt	WP-hastighet av ljus
Gratis	Ja	Ja	Ja	Ja	Ja
Lämplig för	Nybörjare	Nybörjare	Avancerade + proffs	Nybörjare + Avancerad	Nybörjare + Avancerad
HTML-komprimering	Nej	Nej	Ja	Ja	Ja
CSS-komprimering	Ja	Ja	Ja	Ja	Ja
JavaScript-komprimering	Ja	Ja	Ja	Ja	Ja
Recension	4/5	3/5	4/5	5/5	4/5

Slutsats

Att minska HTML-, CSS- eller JavaScript-filer kan öka webbplatsens laddningstider med några millisekunder. För detta har du några mycket användbara och gratis plugins att välja mellan i WordPress. 

Även om den här justeringsskruven bara är en liten del av OnPage-optimeringen bör den alltid kontrolleras om och om igen. Detta säkerställer att laddningstiden för din webbplats inte påverkas negativt av ovanstående filer.