Reklame

Hvis du driver et websted, skal du allerede vide, hvordan du gør det Brug de rigtige billedformater og optimer dine billeder til internettet 10 gratis online batchbilledeværktøjer til størrelse, konvertering og optimeringDu har brug for batchredigeringsværktøjer, når du har masser af fotos at behandle og meget lidt tid. Vi introducerer dig for de bedste batchresizers, optimizers eller konvertere, der er tilgængelige online. Læs mere . Selvom billedkomprimering er en velkendt praksis, har HTML-komprimering en tendens til at blive overset, hvilket er en skam, fordi fordelene er umagen værd.

I denne artikel skal vi gennemgå de to hovedmetoder til krympning af HTML-filer, hvorfor HTML-filer skal krympes, og hvordan man kan gøre det.

Kompression vs. minifikationen

Hvad angår optimering af HTML-filer, er der to hovedmetoder til det: kompression og minifikationen. De lyder ens på overfladen, men er faktisk to forskellige teknikker, så lad dem ikke forveksles.

minifikationen

Du kan tænke på minificering som fjernelse af unødvendige tegn og linjer i kildekoden. Tænk på indrykk, kommentarer, tomme linjer osv. Ingen af ​​disse kræves i HTML - de findes for at gøre filen lettere at læse. Trimning af disse detaljer kan barbere filstørrelse uden at påvirke noget.

Eksempel på HTML-side:

Dette er en overskrift
Send mig mail kl [email protected].
Dette er et nyt afsnit!
Dette er et nyt afsnit med fed skrift og kursiv.

Eksempel på HTML-side, minificeret:

Dette er en overskrift
Send mig mail kl [email protected].
Dette er et nyt afsnit!
Dette er et nyt afsnit med fed skrift og kursiv.

Original størrelse: 354. Minificeret størrelse: 272. Besparelser: 82 (23,16%).

Mange webudviklere og webstedsejere reserverer kun minification for JS og CSS filer, men denne forældede praksis er en fejl. HTML-minifikation er også vigtig.

Tilbage i 2000'erne var minificeringsværktøjer sjældne. Du måtte manuelt minimere filer hver gang noget ændret sig. Da HTML-filer ændres oftere end JS- og CSS-filer, var det simpelthen for trættende at minimere hver gang dengang. I dag er det et vigtigt punkt.

Compression

Når brugere besøger dit websted, gør de det ved hjælp af HTTP-protokollen. Browseren sender en anmodning til din webserver om en bestemt side, din webserver finder siden og sender derefter indholdet af denne side tilbage til den besøgende's browser.

Men fordi HTTP-protokollen understøtter komprimering, kan din webserver komprimere siden, før den sendes til den besøgende (forudsat at det er tilfældet komprimering er aktiveret i serverens indstillinger), og derefter kan den besøgende browser dekomprimere siden tilbage til sin oprindelige tilstand.

Det mest almindelige komprimeringssystem er GZIP, som er et filformat, der bruger a tabsfri komprimeringsalgoritme Hvordan fungerer filkomprimering?Hvordan fungerer filkomprimering? Lær det grundlæggende i filkomprimering og forskellen mellem tabt kontra tabfri komprimering. Læs mere kaldes DEFLATE.

Algoritmen ser efter gentagelsesforekomster af tekst i HTML-filen og erstatter derefter disse gentagelsesforekomster med henvisninger til en tidligere forekomst. Hver henvisning er blot to tal: hvor langt tilbage er referencen, og hvor mange tegn refererer vi til.

Overvej en streng tekst som denne (eksempel hentet fra GZIP-webstedet):

Blah bla bla bla.

Algoritmen genkender følgende gentagelse:

B {lah b} {lah b} {lah b} {lah b} lah.

Den første begivenhed er vores reference, så lad det være:

Blah b {lah b} {lah b} {lah b} lah.

Den anden forekomst henviser til den første forekomst, der er fem tegn bagpå og fem tegn lang:

Blah b [5,5] {lah b} {lah b} lah.

Men i dette tilfælde genkender algoritmen, at den næste forekomst er den samme sekvens af tegn, så den udvider referencelængden med yderligere fem:

Blah b [5,10] {lah b} lah.

Og igen:

Blah b [5,15] lah.

Og algoritmen er smart nok til at indse, at de næste tre tegn er de første tre tegn i referencen, så den udvides med tre:

Blah b [5,18].

Tænk nu på en typisk HTML-fil, og hvor meget gentagelse der findes inden i. Næsten hvert tag, f.eks, har et tilsvarende lukningskode. Derudover gentages mange tags hele tiden, f.eks, , ,, etc. Attributter gentages også ofte, inklusive klasse, href, og src. Det er let at se, hvorfor GZIP-komprimering er så effektiv med HTML.

Den eneste ulempe er, at webserveren har brug for lidt mere CPU til at udføre komprimeringen, hver gang en side anmodes om. Men da CPU ikke er meget bekymret i dag, er det næsten altid bedre at aktivere GZIP end at gå uden, selvom du har hosting på indgangsniveau De bedste webhostingtjenester: Delt, VPS og dedikeretLeder du efter den bedste webhostetjeneste til dine behov? Her er vores bedste anbefalinger til din blog eller dit websted. Læs mere .

