Kako funkcionira komprimirani HTML i zašto vam može zatrebati

Kako funkcionira komprimirani HTML i zašto vam može zatrebati

Ako vodite web stranicu, trebali biste već znati kako koristiti odgovarajuće formate slika i optimizirati svoje slike za web. Ipak, iako je kompresija slike dobro poznata praksa, kompresija HTML-a ima tendenciju zanemarivanja, što je šteta jer se prednosti isplate.





U ovom članku ćemo prijeći dvije glavne metode za smanjenje HTML datoteka, zašto HTML datoteke treba smanjiti i kako to učiniti.



Kompresija nasuprot minifikaciji

Što se tiče optimizacije HTML datoteka, postoje dvije glavne metode za to: kompresija i minifikacija . Zvuče slično na površini, ali zapravo su dvije različite tehnike pa ih nemojte zbuniti.





Umanjivanje

Smanjivanje možete zamisliti kao uklanjanje nepotrebnih znakova i redaka u izvornom kodu. Pomislite na uvlačenje, komentare, prazne retke itd. Ništa od navedenog nije potrebno u HTML -u - postoje kako bi se datoteka lakše čitala. Skraćivanje ovih detalja može smanjiti veličinu datoteke bez ikakvog utjecaja.

Uzorak HTML stranice:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Izvorna veličina: 354. Umanjena veličina: 272. Ušteda: 82 (23,16%).

Mnogi razvojni programeri i vlasnici web mjesta rezerviraju umanjenje samo za JS i CSS datoteke, ali ova zastarjela praksa je pogreška. Umanjenje HTML -a je također važno.



2000 -ih, alati za minifikaciju bili su rijetki. Morali ste ručno minimizirati datoteke svaki put kad se nešto promijenilo. Budući da se HTML datoteke češće mijenjaju od JS i CSS datoteka, tada je jednostavno bilo previše dosadno za minimiziranje. Danas je to sporno pitanje.

Kompresija

Kada korisnici posjete vašu web stranicu, to čine pomoću HTTP protokola. Preglednik šalje zahtjev vašem web poslužitelju za određenu stranicu, vaš web poslužitelj pronalazi stranicu, a zatim šalje sadržaj te stranice natrag u preglednik posjetitelja.



No, budući da HTTP protokol podržava kompresiju, vaš web poslužitelj može komprimirati stranicu prije nego što je pošalje posjetitelju (pod pretpostavkom da je kompresija omogućena u postavkama vašeg poslužitelja), a zatim posjetiteljev preglednik može dekomprimirati stranicu natrag u njezino izvorno stanje.

Najčešća shema kompresije je GZIP , koji je format datoteke koji koristi algoritam kompresije bez gubitaka pod nazivom DEFLATE.

Algoritam traži ponovljena pojavljivanja teksta u HTML datoteci, a zatim zamjenjuje te ponovljene pojave referencama na prethodnu pojavu. Svaka referenca jednostavno je dva broja: koliko je referenca nazad i koliko znakova upućujemo.

Razmislite o nizu teksta poput ovog (primjer preuzet s web stranice GZIP):

Blah blah blah blah blah.

Algoritam prepoznaje sljedeće ponavljanje:

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

Prva pojava je naša referenca, pa neka ostane:

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

Druga pojava se odnosi na prvu pojavu, koja je iza pet znakova i duga pet znakova:

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

No, u ovom slučaju algoritam prepoznaje da je sljedeća pojava isti niz znakova, pa produžava referentnu duljinu za još pet:

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

I opet:

Blah b[5,15]lah.

Algoritam je dovoljno pametan da shvati da su sljedeća tri znaka prva tri znaka u referenci, pa se produžava za tri:

Blah b[5,18].

Sada razmislite o tipičnoj HTML datoteci i koliko ponavljanja postoji u njoj. Gotovo svaka oznaka, kao npr

, ima odgovarajuću oznaku za zatvaranje, poput

. Nadalje, mnoge se oznake ponavljaju, npr

,

,

