Jak komprimovaný HTML funguje a proč ho můžete potřebovat

Jak komprimovaný HTML funguje a proč ho můžete potřebovat

Pokud provozujete web, měli byste už vědět, jak na to používejte správné formáty obrázků a optimalizujte své obrázky pro web. Přestože je komprese obrázků dobře známou praxí, komprese HTML má tendenci být přehlížena, což je škoda, protože výhody stojí za to.





V tomto článku si projdeme dvě hlavní metody zmenšování souborů HTML, proč by se soubory HTML měly zmenšit a jak na to.



Komprese vs. minifikace

Pokud jde o optimalizaci souborů HTML, existují dvě hlavní metody: komprese a minifikace . Na povrchu znějí podobně, ale ve skutečnosti se jedná o dvě odlišné techniky, takže je nenechte zmást.





Minifikace

Minifikaci můžete považovat za odstranění zbytečných znaků a řádků ve zdrojovém kódu. Představte si odsazení, komentáře, prázdné řádky atd. Žádné z nich nejsou v HTML vyžadovány - existují proto, aby byl soubor čitelnější. Oříznutím těchto detailů můžete zmenšit velikost souboru, aniž byste cokoli ovlivnili.

Ukázková stránka 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í velikost: 354. Zmenšená velikost: 272. Úspory: 82 (23,16%).

Mnoho webových vývojářů a majitelů stránek si vyhrazuje minifikaci pouze pro soubory JS a CSS, ale tato zastaralá praxe je chybou. Minifikace HTML je také důležitá.



Zpět na 2000s, minifikační nástroje byly vzácné. Soubory jste museli ručně minifikovat pokaždé, když se něco změnilo. Jelikož se soubory HTML mění častěji než soubory JS a CSS, bylo prostě příliš únavné je v tu dobu pokaždé zmenšovat. V dnešní době je to diskutabilní.

Komprese

Když uživatelé navštíví váš web, dělají to pomocí protokolu HTTP. Prohlížeč odešle vašemu webovému serveru požadavek na konkrétní stránku, váš webový server stránku najde a poté odešle obsah této stránky zpět do prohlížeče návštěvníka.



Protože však protokol HTTP podporuje kompresi, váš webový server může stránku před odesláním návštěvníkovi komprimovat (za předpokladu, že je v nastavení vašeho serveru povolena komprese), a poté může prohlížeč návštěvníka stránku dekomprimovat zpět do původního stavu.

Nejběžnějším schématem komprese je GZIP , což je formát souboru, který používá příponu algoritmus bezeztrátové komprese s názvem DEFLATE.

Algoritmus vyhledává opakované výskyty textu v souboru HTML a poté tyto opakované výskyty nahrazuje odkazy na předchozí výskyt. Každá reference je jednoduše dvě čísla: jak daleko vzadu je reference a kolik znaků odkazujeme.

Zvažte řetězec textu, jako je tento (příklad převzatý z webu GZIP):

Blah blah blah blah blah.

Algoritmus rozpoznává následující opakování:

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

První výskyt je naše reference, takže ho nechte být:

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

Druhý výskyt odkazuje na první výskyt, který má pět znaků za sebou a pět znaků na délku:

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

Ale v tomto případě algoritmus rozpozná, že dalším výskytem je stejná posloupnost znaků, takže prodlužuje referenční délku o dalších pět:

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

A znovu:

Blah b[5,15]lah.

A algoritmus je dost chytrý na to, aby si uvědomil, že další tři znaky jsou první tři znaky v odkazu, takže se rozšiřuje o tři:

Blah b[5,18].

Nyní přemýšlejte o typickém souboru HTML a o tom, kolik opakování v něm existuje. Téměř každá značka, jako například

, má odpovídající uzavírací značku, jako

. Kromě toho se mnoho tagů opakuje, jako například

,

,

