Minska HTML, CSS och JavaScript: Så enkelt fungerar det i WordPress

Sven Scheuerle Senast uppdaterad den 21 oktober 2020
9 Min.
css minifiering
Senast uppdaterad den 21 oktober 2020

Att minifiera HTML-, CSS- och JavaScript-filer är en av många små justeringsskruvar för att optimera laddningshastigheten på din webbplats. I den här artikeln kommer du att få veta Sven Scheuerle , vad det handlar om krympande CSS, HTML och Co., hur mycket laddningstid du sparar genom mager kod och vilken WordPress - Plugins hjälper dig med implementeringen.

Om du tittar på webbplatserna på World Wide Web idag inser du snabbt att de inte på något sätt är jämförbara med sidor för 10 år sedan. I början räckte det med en enkel HTML-kod och lite text. Numera består dock webbsidor av omfattande kod, ofta bestående av både HTML, CSS och JavaScript. Detta beror delvis på utbudet av funktioner som nu är tillgängliga för webbplatser, men också på det ständigt ökande antalet mönster och mallar som används i webbdesign. 

Så det är inte ovanligt att HTML-, CSS- eller ens JavaScript-filer snabbt når hundratals kilobyte i storlek. För att bearbeta alla dessa koder i filerna och för att kunna visa webbsidan skickar webbläsaren många förfrågningar (så kallade HTTP-begäranden) till servern. 

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

Vad betyder minifiering av HTML, CSS och JavaScript?

Minifiering, det vill säga för att minska filstorleken för HTML, CSS och co. så mycket som möjligt, är en del av en bra OnPage-optimering. Även om det bara står för en liten del av laddningstiderna kan det också vara avgörande för din ranking i sökmotorerna. 

Bara WordPress är inte känt för att tillhandahålla verktyg för att optimera laddningstiden. Därför bör du förbättra prestandan för din WordPress sidan regelbundet.

Minska laddningstiderna

Varje webbplatsoperatör som någonsin har använt ett verktyg som PageSeepd Insights från Google är säker på att känna till detta optimeringsförslag: "Minska CSS"

Denna åtgärd stöds av PageSpeed Insights rekommenderas om frågorna (begäranden) för att hämta CSS-filerna i hög grad påverkar webbplatsens laddningstid. En detaljerad förklaring och förklaring av ytterligare meddelanden i verktyget finns i artikeln "Google Pagespeed - The important error messages". 

Hur att minska CSS kan påverka laddningstiden för din webbplats, skulle jag vilja visa dig med ett vattenfallsdiagram från min blogg bloggiraffe.de.  Exemplen är bara små avsnitt, men de visar redan tydligt hur man minskar laddningstiden.

Exempel 1 - Okomprimerat (inte komprimerat):

css återkomprimerad
Vattenfallsdiagram - utan att komprimera HTML-, CSS- och JavaScript-filer

Exempel 2 - Komprimerat (reducerat):

css komprimerad
Vattenfallsdiagram - med komprimering av HTML-, CSS- och JavaScript-filer

Ä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 komprimerar HTML-, CSS- och JavaScript-filer? 

Som nämnts kort i artikeln, när du komprimerar filer som .B.HTML, CSS och JavaScript kombineras 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 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 kommer att dela med snabbköpet i förväg vilka produkter du behöver. Detta ger dig dina produkter i 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 måste du bara gå en väg genom snabbköpet och spara så mycket tid. Så här fungerar det med minifiering av enskilda koder och skript på din webbplats. Så att ni kan se hur det hela fungerar i praktiken skulle jag vilja visa er detta med små exempel. 

Dataekonomi hjälper inte bara till med prestandaoptimering.
Eftersom en medveten resursanvändning också bidrar till att göra din webbplats mer hållbar. Läs bidragen till ämnena Hur grönt är WordPress ? och Green Hosting.

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>

Komprimerade: 

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

