Reducer HTML, CSS og JavaScript: Dette er, hvor nemt det virker i WordPress

Sven Scheuerle Senest opdateret den 21. oktober 2020
9 Min.
css minification
Senest opdateret den 21. oktober 2020

Minifying HTML,CSS og JavaScript-filer er en af mange små justeringsskruer for at optimere indlæsningshastigheden på dit websted. I denne artikel får du at vide, at Sven Scheuerle , hvad det handler om faldende CSS, HTML og Co,, hvor meget belastningstid du sparer gennem lean kode, og som WordPress - Plugins hjælpe dig med implementeringen.

Hvis man ser på webstederne på World Wide Web i dag, indser man hurtigt, at de på ingen måde kan sammenlignes med sider for 10 år siden. I begyndelsen var en simpel HTML-kode og lidt tekst nok. I dag består websider imidlertid af omfattende kode, der ofte består af både HTML, CSS og JavaScript. Dette skyldes dels den vifte af funktioner, der nu er tilgængelige for websteder, men også det stadigt stigende antal designs og skabeloner, der bruges i webdesign. 

Så det er ikke ualmindeligt, at HTML, CSS eller endda JavaScript-filer hurtigt når hundreder af kilobyte i størrelse. For at behandle alle disse koder i filerne og for at kunne vise websiden sender webbrowseren adskillige anmodninger (såkaldte HTTP-anmodninger) til serveren. 

Jo flere "anmodninger" der sendes, jo længere er indlæsningstiden. For at holde antallet af forespørgsler så lavt som muligt, og dermed belastningstiden på webstedet, skal du flette og komprimere filerne.  

Hvad betyder rensning af HTML, CSS og JavaScript?

Minification , det vil sige at reducere filstørrelsen på HTML, CSS og co. så meget som muligt - er en del af enhver god OnPage-optimering. Selvom det kun tegner sig for en lille del af indlæsningstiderne, kan det også være afgørende for dine placeringer i søgemaskinerne. 

Bare WordPress er ikke kendt for at levere værktøjer til optimering af opladningstid. Du bør derfor forbedre ydeevnen for WordPress side med jævne mellemrum.

Reducer indlæsningstider

Enhver hjemmeside operatør, der nogensinde har brugt et værktøj som PageSeepd Insights fra Google er sikker på at kende denne optimering forslag: "Reducer CSS"

Denne foranstaltning understøttes af PageSpeed Insights anbefales, hvis forespørgslerne (anmodningerne) om at hente CSS-filerne i høj grad påvirker webstedets indlæsningstid. En detaljeret forklaring og forklaring af yderligere meddelelser i værktøjet kan findes i artiklen "Google Pagespeed - De vigtigste fejlmeddelelser". 

Hvordan reducere CSS kan påvirke indlæsningstiden på dit websted, vil jeg gerne vise dig med et vandfald diagram fra min blog bloggiraffe.de.  Eksemplerne er kun små sektioner, men de viser allerede tydeligt, hvordan du reducerer indlæsningstiden.

Eksempel 1 - Ukomprimeret (ikke skjult):

css rekomprimeret
Vandfaldsdiagram - uden at komprimere HTML-, CSS- og JavaScript-filer

Eksempel 2 - Komprimeret (reduceret):

css komprimeret
Vandfaldsdiagram - med komprimering af HTML-, CSS- og JavaScript-filer

Selv når jeg henter hoveddomænet, kan jeg se, at jeg var i stand til at reducere belastningstiden fra 1233 millisekunder til 860 millisekunder. Indlæsningstiderne for de enkelte filer kan også reduceres til et minimum.

Hvad sker der, når html-, CSS- og JavaScript-filer komprimeres? 

Som nævnt kort i artiklen kombineres individuelle filer i en enkelt fil, når du komprimerer filer som .B.HTML, CSS og JavaScript. 

Som et resultat skal browseren - hvorigennem du får adgang til et bestemt websted - sende færre anmodninger til serveren for at vise webstedet og indlæse eventuelle nødvendige scripts.

Et hverdagseksempel på forståelse

Forestil dig at gå i supermarkedet og have 10 produkter på din indkøbsliste. Disse fås dog i forskellige gange og hylder. 

Konsekvens: Det tager en frygtelig masse tid, indtil du finder hvert enkelt produkt og læg det i indkøbskurven. 

Løsning: Du vil dele med supermarkedet på forhånd, hvilke produkter du har brug for. Dette giver dig dine produkter inden for en hylde, så du kun behøver at lægge dem i indkøbskurven og betale ved kassen. 

Resultat: Ved at sammensætte alle produkterne på en hylde skal du bare gå en vej gennem supermarkedet og spare så meget tid. Sådan fungerer det med minificering af individuelle koder og scripts på dit websted. For at De kan se, hvordan det hele fungerer i praksis, vil jeg gerne vise Dem dette med små eksempler. 