,

  • itd. Atributi se također često ponavljaju, uključujući

    class

    ,

    href

    , i

    src

    . Lako je vidjeti zašto je kompresija GZIP -a tako učinkovita u HTML -u.

    Jedini nedostatak je što web poslužitelju treba malo više CPU -a za izvršavanje kompresije svaki put kada se zatraži stranica. No budući da CPU u današnje vrijeme ne predstavlja veliku brigu, gotovo je uvijek bolje omogućiti GZIP nego bez njega, čak i ako imate web hosting početne razine.

    Zašto biste trebali komprimirati i umanjiti

    Postoje dvije glavne prednosti, a obje su ključne u današnjem okruženju s velikim mobilnim uređajima.

    Brže učitavanje stranica

    U prosjeku, HTML minifikator može smanjiti veličinu datoteke za oko 3 posto s osnovnim postavkama. Uz dodatne napredne postavke, HTML datoteka može se smanjiti za još 3 do 7 posto, za potencijalno smanjenje do 10 posto. To se izravno prevodi u brže vrijeme učitavanja stranice.

    Korištena je manja propusnost

    Recimo da imate 10 datoteka, svaka umanjena od 50 KB do 45 KB za ukupno smanjenje od 50 KB. Recimo da vaša web stranica opslužuje u prosjeku 1000 posjetitelja svaki dan, pri čemu svaki posjet u prosjeku ima deset stranica. Samo umanjenje HTML -a smanjuje vašu propusnost za 50 MB dnevno (1,5 GB mjesečno).

    Kompresija + minifikacija

    Kao što vidite, umanjivanje HTML -a korisno je samo po sebi, osobito s povećanjem vaše web stranice, povećanjem datoteka i povećanjem prometa. Imajte na umu da Googleove smjernice za PageSpeed preporučite minimiziranje HTML -a, pa ako ste skeptični, dopustite da vas to uvjeri u suprotno.

    kako izbrisati profil na netflixu

    No ono što je sjajno u vezi s optimizacijom HTML -a je to što ne morate birati ni umanjivanje ni kompresiju. Možete učiniti oboje! Zapravo, ti trebao učini oboje.

    U prosjeku možete očekivati ​​da će GZIP kompresija smanjiti HTML datoteku za 70 do 90 posto. Koristeći gornji primjer s konzervativnom procjenom kompresije, minificirane HTML datoteke išle bi sa 45 KB na 13,5 KB svaka, za ukupno smanjenje od 365 KB. U usporedbi s neminiziranim/nekomprimiranim, propusnost vaše web stranice sada je smanjena za 365 MB dnevno (11 GB mjesečno).

    Osim uštede propusnosti, svaka stranica učitava se dramatično brže jer preglednik krajnjeg korisnika treba preuzeti samo 13,5 KB naspram 50 KB po stranici.

    Kako komprimirati i umanjiti HTML

    Srećom, niti jedno ni drugo nije jako teško ovih dana, a za njihovo postavljanje ne trebate puno tehničkog znanja.

    Dodaci za WordPress

    Ako pokrećete WordPress web lokaciju, sve što trebate učiniti je instalirati jedan dodatak i možete iskoristiti prednosti kompresije i minifikacije.

    Većina dodataka za predmemoriranje ne radi samo stranice za predmemoriranje. Na primjer, WP najbrži predmemorija i W3 Ukupna predmemorija oboje imaju postavke jednim klikom koje vam omogućuju uključivanje umanjivanja HTML-a i kompresije GZIP-a, među ostalim značajkama koje dodatno ubrzavaju učitavanje stranica i smanjuju upotrebu propusnosti.

    Ako ti samo želite minifikaciju, preporučujemo Umanji HTML uključiti. Jednostavno je, podržava HTML/CSS/JS i omogućuje vam da malo prilagodite način umanjivanja (npr. Želite li ukloniti

    http:

    i

    https:

    iz URL -ova).

    Statički HTML minifikatori

    Ako su vaše HTML datoteke statične (tj. Nisu dinamički generirane pomoću CMS -a ili web okvira), tada možete održavati dva skupa HTML datoteka: skup 'izvora', koji je minimiziran radi lakšeg uređivanja, i 'minificirani' skup, koje stvarate svaki put kada promijenite izvornu datoteku.

    Za umanjivanje upotrijebite jedan od ovih alata:

    Ovo je održiva tehnika ako ste se udaljili od CMS -a poput WordPressa i sada koristite generatore statičkih web lokacija.

    Omogući kompresiju GZIP -a

    Koraci za omogućavanje kompresije GZIP -a mogu se razlikovati ovisno o softveru web poslužitelja koji koristite. Budući da je Apache najpopularnija opcija, pokazat ćemo kako ga omogućiti pomoću .htaccess -a.

    Povežite se s web poslužiteljem pomoću FTP -a, a zatim stvorite datoteku pod nazivom

    .htaccess

    u korijenskom direktoriju. Uredite .htaccess datoteku tako da ima sljedeće postavke:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

    Niste sigurni radi li kompresija na vašoj web stranici? Testirajte ga ovim alatom .

    Za vrhunsku učinkovitost također biste trebali saznajte kako provjeriti, očistiti i optimizirati svoj CSS .

    Udio Udio Cvrkut E -pošta Trebate li odmah nadograditi na Windows 11?

    Windows 11 uskoro dolazi, no trebate li se ažurirati što je prije moguće ili pričekati nekoliko tjedana? Hajde da vidimo.

    Pročitajte Dalje     Povezane teme
    • Programiranje
    • HTML
    • Web razvoj
    O autoru Joel lee(1524 objavljenih članaka)

    Joel Lee glavni je urednik MakeUseOf -a od 2018. Ima B.S. iz računalnih znanosti i više od devet godina profesionalnog iskustva u pisanju i uređivanju.

    Više od Joela Leeja

    Pretplatite se na naše obavijesti

    Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

    Kliknite ovdje za pretplatu