Kako deluje stisnjeni HTML in zakaj ga boste morda potrebovali

Kako deluje stisnjeni HTML in zakaj ga boste morda potrebovali

Če imate spletno mesto, bi morali že vedeti, kako uporabite prave oblike slik in optimizirate svoje slike za splet. Medtem ko je stiskanje slik dobro znana praksa, je stiskanje HTML ponavadi spregledano, kar je škoda, ker so koristi vredne.





V tem članku bomo obravnavali dve glavni metodi za krčenje datotek HTML, zakaj je treba datoteke HTML skrčiti in kako se tega lotiti.



Stiskanje proti pomanjšanju

Kar zadeva optimizacijo datotek HTML, obstajata dve glavni metodi: stiskanje in pomanjšanje . Na prvi pogled zvenijo podobno, dejansko pa sta dve različni tehniki, zato ju ne zamenjujte.





Minifikacija

Zmanjšanje si lahko zamislite kot odstranitev nepotrebnih znakov in vrstic v izvorni kodi. Pomislite na vdolbine, komentarje, prazne vrstice itd. Nič od tega v HTML -ju ni potrebno - obstaja za lažje branje datoteke. Obrezovanje teh podrobnosti lahko zmanjša velikost datoteke, ne da bi to vplivalo na nič.

Vzorčna stran HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Prvotna velikost: 354. Smanjšana velikost: 272. Prihranki: 82 (23,16%).

Mnogi spletni razvijalci in lastniki spletnih mest rezervirajo poenostavitev samo za datoteke JS in CSS, vendar je ta zastarela praksa napaka. Pomembna je tudi minimizacija HTML.



V 2000 -ih so bila orodja za pomanjševanje redka. Datoteke ste morali ročno pomanjšati vsakič, ko se je kaj spremenilo. Ker se datoteke HTML pogosteje spreminjajo kot datoteke JS in CSS, je bilo takrat preprosto preveč dolgočasno, da bi jih vsakič pomanjšali. Dandanes je to sporno vprašanje.

Stiskanje

Ko uporabniki obiščejo vaše spletno mesto, to storijo s protokolom HTTP. Brskalnik pošlje zahtevo vašemu spletnemu strežniku za določeno stran, vaš spletni strežnik najde stran, nato pa vsebino te strani pošlje nazaj v brskalnik obiskovalca.



Ker pa protokol HTTP podpira stiskanje, lahko vaš spletni strežnik stisne stran, preden jo pošlje obiskovalcu (ob predpostavki, da je stiskanje omogočeno v nastavitvah vašega strežnika), nato pa lahko brskalnik obiskovalca raztegne stran nazaj v prvotno stanje.

Najpogostejša shema stiskanja je GZIP , ki je oblika datoteke, ki uporablja datoteko algoritem stiskanja brez izgub imenovano DEFLATE.

Algoritem išče ponavljajoče se pojavitve besedila v datoteki HTML, nato pa te ponavljajoče se dogodke nadomesti s sklici na prejšnji pojav. Vsaka referenca je preprosto dve številki: kako daleč je referenca in koliko znakov navajamo.

Razmislite o nizu besedila, kot je ta (primer s spletnega mesta GZIP):

Blah blah blah blah blah.

Algoritem prepozna naslednjo ponovitev:

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

Prvi pojav je naša referenca, zato pustite tako:

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

Drugi pojav se nanaša na prvi pojav, ki zaostaja pet znakov in je dolg pet znakov:

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

Toda v tem primeru algoritem prepozna, da je naslednji pojav isto zaporedje znakov, zato podaljša referenčno dolžino za nadaljnjih pet:

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

In spet:

Blah b[5,15]lah.

Algoritem je dovolj pameten, da se zaveda, da so naslednji trije znaki prvi trije znaki v referenci, zato se podaljša za tri:

Blah b[5,18].

Zdaj pa pomislite na tipično datoteko HTML in koliko ponovitev obstaja v njej. Skoraj vsaka oznaka, npr

, ima ustrezno zaključno oznako, na primer

. Poleg tega se številne oznake ponavljajo povsod, na primer

,

,