Dataøkonomi hjælper ikke kun med optimering af ydeevnen.
Fordi en bevidst brug af ressourcer også bidrager til at gøre din hjemmeside mere bæredygtig. Læs bidragene til emnerne Hvor grøn er WordPress ? og Green Hosting.

HTML

HTML (Hypertext Markup Language) er nødvendig for en websteds grundlæggende struktur. Dette er, hvordan de tekster, links eller endda billeder er output. 

En standard-HTML-kode ser f.eks. 

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

Komprimeret: 

 <!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 (Overlappende typografiark) er ikke et korrekt programmeringssprog. Det såkaldte typografiarksprog bruges dog til at ændre udseendet af individuelle webstedselementer. 

En standard-CSS-kode ser f.eks. 

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

Komprimeret:

 /* 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 er et sprog, der kun er beregnet til scripting, og som oprindeligt blev udviklet til output af dynamisk HTML i webbrowsere (wikipedia.org). I dag har webstedsoperatører mulighed for at bruge HTML og CSS udvidet. 

En JavaScript-standardkode (wiki.selfhtml.org) ser f.eks.

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

Komprimeret: 

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

Ved hjælp af ovenstående eksempler kan du se meget pænt, hvordan minificeringen af HTML, CSS og JavaScript-kode fungerer. Som avanceret og professionel kan du også udføre denne komprimering manuelt ved hjælp af et værktøj som linkcode-generator.de. Som WordPress -Brugere kan give dig særlige "Minify Plugins " for at tage dette arbejde. Dette sparer ikke kun tid, men fungerer også fuldt automatisk.

5 Minify Plugins For WordPress

I den følgende liste, har jeg fem populære minification Plugins som vil tage arbejdet med at komprimere HTML, CSS og JavaScript. 

#1 Flet + Minify + Opdater

flette minify-opdatering

Hvordan navnet på Plugins Flet + Minify + Opdater siger, at fokus for dette værktøj er på at komprimere CSS- og JavaScript-kode. 

Den Plugin opsummerer overlappende typografiark (CSS) og Javascript-filer i individuelle grupper. Disse igen er minimeret med Minify for CSS og Google Lukning for JavaScript. 

Efter installation i WordPress tilbyder dig Plugin Flet + Minify + Opdater nogle indstillinger for at optimere indlæsningstiden på dit websted.

flette minify opdatere wordpresspng

Du kan f.eks. vælge, om du vil flette CSS-filer og JS-filer eller ej. Også, om komprimering skal finde sted via WP-Cron, og om dataene skal cachelagres udenfor eller komprimeres i en Gzip-fil. 

En meget nyttig funktion er den såkaldte "HTTP2 Server Push". Serveren sender flere svar på en forespørgsel til den relevante browser. 

De 3 vigtigste funktioner i Merge + Minify + Refresh Plugins : 

  • Flet/komprimer CSS og JavaScript
  • Push på HTTP2-server
  • Multisite-kompatibel

#2 WP Super Minify

wp super minify

Med Plugin WP Super Minify kan skaleres ud og cachelagres i CSS- og JavaScript-filer. Den accelererede indlæsning af disse filer er derefter muliggjort via Minify PHP Framework. 

Det særlige ved dette Plugin at dette er en open source-software. Værktøjets kildekode er derfor åben og kan videreudvikles af enhver bruger.

Der er ikke meget valg for brugerne i indstillingerne for WP Super Minify. Kun indstillingerne for komprimering af JavaScript og CSS kan ses her.

wp super minif wordpress

Hovedtrækkene i WP Super Minify Plugins : 

  • Komprimering/reduktion af CSS- og Javascript-filer
  • Minify PHP-ramme

#3 Hurtig hastighed Minify

hurtig hastighed minify

Den Plugin Fast Velocity Minify muliggør optimering af indlæsningstid for udviklere og avancerede brugere. På den ene side reducerer det HTTP-anmodninger ved at fusionere CSS- og Javascript-filer, og på den anden side minimerer det filerne med PHP Minify. 

I WordPress -Backend finder du efter installation af Minify Plugins mange indstillinger muligheder, der helt sikkert kan overvælde den ene eller den anden bruger. Det gode er, at mange standardindstillinger allerede er indstillet, så det er tilstrækkeligt for lægfolk at Plugin Aktiverer. 

For erfarne brugere og udviklere Plugin Fast Velocity Minify mange spil og optimeringsmuligheder.

hurtig hastighed minify wordpress

Desuden er dette Plugin også en Pro-version. Dette giver dig mulighed for at udelukke forskellige CSS- og JavaScript-filer. 

Hovedtrækkene i Fast Velocity Minify: 

  • Komprimering/reduktion af HTML-, CSS- og JavaScript-filer
  • PHP Minify
  • Udelade filer og scripts
  • statiske cachefiler
  • Understøttelse af WP CLI
  • Kompatibel med en række caching Plugins

#4 tilpas automatisk

automatisk optimering

Den WordPress - Plugin Autoptimize giver dig den nemme optimering af din hjemmeside. I nogle få enkle trin kan du komprimere HTML-, CSS- og JavaScript-filer for at gøre sidens indlæsningstid hurtigere. 

Ved at gøre dette, autoptimize- Plugin Scripts, for eksempel i sidefoden og forsinker indlæsningen af filer, såsom HTML, CSS og JavaScript, eller af mange andre filer, såsom Google Fonts.

Vigtigt for RAIDBOXES Kunder

Autoptimize er ikke kompatibel med andre cacher, f.eks. RAIDBOXES Servercache. Vi fraråder derfor på det kraftigste at bruge Autoptimize på vores system!

Så snart du Plugin I WordPress installeret, finder du forskellige faner i indstillingerne, såsom "JS, CSS, HTML", "Billeder" og "Extras". De individuelle muligheder og muligheder er beskrevet her meget godt og også for lægfolk meget godt forståeligt.

automatisk optimering af wordpress

Under fanen "JS, CSS &HTML" kan du vælge mellem forskellige optimeringsindstillinger for JavaScript-, CSS- og HTML-filerne. Fanen Billeder giver dig mulighed for automatisk at optimere billeder og forsinke indlæsning af billedfiler. 

Under menupunktet "Ekstra" kan der foretages yderligere automatiske optimeringer, f..B til Google Fonts, til emojis samt til indlæsning af filer via tredjepartsdomæner. 

Hovedtrækkene i Autopimize: 

  • Minimering/cachelagring af HTML-, CSS- og JavaScript-filer
  • Optimering af billeder
  • Fjern Google-skrifttyper
  • Fjern emojis
  • Synkroniser JavaScript
  • Kompatibel med en række caching Plugins

#5 lysets WP-hastighed

wp lysets hastighed

For så vidt angår Plugin WP-lysets hastighed er også en WordPress - Plugin , som opsummerer HTML-, CSS- og JavaScript-filer. Den magtfulde Plugin har også cache- og Gzip-komprimering, et databaseoprydningssystem og htacces-optimering. 

I den gratis version af WP Speed of Light Plugins alle standardfunktionerne er tilgængelige til optimering af dit websted. På denne måde kan du Plugin Indstillingerne vælger de enkelte grupper (HTML, CSS, JavaScript), som du vil minimere og opsummere.

wp hastighed lys wordpress

I Pro-versionen af Plugins nogle andre funktioner, f.eks..B. ekskludere eller flytte scripts. 

Ud over den rene komprimering af filer tilbyder WP Speed of Light mange andre funktioner, som du nemt kan bruge via den klare backend. 

De vigtigste funktioner i Plugins : 

  • Komprimering af HTML-, CSS- og JavaScript-filer
  • Cache- og Gzip-komprimering
  • Gruppere værktøjer
  • Oprydning af databaser
  • Optimering af afbildning

Den Plugins i direkte sammenligning

 Flet + Minify
+ Opdater
WP Super
Minify
Hurtig hastighed
Minify
Tilpas automatiskWP-hastighed
af lys
GratisJaJaJaJaJa
Velegnet tilBegyndereBegyndereAvanceret + ProfessionelleBegynder + AvanceretBegynder + Avanceret
HTML-komprimeringNejNejJaJaJa
CSS-komprimeringJaJaJaJaJa
JavaScript-komprimeringJaJaJaJaJa
Anmeld4/53/54/55/54/5

Konklusion

Hvis du reducerer HTML-, CSS- eller JavaScript-filer, kan det hjælpe dig med at øge webstedets indlæsningstider med et par millisekunder. Til dette er du WordPress nogle meget nyttige og gratis Plugins at vælge imellem. 

Selvom denne justeringsskrue kun er en lille del af OnPage-optimeringen, skal den altid kontrolleres igen og igen. Dette sikrer, at indlæsningstiden på dit websted ikke påvirkes negativt af ovenstående filer.

Bidrag billede: Paula Schmidt | Unsplash

Sven Scheuerle - Selvstændig freelancer og affiliate marketing med lidenskab, har været aktiv i online markedsføring i mange år. Han er også blogger og rapporterer jævnligt på sin blog BLOGGiraffe.de, om selvstændig virksomhed i online-forretningen og giver sine læsere tips & tricks.

Lignende artikler

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.