Ako funguje komprimovaný HTML a prečo ho môžete potrebovať

Ako funguje komprimovaný HTML a prečo ho môžete potrebovať

Ak prevádzkujete webovú stránku, mali by ste už vedieť, ako na to používajte správne obrazové formáty a optimalizujte svoje obrázky pre web. Napriek tomu, že je kompresia obrazu známou praxou, kompresia HTML je zvyčajne prehliadaná, čo je škoda, pretože výhody sa oplatí.





V tomto článku sa pozrieme na dve hlavné metódy zmenšovania súborov HTML, prečo by sa mali súbory HTML zmenšovať a ako na to.



Kompresia vs. minifikácia

Pokiaľ ide o optimalizáciu súborov HTML, existujú dve hlavné metódy: kompresia a minifikácia . Na povrchu znejú podobne, ale v skutočnosti ide o dve odlišné techniky, takže si ich nenechajte mýliť.





Minifikácia

Minifikáciu môžete považovať za odstránenie nepotrebných znakov a riadkov v zdrojovom kóde. Myslite na odsadenie, komentáre, prázdne riadky atď. Žiadne z nich nie je v HTML vyžadované - existujú preto, aby bol súbor lepšie čitateľný. Orezaním týchto podrobností môžete zmenšiť veľkosť súboru bez toho, aby ste čokoľvek ovplyvnili.

Ukážka stránky 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.

Pôvodná veľkosť: 354. Zmenšená veľkosť: 272. Úspory: 82 (23,16%).

Mnoho webových vývojárov a majiteľov stránok si rezervuje minifikáciu iba pre súbory JS a CSS, ale táto zastaraná metóda je chybou. Minifikácia HTML je tiež dôležitá.



Ešte v roku 2000 boli nástroje na minifikáciu zriedkavé. Zakaždým, keď sa niečo zmenilo, museli ste súbory minifikovať ručne. Pretože sa súbory HTML menia častejšie ako súbory JS a CSS, bolo v tom čase jednoducho príliš únavné ich minimalizovať. V dnešnej dobe je to diskutabilné.

Kompresia

Keď používatelia navštívia váš web, urobia to pomocou protokolu HTTP. Prehliadač odošle vášmu webovému serveru požiadavku na konkrétnu stránku, váš webový server stránku vyhľadá a potom odošle obsah tejto stránky späť do prehliadača návštevníka.



Pretože však protokol HTTP podporuje kompresiu, váš webový server môže stránku komprimovať pred odoslaním návštevníkovi (za predpokladu, že je v nastaveniach servera povolená kompresia), a potom môže prehliadač návštevníka stránku dekomprimovať späť do pôvodného stavu.

Najbežnejšou schémou kompresie je GZIP , čo je formát súboru, ktorý používa príponu algoritmus bezstratovej kompresie s názvom DEFLATE.

Algoritmus hľadá opakované výskyty textu v súbore HTML a potom tieto opakujúce sa výskyty nahradí odkazmi na predchádzajúci výskyt. Každá referencia je jednoducho dve čísla: ako ďaleko vzadu je referencia a koľko znakov odkazujeme.

Zvážte reťazec textu, ako je tento (príklad prevzatý z webu GZIP):

Blah blah blah blah blah.

Algoritmus rozpoznáva nasledujúce opakovanie:

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

Prvý výskyt je naša referencia, takže ho nechajte:

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

Druhý výskyt sa týka prvého výskytu, ktorý má päť znakov za sebou a päť znakov:

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

V tomto prípade však algoritmus rozpoznáva, že ďalším výskytom je rovnaká postupnosť znakov, takže predlžuje referenčnú dĺžku o ďalších päť:

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

A znova:

Blah b[5,15]lah.

A algoritmus je dostatočne chytrý na to, aby si uvedomil, že ďalšie tri znaky sú prvé tri znaky v referencii, takže sa rozširuje o tri:

Blah b[5,18].

Teraz sa zamyslite nad typickým súborom HTML a nad tým, koľko opakovaní existuje. Takmer každá značka, ako napr

, má zodpovedajúcu záverečnú značku, ako

. Ďalej sa mnoho tagov opakuje, ako napr

,

,