Komprimerade:

 /* 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 skriptspråk som ursprungligen utvecklades för utdata av dynamisk HTML i webbläsare (wikipedia.org). Idag har webbplatsoperatörer möjlighet att använda HTML och CSS utökas. 

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

Komprimerade: 

 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 mycket fint se hur minifieringen av HTML-, CSS- och JavaScript-kod fungerar. Som avancerad och professionell kan du också utföra den här komprimeringen manuellt med ett verktyg som linkcode-generator.de. Som WordPress -Användare kan ge dig speciella "Minify Plugins " för att ta detta arbete. Detta sparar inte bara tid, utan fungerar också helt automatiskt.

5 Minifiera Plugins För WordPress

I följande lista har jag fem populära minifieringar Plugins som kommer att ta arbetet med att komprimera HTML, CSS och JavaScript. 

#1 koppla + minifiera + uppdatera

koppla minifiera uppdatering

Hur namnet på Plugins Merge + Minify + Refresh säger att fokus för det här verktyget ligger på att komprimera CSS- och JavaScript-kod. 

Den Plugin sammanfattar CSS- och Javascript-filer (Cascading Style Sheets) i enskilda grupper. Dessa minimeras i sin tur med Minify för CSS och Google Closure för JavaScript. 

Efter installation i WordPress erbjuder dig Plugin Sammanfoga + Minify + Uppdatera vissa inställningar för att optimera laddningstiden för din webbplats.

slå samman minifiera uppdatera wordpresspng

Du kan till exempel välja om CSS-filer och JS-filer ska sammanfogas eller inte. Om komprimering ska ske via WP-Cron och om data ska cachelagras utanför eller komprimeras i en Gzip-fil. 

En mycket användbar funktion är den så kallade "HTTP2 Server Push". Servern skickar flera svar för en fråga till rätt webbläsare. 

De 3 viktigaste funktionerna i Merge + Minify + Refresh Plugins : 

  • Sammanfoga/komprimera CSS och JavaScript
  • HTTP2-server push
  • Multisite-kapabel

#2 WP Super Minify

wp super minifiera

Med Plugin WP Super Minify kan skalas ut och cachelagras i CSS- och JavaScript-filer. Den påskyndade inläsningen av dessa filer görs sedan möjlig via Minify PHP Framework. 

Det speciella med det här Plugin att detta är en programvara med öppen källkod. Verktygets källkod är därför öppen och kan vidareutvecklas av alla användare.

Det finns inte mycket val för användare i inställningarna för WP Super Minify. Endast inställningarna för att komprimera JavaScript och CSS kan ses här.

wp super minif wordpress

Huvuddragen i WP Super Minify Plugins : 

  • Komprimering /minskning av CSS- och Javascript-filer
  • Minifiera PHP-ramverket

#3 snabb hastighet minifierar

snabb hastighet minifiera

Den Plugin Fast Velocity Minify möjliggör optimering av laddningstid för utvecklare och avancerade användare. Å ena sidan minskar det HTTP-begäranden genom att slå samman CSS- och Javascript-filer, och å andra sidan minimerar det filerna med PHP Minify. 

I WordPress -Backend hittar du efter installation av Minify Plugins många inställningsalternativ som säkert kan överväldiga den ena eller den andra användaren. Det som är bra är att många standardinställningar redan är inställda, så det räcker att lekmän Plugin Aktivera. 

För avancerade användare och utvecklare kan Plugin Fast Velocity Minify många spel och optimeringsmöjligheter.

snabb hastighet minifiera 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 automatiskt

autoptimisera

Den WordPress - Plugin Autoptimize ger dig enkel optimering av din webbplats. I bara några enkla steg kan du komprimera HTML-, CSS- och JavaScript-filer för att påskynda sidans laddningstid. 

Genom att göra det, autoptimize- Plugin Skript, till exempel i sidfoten och fördröjer inläsningen av filer, till exempel HTML, CSS och JavaScript, eller av många andra filer, till exempel Google Fonts.

Viktigt för RAIDBOXES Kunder

Autoptimize är inte kompatibelt med andra cacheminnen, t.ex. med RAIDBOXES Servercachen. Vi avråder därför starkt från att använda Autoptimize på vårt system!

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.

autoptimisera 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 "Extras" kan ytterligare automatiska optimeringar göras, t..B ex. för Google Fonts, för emojis samt 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

#5 WP-ljusets hastighet

wp ljusets hastighet

När det gäller Plugin WP Speed of Light är också en WordPress - Plugin , som sammanfattar HTML-, CSS- och JavaScript-filer. De mäktiga Plugin har också cache- och Gzip-komprimering, ett databasrensningssystem och htacces-optimering. 

I den kostnadsfria versionen av WP Speed of Light Plugins alla standardfunktioner är tillgängliga för att optimera din webbplats. På så sätt kan du Plugin inställningarna väljer de enskilda grupper (HTML, CSS, JavaScript) som du vill minimera och sammanfatta.

wp hastighet av lätt 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 hjälpa dig att öka webbplatsens laddningstider med några millisekunder. För detta är du WordPress några mycket användbara och gratis Plugins att välja mellan. 

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

Bidragsbild: Paula Schmidt | Unsplash (unsplash)

Sven Scheuerle - Egenföretagare frilansare och affiliate marknadsförare med passion, har varit aktiv i online marknadsföring i många år. Han är också bloggare och rapporterar regelbundet på sin blogg BLOGGiraffe.de, om egenföretagande i onlinebranschen och ger sina läsare tips & tricks.

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.