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

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

Minifying 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 lean-kod och som WordPress - Plugins hjälpa dig med genomförandet.

Om man tittar på webbplatser på World Wide Web idag, inser du snabbt att de inte på något sätt är jämförbara med sidor 10 år sedan. I början var en enkel HTML-kod och lite text tillräckligt. Numera består dock webbsidor av omfattande kod, ofta bestående av både HTML, CSS och JavaScript. Detta beror delvis på de olika funktioner som nu finns 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 "begäranden" skickas, desto längre laddningstid. För att hålla antalet frågor så lågt som möjligt, och därmed laddningstiden för webbplatsen, 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 på 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 hos din WordPress sida regelbundet.

Minska laddningstiderna

Alla webbplatsoperatörer som någonsin har använt ett verktyg som PageSeepd Insikter Google, är säkert medveten om 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 platsens laddningstid. En detaljerad förklaring och förklaring av ytterligare meddelanden i verktyget finns i artikeln "Google Pagespeed - Viktiga felmeddelanden". 

Hur minska CSS kan påverka laddningstiden på din webbplats, skulle jag vilja använda ett vattenfall diagram från min blogg bloggiraffe.de Visa. Exemplen är bara små avsnitt, men de visar redan tydligt hur du kan minska laddningstiden.

Exempel 1 - Okomprimerad (inte komprimerad):

css komprimeras
Vattenfall diagram - utan att komprimera HTML, CSS och JavaScript-filer

Exempel 2 - Komprimerad (reducerad):

css komprimerad
Vattenfall diagram - 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å reduceras till ett minimum.

Vad händer när HTML-, CSS- och JavaScript-filer komprimeras? 

Som nämnts kortfattat i artikeln, när du komprimerar filer som HTML, CSS och JavaScript, enskilda filer kombineras till en enda fil. 

Som ett resultat måste webbläsaren – genom vilken du ansluter till en viss webbplats – skicka färre förfrågningar till servern för att visa webbplatsen och läsa in nödvändiga skript.

Ett dagligt exempel på förståelse

Tänk dig att gå till snabbköpet och har 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 varenda produkt och lägga 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, du behöver bara gå en väg genom snabbköpet och spara så mycket tid. Detta är hur det fungerar 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 användning av resurser bidrar också till att göra din webbplats mer hållbar. Läs bidragen till ämnena Hur grönt är WordPress ? Och Grön Hosting Av.

HTML

Html (Hypertext Markup Language) är nödvändigt för den grundläggande ramen för en webbplats. Så här matas texter, länkar eller till och med bilder ut. 

En vanlig 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 riktigt 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 skript-bara språ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 vanlig JavaScript-kod (wiki.selfhtml.org) ser ut så här, till exempel:

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

5 Minify (på samma sätt som) Plugins För WordPress

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

#1 Sammanfogning + Minify + Uppdatera

sammanfoga minify refresh

Hur namnet på Plugins Slå samman + Minify + Uppdatera (Merge + Minimera + Update) säger redan, är fokus för detta verktyg på att komprimera CSS och JavaScript-kod. 

Det är Plugin sammanfattar css-filer (Cascading style sheets) och Javascript-filer i enskilda grupper. Dessa i sin tur minimeras med Minify för CSS och Google Stängning för JavaScript. 

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

slå samman minify uppdatera wordpresspng

Du kan till exempel välja om CSS-filer och JS-filer ska sammanfogas eller inte. Dessutom, om komprimering bör 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 : 

  • Koppla/komprimera CSS och JavaScript
  • PUSH-server för HTTP2-server
  • Multisite-kapabel

#2 WP Super Minify

wp super minify

Med Plugin WP Super Minify CSS- och JavaScript-filer kan krympas och cachelagras. Den accelererade lastning av dessa filer görs sedan möjligt via Minify PHP Framework. 

Det speciella med detta Plugin att detta är en ö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
  • Minify PHP Ram

#3 snabb hastighet Minify

snabb hastighet minify

Det är Plugin Snabb hastighet Minify möjliggör tidsoptimering 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ällningar alternativ 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 tillräckligt för lekmän att Plugin Aktivera. 

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

snabb hastighet minify WordPress

Dessutom har detta 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 Minify
  • Exkludera filer och skript
  • statiska cachefiler
  • SUPPORT FÖR WP CLI
  • Kompatibel med en mängd olika caching Plugins

#4 Autoptimera

autoptimize autoptimize

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

Därvid 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. RAIDBOXES Server-cache. Vi avråder därför bestämt från att använda Autoptimize på vårt system!

Så fort du Plugin I WordPress installeras hittar du olika flikar i inställningarna som "JS, CSS, HTML", "Bilder" och "Extras". Individen möjligheter och alternativ beskrivas här mycket väl och också för lekmän mycket väl begripligt.

autoptimize autoptimize WordPress

I 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.ex. 

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 caching Plugins

#5 WP Ljusets hastighet

wp hastighet av ljus

När det gäller Plugin WP Ljusets hastighet Det är också en WordPress - Plugin , som sammanfattar HTML-, CSS- och JavaScript-filer. Den kraftfulla Plugin har också cache och Gzip komprimering, en databas rensning system, och htacces optimering. 

I den fria 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ällningar väljer de enskilda grupper (HTML, CSS, JavaScript) som du vill minimera och sammanfatta.

wp hastighet av ljus WordPress

Dessutom, i Pro-versionen av Plugins vissa andra funktioner, till exempel att utesluta eller flytta skript, är tillgängliga. 

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
  • Verktyg för grupper
  • Rensning av databas
  • Bildoptimering

Det är Plugins i direkt jämförelse

 Slå samman + Minify
+ Uppdatera
WP Super
Minify
Snabb hastighet
Minify
AutoptimizeWP-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

Om du minskar HTML-, CSS- eller JavaScript-filer kan du ö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.

Bidrag bild: Paula Schmidt | Ta av

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

Liknande artiklar

Kommentarer om den här artikeln

Skriv en kommentar

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