,

  • atď. Atribúty sa tiež často opakujú, vrátane

    class

    ,

    href

    a

    src

    . Je ľahké pochopiť, prečo je kompresia GZIP v HTML taká účinná.

    Jedinou nevýhodou je, že webový server potrebuje na spustenie kompresie o niečo viac CPU pri každom vyžiadaní stránky. Ale pretože CPU v dnešnej dobe nie je až taký problém, je takmer vždy lepšie povoliť GZIP, než bez neho, aj keď máte webhosting základnej triedy.

    Prečo by ste mali komprimovať a minimalizovať

    Existujú dve hlavné výhody, pričom obe sú v dnešnej náročnej webovej krajine pre mobilné zariadenia kľúčové.

    Rýchlejšie načítanie stránky

    Minifikátor HTML môže v priemere pri základných nastaveniach zmenšiť veľkosť súboru približne o 3 percentá. S voliteľnými pokročilými nastaveniami je možné súbor HTML zmenšiť o ďalších 3 až 7 percent, čo predstavuje potenciálne zníženie až o 10 percent. To sa priamo premieta do kratších časov načítania stránky.

    Menej využívanej šírky pásma

    Povedzme, že máte 10 súborov, každý zmenšený z 50 KB na 45 KB s celkovým zmenšením 50 KB. A povedzme, že váš web denne navštívi v priemere 1 000 návštevníkov, pričom každá návšteva má v priemere desať stránok. Samotná minifikácia HTML znižuje využitie šírky pásma o 50 MB za deň (1,5 GB za mesiac).

    Kompresia + minifikácia

    Ako vidíte, minifikácia HTML je užitočná sama osebe, najmä keď sa váš web rozrastá, zväčšujú sa súbory a zvyšuje sa návštevnosť. Poznač si to Pokyny spoločnosti Google pre PageSpeed odporúčame minifikovať HTML, takže ak ste skeptickí, nechajte sa presvedčiť o opaku.

    pripojiť mobilný telefón k bezdrôtovému smerovaču

    Čo je však na optimalizácii HTML skvelé, je to, že nemusíte voliť ani minifikáciu, ani kompresiu. Môžete robiť oboje! V skutočnosti ty mal by urobiť oboje.

    V priemere môžete očakávať, že kompresia GZIP zmenší súbor HTML o 70 až 90 percent. Pri použití vyššie uvedeného príkladu s konzervatívnym odhadom kompresie by zmenšené súbory HTML prešli od 45 KB do 13,5 KB pre celkové zmenšenie 365 KB. V porovnaní s neminifikovanými/nekomprimovanými sa šírka pásma vašich stránok teraz zníži o 365 MB za deň (11 GB za mesiac).

    Okrem úspory šírky pásma sa každá stránka načítava dramaticky rýchlejšie, pretože prehliadač koncového používateľa musí stiahnuť iba 13,5 kB oproti 50 kB na stránku.

    Ako komprimovať a minimalizovať HTML

    Našťastie ani jeden nie je v dnešnej dobe veľmi náročný a na jeho zriadenie nepotrebujete veľa technického know-how.

    Doplnky WordPress

    Ak prevádzkujete webovú stránku WordPress, stačí si nainštalovať jeden doplnok a môžete využívať výhody kompresie aj minifikácie.

    Väčšina doplnkov ukladaných do vyrovnávacej pamäte robí viac než len ukladanie stránok do vyrovnávacej pamäte. Napríklad, Najrýchlejšia vyrovnávacia pamäť WP a Celková vyrovnávacia pamäť W3 oba majú nastavenia jedným kliknutím, ktoré vám okrem iných funkcií, ktoré ešte viac urýchľujú načítanie stránky a znižujú šírku pásma, umožňujú zapnúť minifikáciu HTML a kompresiu GZIP.

    Ak ty iba chcete minifikáciu, odporúčame Minimalizujte HTML zapojiť. Je jednoduchý, podporuje HTML/CSS/JS a umožňuje vám trochu vyladiť metódu minifikácie (napr. Či chcete odstrániť

    http:

    a

    https:

    z adries URL).

    Statické minifikátory HTML

    Ak sú vaše súbory HTML statické (tj. Nie sú dynamicky generované pomocou CMS alebo webového rámca), môžete spravovať dve sady súborov HTML: „zdrojovú“ sadu, ktorá sa kvôli jednoduchej úprave nezruší, a „zmenšenú“ množinu, ktoré vytvoríte vždy, keď zmeníte zdrojový súbor.

    Na minimalizáciu použite jeden z týchto nástrojov:

    Je to životaschopná metóda, ak ste sa presťahovali z CMS, ako je WordPress, a teraz používate generátory statických stránok.

    Povoliť kompresiu GZIP

    Kroky na povolenie kompresie GZIP sa môžu líšiť v závislosti od toho, ktorý softvér webového servera používate. Pretože Apache je najobľúbenejšou možnosťou, povieme si, ako ho povoliť pomocou .htaccess.

    Pripojte sa k svojmu webovému serveru pomocou FTP a potom vytvorte súbor s názvom

    .htaccess

    v koreňovom adresári. Upravte súbor .htaccess tak, aby mal nasledujúce nastavenia:


    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

    Nie ste si istí, či kompresia na vašom webe funguje? Otestujte to pomocou tohto nástroja .

    Aby ste dosiahli maximálnu efektivitu, mali by ste tiež Získajte informácie o tom, ako kontrolovať, čistiť a optimalizovať CSS .

    zdieľam zdieľam Tweet E -mail Mali by ste okamžite upgradovať na Windows 11?

    Windows 11 bude čoskoro k dispozícii, ale mali by ste aktualizovať čo najskôr alebo počkať niekoľko týždňov? Poďme zistiť.

    Čítajte ďalej     Súvisiace témy
    • Programovanie
    • HTML
    • Vývoj webových aplikácií
    O autorovi Joel Lee(1524 publikovaných článkov)

    Joel Lee je šéfredaktorom MakeUseOf od roku 2018. Má titul B.S. v informatike a viac ako deväť rokov profesionálnych skúseností s písaním a úpravami.

    Viac od Joela Leeho

    prihlásiť sa ku odberu noviniek

    Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

    Kliknutím sem sa prihlásite na odber