Kaip veikia suspaustas HTML ir kodėl jums to reikia

Kaip veikia suspaustas HTML ir kodėl jums to reikia

Jei valdote svetainę, jau turėtumėte žinoti, kaip tai padaryti naudoti tinkamus vaizdo formatus ir optimizuokite savo vaizdus žiniatinkliui. Vis dėlto, nors vaizdo glaudinimas yra gerai žinoma praktika, HTML glaudinimas yra linkęs nepastebėti, o tai yra gėda, nes nauda yra verta.





Šiame straipsnyje apžvelgsime du pagrindinius HTML failų mažinimo metodus, kodėl turėtų būti sumažintas HTML failas ir kaip tai padaryti.



Suspaudimas prieš sumažinimą

Kalbant apie HTML failų optimizavimą, yra du pagrindiniai metodai: suspaudimas ir minifikacija . Iš išorės jie skamba panašiai, tačiau iš tikrųjų yra dvi skirtingos technikos, todėl nesupainiokite jų.





Sumažinimas

Galite susimąstyti kaip apie nereikalingų šaltinio kodo simbolių ir eilučių pašalinimą. Pagalvokite apie įtrauką, komentarus, tuščias eilutes ir tt Nė vienas iš jų nėra būtinas HTML - jie yra skirti failui lengviau skaityti. Apkarpę šias detales, galite nusiskusti failo dydį, nieko nepaveikdami.

HTML puslapio pavyzdys:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Originalus dydis: 354. Minimalus dydis: 272. Taupymas: 82 (23,16%).

Daugelis žiniatinklio kūrėjų ir svetainių savininkų mažina tik JS ir CSS failus, tačiau ši pasenusi praktika yra klaida. HTML mažinimas taip pat yra svarbus.



Dar 2000 -aisiais minifikacijos įrankiai buvo reti. Turėjote rankiniu būdu suspausti failus kiekvieną kartą, kai kas nors pasikeitė. Kadangi HTML failai keičiasi dažniau nei JS ir CSS failai, tuomet buvo tiesiog per daug nuobodu kiekvieną kartą mažinti. Šiais laikais tai ginčytinas dalykas.

Suspaudimas

Kai vartotojai apsilanko jūsų svetainėje, jie tai daro naudodami HTTP protokolą. Naršyklė siunčia jūsų žiniatinklio serveriui užklausą dėl konkretaus puslapio, jūsų žiniatinklio serveris suranda puslapį, tada siunčia to puslapio turinį atgal į lankytojo naršyklę.



Tačiau kadangi HTTP protokolas palaiko glaudinimą, jūsų žiniatinklio serveris gali suglaudinti puslapį prieš siunčiant jį lankytojui (darant prielaidą, kad jūsų serverio nustatymuose įgalintas glaudinimas), o tada lankytojo naršyklė gali išspausti puslapį į pradinę būseną.

Dažniausiai naudojama suspaudimo schema GZIP , kuris yra failo formatas, kuriame naudojama be nuostolių suspaudimo algoritmas vadinamas DEFLATE.

Algoritmas ieško pasikartojančių teksto pasikartojimų HTML faile, tada tuos pakartotinius atvejus pakeičia nuorodomis į ankstesnį įvykį. Kiekviena nuoroda yra tik du skaičiai: kiek toli yra nuoroda ir kiek simbolių nurodome.

Apsvarstykite tokią teksto eilutę (pavyzdys paimtas iš GZIP svetainės):

Blah blah blah blah blah.

Algoritmas atpažįsta šį pasikartojimą:

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

Pirmasis įvykis yra mūsų nuoroda, todėl palikite tai:

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

Antrasis įvykis susijęs su pirmuoju įvykiu, kuris yra penkių simbolių atsilikęs ir penkių simbolių:

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

Tačiau šiuo atveju algoritmas pripažįsta, kad kitas įvykis yra ta pati simbolių seka, todėl jis prailgina atskaitos ilgį dar penkiais:

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

Ir vėl:

Blah b[5,15]lah.

Ir algoritmas yra pakankamai protingas, kad suprastų, jog kiti trys simboliai yra pirmieji trys nuorodos simboliai, todėl jis tęsiasi trimis:

Blah b[5,18].

Dabar pagalvokite apie tipišką HTML failą ir kiek pasikartojimų yra. Beveik kiekviena žyma, pvz

, turi atitinkamą uždarymo žymą, pvz

. Be to, daugelis žymų kartojamos visur, pvz

,

,