,

  • itd. Atributi se pogosto ponavljajo, vključno z

    class

    ,

    href

    , in

    src

    . Preprosto je razumeti, zakaj je stiskanje GZIP tako učinkovito pri HTML -ju.

    Edina pomanjkljivost je, da spletni strežnik potrebuje malo več CPU -ja za izvajanje stiskanja vsakič, ko se zahteva stran. Ker pa CPU v današnjem času ne skrbi veliko, je skoraj vedno bolje omogočiti GZIP kot pa brez njega, tudi če imate spletno gostovanje na začetni ravni.

    Zakaj bi morali stisniti in pomanjšati

    Obstajata dve glavni prednosti, ki sta ključni v današnjem spletnem okolju z veliko mobilnostjo.

    Hitrejše nalaganje strani

    Z mini nastavitvami lahko minifikator HTML v povprečju zmanjša velikost datoteke za približno 3 odstotke. Z dodatnimi naprednimi nastavitvami lahko datoteko HTML zmanjšate še za 3 do 7 odstotkov, kar lahko zmanjša do 10 odstotkov. To neposredno pomeni hitrejši čas nalaganja strani.

    Manjša uporabljena pasovna širina

    Recimo, da imate 10 datotek, od katerih je vsaka zmanjšana s 50 KB na 45 KB za skupno krčenje 50 KB. Recimo, da vaše spletno mesto vsak dan obišče povprečno 1000 obiskovalcev, pri čemer je vsak obisk v povprečju deset strani. Samo poenostavitev HTML -ja zmanjša vašo pasovno širino za 50 MB na dan (1,5 GB na mesec).

    Stiskanje + pomanjšanje

    Kot lahko vidite, je minimiziranje HTML uporabno samo po sebi, še posebej, ko se vaše spletno mesto poveča, datoteke se povečajo in promet se poveča. Upoštevajte, da Googlove smernice za hitrost strani priporočam pomanjšanje HTML -ja, zato, če ste skeptični, naj vas to prepriča v nasprotno.

    povežite mobilni telefon z brezžičnim usmerjevalnikom

    Najboljše pri optimizaciji HTML pa je, da vam ni treba izbrati pomanjšanja ali stiskanja. Lahko naredite oboje! Pravzaprav ti naj bi naredi oboje.

    V povprečju lahko pričakujete, da bo stiskanje GZIP zmanjšalo datoteko HTML za 70 do 90 odstotkov. Z uporabo zgornjega primera s konzervativno oceno stiskanja bi minimizirane datoteke HTML prešle s 45 KB na 13,5 KB vsake, kar bi jih skupno skrčilo za 365 KB. V primerjavi z neskrčenim/nestisnjenim se pasovna širina vašega spletnega mesta zdaj zmanjša za 365 MB na dan (11 GB na mesec).

    Poleg prihranka pasovne širine se vsaka stran naloži dramatično hitreje, saj mora brskalnik končnega uporabnika prenesti le 13,5 KB v primerjavi s 50 KB na stran.

    Kako stisniti in pomanjšati HTML

    Na srečo v teh dneh nista prav nič težka in za njihovo nastavitev ne potrebujete veliko tehničnega znanja.

    Vtičniki WordPress

    Če imate spletno mesto WordPress, morate le namestiti en vtičnik in izkoristiti prednosti stiskanja in pomanjševanja.

    Večina vtičnikov za predpomnjenje naredi več kot le predpomnjenje strani. Na primer, Najhitrejši predpomnilnik WP in Skupni predpomnilnik W3 oba imata nastavitve z enim klikom, ki omogočajo vklop pomanjšanja HTML in stiskanja GZIP, med drugimi funkcijami, ki dodatno pospešijo nalaganje strani in zmanjšajo uporabo pasovne širine.

    Če ti samo želite pomanjšanje, priporočamo Pomanjšajte HTML vključiti. Preprosto je, podpira HTML/CSS/JS in vam omogoča, da nekoliko prilagodite metodo minimizacije (npr. Ali želite odstraniti

    http:

    in

    https:

    iz URL -jev).

    Statični HTML Minifiers

    Če so vaše datoteke HTML statične (tj. Niso dinamično ustvarjene s CMS -jem ali spletnim ogrodjem), lahko vzdržujete dva niza datotek HTML: niz 'izvor', ki je za enostavno urejanje odstranjen, in 'pomanjšani' niz, ki ga ustvarite vsakič, ko spremenite izvorno datoteko.

    Za pomanjšanje uporabite eno od teh orodij:

    To je izvedljiva tehnika, če ste se oddaljili od CMS -jev, kot je WordPress, in zdaj uporabljate generatorje statičnih spletnih mest.

    Omogoči stiskanje GZIP

    Koraki za omogočanje stiskanja GZIP se lahko razlikujejo glede na programsko opremo spletnega strežnika, ki jo uporabljate. Ker je Apache najbolj priljubljena možnost, bomo obravnavali, kako ga omogočiti z uporabo .htaccess.

    Povežite se s spletnim strežnikom prek FTP in ustvarite datoteko z imenom

    .htaccess

    v korenskem imeniku. Uredite datoteko .htaccess, da bo imela naslednje nastavitve:


    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 prepričani, ali stiskanje deluje na vašem spletnem mestu? Preizkusite s tem orodjem .

    Za največjo učinkovitost bi morali tudi vi spoznajte, kako preveriti, očistiti in optimizirati CSS .

    Deliti Deliti Cvrkutati E-naslov Ali morate takoj nadgraditi na Windows 11?

    Windows 11 prihaja kmalu, vendar bi morali posodobiti čim prej ali počakati nekaj tednov? Pa ugotovimo.

    Preberite Naprej     Sorodne teme
    • Programiranje
    • HTML
    • Spletni razvoj
    O avtorju Joel Lee(1524 objavljenih člankov)

    Joel Lee je glavni urednik MakeUseOf od leta 2018. Ima diplomo B.S. računalništva in več kot devet let strokovnih izkušenj pri pisanju in urejanju.

    Več od Joela Leeja

    Naročite se na naše novice

    Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

    Kliknite tukaj, če se želite naročiti