förminska css html

Hur man förminskar: Minska CSS, HTML och JavaScript

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 skapats för kodens läsbarhet (dvs. radbrytningar, mellanslag, indragningar, onödiga semikolon och kommentarer) tas bort från filen för att minska filstorleken. Detta inkluderar också omvandling av mer komplexa uttryck till enklare uttryck. Även identifierarna för variabler kan förkortas, till exempel genom att ersätta variabeln NumberOfButtons med n. Naturligtvis varierar effekten av minifiering mycket beroende på hur många av dessa element som införlivades när du skrev koden, men filstorleken reduceras vanligtvis med ett värde mellan 20 och 40 procent, vilket i alla fall kan vara relevant för din ranking i sökmotorerna. Miniificing är alltid användbart och leder sällan till problem.

Vad betyder komprimering?

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

gzip vid Raidboxes

Vid Raidboxes används istället för gzip Brotli. Vad skillnaden är, förklarar vi i vår artikel.

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:

Hur man förminskar: Minska CSS, HTML och JavaScript

Exempel 2 - Komprimerat (reducerat):

Hur man förminskar: Minska CSS, HTML och JavaScript

Ä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.

Slå samman filer

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

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 .

Med vissa inställningar - dvs. kombinationer av plugins och teman - kan sammanslagning av CSS-filer och särskilt JavaScript-filer tyvärr också leda till problem. LCP-värdet eller andra Web Vitals-värden kan också påverkas negativt av detta. Oavsett om sammanslagning har en positiv effekt på din webbplats eller leder till problem, är det i slutändan lätt att testa. Oroa dig inte, du kan ångra 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. 

Plugins och cacheminnet

Du bör rensa sidans cache efter att du har installerat nya plugins eller gjort ändringar i inställningarna.

#1 Autoptimera

Komplettera automatiskt

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.

Autoptimize på Raidboxes

Under lång tid var Autoptimize inte kompatibelt med andra cacheminnen, inklusive Raidboxes Servercache. Detta problem har nu åtgärdats – Autoptimize kan återigen arbeta tillsammans med Raidboxes kan användas.

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.

Autoptimera WordPress

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

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.

WP Super Minify WordPress

Huvuddragen i WP Super Minify Plugins : 

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

#3 snabb hastighet minifierar

Snabb hastighet förminska

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.

Snabb hastighet förminska WordPress

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

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.

WP Ljusets hastighet WordPress

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 automatisktWP-hastighet
av ljus
GratisJaJaJaJaJa
Lämplig förNybörjareNybörjareAvancerade + proffsNybörjare + AvanceradNybörjare + Avancerad
HTML-komprimeringNejNejJaJaJa
CSS-komprimeringJaJaJaJaJa
JavaScript-komprimeringJaJaJaJaJa
Recension4/53/54/55/54/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.

Tyckte du om artikeln?

Med din recension hjälper du oss att förbättra vårt innehåll ytterligare.

Skriva en kommentar

Din e-postadress kommer inte att publiceras.