,

  • ir tt Atributai taip pat dažnai kartojami, įskaitant

    class

    ,

    href

    , ir

    src

    . Nesunku suprasti, kodėl GZIP glaudinimas yra toks efektyvus naudojant HTML.

    Vienintelis trūkumas yra tas, kad žiniatinklio serveriui reikia šiek tiek daugiau procesoriaus, kad būtų galima suspausti kiekvieną kartą, kai prašoma puslapio. Tačiau kadangi procesorius šiais laikais nekelia didelio susirūpinimo, beveik visada geriau įgalinti GZIP, nei be jo, net jei turite pradinio lygio žiniatinklio prieglobą.

    Kodėl turėtumėte suspausti ir sumažinti

    Yra du pagrindiniai pranašumai, kurie abu yra labai svarbūs šiandieniniame mobiliesiems skirtame žiniatinklyje.

    Greitesnis puslapio įkėlimas

    Vidutiniškai, naudojant HTML nustatymus, naudojant pagrindinius nustatymus, failo dydis gali sumažėti maždaug 3 procentais. Naudojant papildomus išplėstinius nustatymus, HTML failas gali būti sumažintas dar 3–7 proc., O galimas sumažėjimas iki 10 proc. Tai tiesiogiai reiškia trumpesnį puslapio įkėlimo laiką.

    Naudojamas mažesnis pralaidumas

    Tarkime, kad turite 10 failų, kurių kiekvienas sumažinamas nuo 50 KB iki 45 KB, kad bendras susitraukimas būtų 50 KB. Tarkime, jūsų svetainė kasdien aptarnauja vidutiniškai 1000 lankytojų, kurių kiekvienas apsilanko vidutiniškai dešimt puslapių. Vien tik HTML sumažinimas sumažina pralaidumo naudojimą 50 MB per dieną (1,5 GB per mėnesį).

    Suspaudimas + sumažinimas

    Kaip matote, HTML mažinimas yra naudingas pats savaime, ypač kai jūsų svetainė didėja, failai didėja ir srautas didėja. Prisimink tai „Google“ „PageSpeed“ gairės rekomenduojame sumažinti HTML, taigi, jei esate skeptiškas, leiskite tai įtikinti jus priešingai.

    Parsisiųsti youtube video į fotoaparato ritinį

    Tačiau HTML optimizavimas yra puikus dalykas - jums nereikia pasirinkti nei mažinimo, nei suspaudimo. Jūs galite padaryti abu! Tiesą sakant, jūs turėtų daryk abu.

    Vidutiniškai galite tikėtis, kad GZIP glaudinimas sumažins HTML failą nuo 70 iki 90 procentų. Naudojant aukščiau pateiktą pavyzdį su konservatyviu suspaudimo įvertinimu, susmulkinti HTML failai padidėtų nuo 45 KB iki 13,5 KB, iš viso sumažėtų 365 KB. Palyginti su nesuspaustu/nesuspaustu, jūsų svetainės pralaidumas dabar sumažintas 365 MB per dieną (11 GB per mėnesį).

    Be to, taupant pralaidumą, kiekvienas puslapis įkeliamas žymiai greičiau, nes galutinio vartotojo naršyklė turi atsisiųsti tik 13,5 KB, o ne 50 KB viename puslapyje.

    Kaip suspausti ir sumažinti HTML

    Laimei, šiais laikais nė vienas nėra labai sunkus, ir jums nereikia daug techninių žinių.

    „WordPress“ papildiniai

    Jei naudojate „WordPress“ svetainę, jums tereikia įdiegti vieną papildinį ir galėsite pasinaudoti suspaudimo ir suspaudimo pranašumais.

    Dauguma talpyklos papildinių daro daugiau nei tiesiog talpina puslapius. Pavyzdžiui, WP greičiausia talpykla ir W3 Visa talpykla abu turi vieno paspaudimo nustatymus, kurie leidžia įjungti HTML mažinimą ir GZIP glaudinimą, be kitų funkcijų, kurios dar labiau pagreitina puslapio įkėlimą ir sumažina pralaidumo naudojimą.

    Jei tu tik jei norite sumažinti, rekomenduojame Sumažinti HTML Prijunkite. Tai paprasta, palaiko HTML/CSS/JS ir leidžia šiek tiek patikslinti suspaudimo metodą (pvz., Ar pašalinti

    http:

    ir

    https:

    iš URL).

    Statiniai HTML minifikatoriai

    Jei jūsų HTML failai yra statiški (ty dinamiškai nesukurti naudojant TVS ar žiniatinklio sistemą), tuomet galite išlaikyti du HTML failų rinkinius: „šaltinio“ rinkinį, kuris yra nesuminkytas, kad būtų lengva redaguoti, ir „susmulkintą“ rinkinį, kurį sukuriate kaskart, kai keičiate šaltinio failą.

    Norėdami sumažinti, naudokite vieną iš šių įrankių:

    Tai perspektyvi technika, jei nutolote nuo CMS, pvz., „WordPress“, ir dabar naudojate statinius svetainių generatorius.

    Įgalinti GZIP glaudinimą

    GZIP glaudinimo veiksmai gali skirtis priklausomai nuo naudojamos žiniatinklio serverio programinės įrangos. Kadangi „Apache“ yra populiariausia parinktis, aptarsime, kaip ją įgalinti naudojant .htaccess.

    Prisijunkite prie žiniatinklio serverio naudodami FTP, tada sukurkite failą pavadinimu

    .htaccess

    šakniniame kataloge. Redaguokite .htaccess failą, kad nustatytumėte šiuos nustatymus:


    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

    Nežinote, ar jūsų svetainėje veikia suspaudimas? Išbandykite šį įrankį .

    Norėdami pasiekti maksimalų efektyvumą, taip pat turėtumėte sužinokite, kaip patikrinti, išvalyti ir optimizuoti savo CSS .

    Dalintis Dalintis „Tweet“ Paštu Ar turėtumėte nedelsdami atnaujinti į „Windows 11“?

    Netrukus pasirodys „Windows 11“, bet ar turėtumėte atnaujinti kuo greičiau arba palaukti kelias savaites? Išsiaiškinkime.

    Skaityti toliau     Susijusios temos
    • Programavimas
    • HTML
    • Interneto svetainių kūrimas
    Apie autorių Joelis Lee(Paskelbti 1524 straipsniai)

    Joelis Lee yra „MakeUseOf“ vyriausiasis redaktorius nuo 2018 m. Jis turi B.S. įgijo informatikos ir daugiau nei devynerių metų profesionalaus rašymo ir redagavimo patirtį.

    Daugiau iš Joel Lee

    Prenumeruokite mūsų naujienlaiškį

    Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

    Norėdami užsiprenumeruoti, spustelėkite čia