,

  • atd. Atributy se také často opakují, včetně

    class

    ,

    href

    , a

    src

    . Je snadné pochopit, proč je komprese GZIP v HTML tak účinná.

    Jedinou nevýhodou je, že webový server potřebuje o něco více CPU k provedení komprese pokaždé, když je požadována stránka. Ale protože CPU v dnešní době není velkým problémem, je téměř vždy lepší povolit GZIP, než bez něj, i když máte webhosting základní úrovně.

    Proč byste měli komprimovat a zmenšovat

    Existují dvě hlavní výhody, z nichž obě jsou v dnešním webovém prostředí náročné na mobilní zařízení zásadní.

    Rychlejší načítání stránky

    V průměru může minifikátor HTML se základním nastavením zmenšit velikost souboru přibližně o 3 procenta. S volitelným pokročilým nastavením lze soubor HTML zmenšit o dalších 3 až 7 procent, což znamená potenciální snížení až o 10 procent. To se přímo promítá do kratších časů načítání stránky.

    Menší využití šířky pásma

    Řekněme, že máte 10 souborů, každý zmenšený z 50 KB na 45 KB pro celkové zmenšení o 50 KB. A řekněme, že váš web denně obslouží v průměru 1 000 návštěvníků, přičemž každá návštěva má v průměru deset stránek. Samotná minifikace HTML snižuje využití šířky pásma o 50 MB za den (1,5 GB za měsíc).

    Komprese + minifikace

    Jak vidíte, minifikace HTML je užitečná sama o sobě, zvláště když se váš web zvětšuje, zvětšují se soubory a zvyšuje se provoz. Všimněte si, že Pokyny Google PageSpeed doporučujeme minifikovat HTML, takže pokud jste skeptičtí, nechte se tím přesvědčit o opaku.

    jak připojit wii k chytré televizi

    Na optimalizaci HTML je ale skvělé to, že nemusíte volit ani minifikaci, ani kompresi. Můžete dělat obojí! Ve skutečnosti ty by měl udělat obojí.

    V průměru můžete očekávat, že komprese GZIP zmenší soubor HTML o 70 až 90 procent. Při použití výše uvedeného příkladu s odhadem konzervativní komprese by se zmenšené soubory HTML změnily z 45 KB na 13,5 KB každý, což znamená celkové zmenšení o 365 KB. Ve srovnání s neminifikovanými/nekomprimovanými se nyní šířka pásma vašeho webu sníží o 365 MB za den (11 GB za měsíc).

    A kromě úspory šířky pásma se každá stránka načítá dramaticky rychleji, protože prohlížeč koncového uživatele potřebuje stáhnout pouze 13,5 kB oproti 50 kB na stránku.

    Jak komprimovat a zmenšit HTML

    Naštěstí ani jeden není v dnešní době příliš obtížný a k jeho nastavení nepotřebujete mnoho technického know-how.

    WordPress pluginy

    Pokud provozujete web WordPress, stačí nainstalovat jeden plugin a můžete těžit z výhod komprese i minifikace.

    Většina pluginů pro ukládání do mezipaměti umí víc než jen ukládat stránky do mezipaměti. Například, Nejrychlejší mezipaměť WP a Celková mezipaměť W3 oba mají nastavení jedním kliknutím, které vám umožní zapnout minifikaci HTML a kompresi GZIP, mimo jiné funkce, které dále zrychlují načítání stránek a snižují využití šířky pásma.

    jestli ty pouze chcete minifikaci, doporučujeme Minimalizujte HTML zapojit. Je to jednoduché, podporuje HTML/CSS/JS a umožňuje vám trochu upravit metodu minifikace (např. Zda odebrat

    http:

    a

    https:

    z adres URL).

    Statické minifikátory HTML

    Pokud jsou vaše soubory HTML statické (tj. Nejsou dynamicky generovány pomocí CMS nebo webového rámce), můžete spravovat dvě sady souborů HTML: sadu „zdroj“, která není pro snadnou úpravu zrušena, a sadu „zmenšenou“, které vytvoříte při každé změně zdrojového souboru.

    Chcete -li minifikovat, použijte jeden z těchto nástrojů:

    Toto je životaschopná metoda, pokud jste se přestěhovali z CMS jako WordPress a nyní používáte generátory statických webů.

    Povolte kompresi GZIP

    Kroky k povolení komprese GZIP se mohou lišit v závislosti na tom, jaký software webového serveru používáte. Jelikož je Apache nejoblíbenější možností, povíme si, jak jej povolit pomocí .htaccess.

    Připojte se k webovému serveru pomocí FTP a vytvořte soubor s názvem

    .htaccess

    v kořenovém adresáři. Upravte soubor .htaccess tak, aby měl následující nastavení:


    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

    Nejste si jisti, zda komprese na vašem webu funguje? Vyzkoušejte to pomocí tohoto nástroje .

    Abyste dosáhli maximální efektivity, měli byste také se dozvíte, jak kontrolovat, čistit a optimalizovat CSS .

    Podíl Podíl tweet E-mailem Měli byste okamžitě upgradovat na Windows 11?

    Windows 11 již brzy přichází, ale měli byste aktualizovat co nejdříve nebo počkat několik týdnů? Pojďme to zjistit.

    Číst dále     Související témata
    • Programování
    • HTML
    • Vývoj webu
    O autorovi Joel lee(1524 publikovaných článků)

    Joel Lee je šéfredaktorem MakeUseOf od roku 2018. Má titul B.S. v informatice a více než devět let profesionálních zkušeností s psaním a střihem.

    Více od Joela Leeho

    Přihlaste se k odběru našeho zpravodaje

    Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

    Kliknutím sem se přihlásíte k odběru