Hvorfor du skal komprimere og formindske

Der er to hovedfordele, som begge er afgørende i dagens mobiltunge weblandskab.

Hurtigere sideindlæsninger

I gennemsnit kan en HTML-minifier reducere størrelsen på en fil med ca. 3 procent med grundlæggende indstillinger. Med valgfri avancerede indstillinger kan en HTML-fil reduceres med yderligere 3 til 7 procent for en potentiel reduktion på op til 10 procent. Dette oversættes direkte til hurtigere sideindlæsningstider.

Mindre båndbredde brugt

Lad os sige, at du har 10 filer, som hver er minificeret fra 50 KB til 45 KB for en samlet krympning på 50 KB. Og lad os sige, at dit websted i gennemsnit serverer 1.000 besøgende hver dag, hvor hvert besøg i gennemsnit er ti sider. HTML-minifikationen alene reducerer din båndbreddebrug med 50 MB pr. Dag (1,5 GB pr. Måned).

Kompression + Minifikation

Som du kan se, er HTML-minifikation nyttig alene, især når dit websted bliver større, filer bliver større og trafikken øges. Noter det Googles retningslinjer for PageSpeed anbefaler at minimere HTML, så hvis du er skeptisk, så lad det overbevise dig om andet.

Men hvad der er godt ved HTML-optimering er, at du ikke behøver at vælge hverken minificering eller komprimering. Du kan gøre begge dele! Faktisk dig skulle gerne gør begge dele.

I gennemsnit kan du forvente, at GZIP-komprimering vil skrumpe en HTML-fil med 70 til 90 procent. Ved hjælp af eksemplet ovenfor med et konservativt komprimeringsestimat vil de minificerede HTML-filer gå fra 45 KB til 13,5 KB hver for en samlet krympning på 365 KB. Sammenlignet med uovervåget / ukomprimeret reduceres dit websteds båndbredde nu med 365 MB pr. Dag (11 GB pr. Måned).

Og oven på båndbreddebesparelserne indlæses hver side dramatisk hurtigere, fordi slutbrugerens browser kun skal downloade 13,5 KB versus 50 KB per side.

Sådan komprimeres og Minificer HTML

Heldigvis er hverken meget vanskelige i disse dage, og du behøver ikke meget teknisk know-how for at opsætte dem.

WordPress-plugins

Hvis du kører et WordPress-websted, skal du blot installere et plugin, og du kan høste fordelene ved både komprimering og minificering.

De fleste cache-plugins gør mere end blot cache-sider. For eksempel, WP hurtigste cache og W3 samlet cache begge har indstillinger med et klik, der giver dig mulighed for at aktivere HTML-minifikation og GZIP-komprimering, blandt andre funktioner, der yderligere fremskynder sideindlæsninger og reducerer brugen af ​​båndbredde.

hvis du kun ønsker minificering, anbefaler vi Komprimer HTML plugin. Det er enkelt, understøtter HTML / CSS / JS og giver dig mulighed for at finpudse minifikationsmetoden en smule (f.eks. Om du vil fjerne http: og https: fra URL'er).

Statiske HTML Minifiers

Hvis dine HTML-filer er statiske (dvs. ikke dynamisk genereret af en CMS- eller webramme), kan du vedligeholde to sæt HTML-filer: et "kildesæt", som ikke er administreret til nem redigering, og et "minificeret" sæt, som du opretter, hver gang du foretager en ændring af en kildefil.

Brug et af disse værktøjer til at minimere:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (forskellig fra ovenstående)

Dette er en levedygtig teknik, hvis du er flyttet væk fra CMS'er som WordPress og nu bruger statiske stedgeneratorer 7 grunde til at grøfte dit CMS og overveje en statisk stedgeneratorI mange år var det svært for mange brugere at offentliggøre et websted. CMS'er som WordPress ændrede det, men de kan stadig være forvirrende. Et andet alternativ er en statisk stedgenerator. Læs mere .

Aktivér GZIP-komprimering

Trinene for at aktivere GZIP-komprimering kan variere afhængigt af hvilken webserver-software, du bruger. Da Apache er den mest populære mulighed, dækker vi, hvordan du aktiverer den ved hjælp af .htaccess.

Opret forbindelse til din webserver ved hjælp af FTP, og opret derefter en kaldet fil .htaccess i rodkataloget. Rediger .htaccess-filen for at have følgende indstillinger:

 mod_gzip_on Ja mod_gzip_dechunk Ja mod_gzip_item_include-fil. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ tekst /.* mod_gzip_item_include mime ^ applikation / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:.. * Gzip *
 SetOutputFilter DEFLATE. 

Er du ikke sikker på, om kompression fungerer på dit websted? Test det med dette værktøj.

For den ultimative effektivitet, bør du også lære om, hvordan du kontrollerer, renser og optimerer din CSS 11 Nyttige værktøjer til at kontrollere, rense og optimere CSS-filerVil du forbedre din CSS-kode? Disse CSS-checkers og optimizers hjælper med at forbedre CSS-kode, syntaks og mindske dine websider. Læs mere .