reklama

Pokud provozujete web, měli byste vědět, jak na to použijte správné formáty obrázků a optimalizujte své obrázky pro web 10 bezplatných online dávkových obrazových nástrojů pro změnu velikosti, převod a optimalizaciPokud máte spoustu fotografií ke zpracování a velmi málo času, potřebujete nástroje dávkové úpravy. Představujeme vám nejlepší šarže resizerů, optimalizátorů nebo převodníků dostupných online. Přečtěte si více . Přestože je komprese obrazu známou praxí, komprese HTML má tendenci se přehlížet, což je škoda, protože výhody se vyplatí.

V tomto článku se podíváme na dvě hlavní metody zmenšování souborů HTML, proč by měly být soubory HTML zmenšeny 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 jsou to dvě odlišné techniky, takže si je nenechte zmást.

Minifikace

Můžete myslet na minifikaci jako na odstranění zbytečných znaků a řádků ve zdrojovém kódu. Pomyslete na odsazení, komentáře, prázdné řádky atd. Žádné z nich není vyžadováno v HTML - existují, aby usnadnily čtení souboru. Oříznutí těchto podrobností může oholit velikost souboru, aniž by cokoli ovlivnilo.

Ukázková stránka HTML:

Toto je záhlaví
Pošlete mi mail na [email protected].
Toto je nový odstavec!
Toto je nový odstavec tučně a kurzívou.

Ukázková stránka HTML, minifikovaná:

Toto je záhlaví
Pošlete mi mail na [email protected].
Toto je nový odstavec!
Toto je nový odstavec tučně a kurzívou.

Původní velikost: 354. Minifikovaná velikost: 272. Úspory: 82 (23,16%).

Mnoho vývojářů webu a vlastníků stránek vyhrazuje minifikaci pouze pro soubory JS a CSS, ale tato zastaralá praxe je chyba. Důležitá je také minifikace HTML.

Již v roce 2000 byly nástroje pro minifikaci vzácné. Soubory jste museli ručně minifikovat pokaždé, když se něco změnilo. Protože se soubory HTML mění častěji než soubory JS a CSS, bylo prostě příliš únavné pokaždé minifikovat. V dnešní době je to náročný bod.

Komprese

Když uživatelé navštíví váš web, učiní tak pomocí protokolu HTTP. Prohlížeč odešle požadavek na konkrétní stránku na váš webový server, 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.

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

Nejobvyklejší schéma komprese je GZIP, což je formát souboru, který používá bezeztrátový kompresní algoritmus Jak funguje komprese souborů?Jak funguje komprese souborů? Naučte se základy komprese souborů a rozdíl mezi ztrátovou a bezeztrátovou kompresí. Přečtěte si více nazývá se DEFLATE.

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

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

Blah bla bla bla bla.

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

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

První výskyt je náš odkaz, takže nechte to být:

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

Druhý výskyt odkazuje zpět na první výskyt, který je pět znaků za a pět znaků dlouhý:

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

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

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

A znovu:

Blah b [5,15] lah.

Algoritmus je dostatečně chytrý, 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, například, má odpovídající uzavírací značku, například. Kromě toho se v celém textu opakuje mnoho značek, například, , ,, atd. Atributy se také často opakují, včetně třída, href, a src. Je snadné pochopit, proč je komprese GZIP s HTML tak efektivní.

Jedinou nevýhodou je, že webový server potřebuje trochu více CPU k provedení komprese při každém vyžádání stránky. Ale vzhledem k tomu, že CPU v dnešní době není velkým problémem, je téměř vždy lepší povolit GZIP než jít bez něj, i když máte vstupní webhosting Nejlepší webhostingové služby: sdílené, VPS a vyhrazenéHledáte nejlepší webhostingovou službu pro vaše potřeby? Zde jsou naše nejlepší doporučení pro váš blog nebo web. Přečtěte si více .

Proč byste měli komprimovat a minifikovat

Existují dvě hlavní výhody, z nichž obě jsou v dnešním mobilním prostředí těžké.

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

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

Méně použité šířky pásma

Řekněme, že máte 10 souborů, z nichž každý je zmenšen z 50 KB na 45 KB, čímž dojde k celkovému zmenšení 50 KB. Řekněme například, že váš web obsluhuje každý den průměrně 1 000 návštěvníků, přičemž každá návštěva průměrně představuje 10 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ě, zejména když se váš web zvětšuje, soubory se zvětšují a zvyšuje se provoz. Všimněte si, že Pokyny společnosti PageSpeed ​​společnosti Google doporučujeme minifikovat HTML, takže pokud jste skeptičtí, přesvědčte se o tom jinak.

Co je však na optimalizaci HTML skvělé, je to, že nemusíte volit minifikaci ani kompresi. Můžete udělat obojí! Ve skutečnosti, vy 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 konzervativním odhadem komprese by zhuštěné soubory HTML šly každý z 45 KB na 13,5 KB, což znamená celkové zmenšení o 365 KB. Ve srovnání s nezkomprimovaným / nekomprimovaným je nyní šířka pásma vašeho webu snížena o 365 MB za den (11 GB za měsíc).

A navíc k úsporám šířky pásma se každá stránka načítá výrazně 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 minifikovat HTML

Naštěstí ani dnes není příliš obtížné a pro jejich nastavení nepotřebujete mnoho technického know-how.

Doplňky WordPress

Pokud provozujete web WordPress, vše, co musíte udělat, je nainstalovat jeden plugin a vytěžit výhody komprese a minifikace.

Většina pluginů pro ukládání do mezipaměti umožňuje více než jen ukládání stránek 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 minidizaci HTML a kompresi GZIP, mimo jiné funkce, které dále zrychlují načítání stránky a snižují využití šířky pásma.

jestli ty pouze Chcete minifikaci, doporučujeme Minifikujte HTML zapojit. Je to jednoduché, podporuje HTML / CSS / JS a umožňuje trošku vylepšit metodu minifikace (např. Zda odebrat http: a https: z adres URL).

Statické HTML minifikátory

Pokud jsou vaše soubory HTML statické (tj. Nejsou dynamicky generovány pomocí CMS nebo webového rámce), můžete udržovat dvě sady souborů HTML: „zdrojová“ sada, která je pro snadnou editaci nesminifikovaná a „minifikovaná“ sada, kterou vytvoříte, kdykoli provedete změnu zdrojového souboru.

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

• HTMLCompressor
• HTML Minifier
• HTML Minifier (liší se od výše uvedeného)

Jedná se o životaschopnou techniku, pokud jste se vzdálili od CMS, jako je WordPress a nyní používáte statické generátory stránek 7 důvodů, proč se zbavit svého CMS a zvážit statický generátor stránekPo mnoho let bylo publikování webové stránky pro mnoho uživatelů obtížné. CMS, jako je WordPress, to změnilo, ale stále mohou být matoucí. Další alternativou je generátor statických stránek. Přečtěte si více .

Povolit kompresi GZIP

Postup povolení komprese GZIP se může lišit v závislosti na použitém softwaru webového serveru. Protože je Apache nejoblíbenější možností, probereme, jak ji 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 Ano mod_gzip_dechunk Ano mod_gzip_item_include soubor. (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 ^ Kódování obsahu:. * Gzip. *
 SetOutputFilter DEFLATE. 

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

Pro maximální efektivitu byste také měli Naučte se, jak zkontrolovat, vyčistit a optimalizovat váš CSS 11 Užitečné nástroje pro kontrolu, čištění a optimalizaci souborů CSSChcete vylepšit svůj kód CSS? Tyto CSS checkery a optimalizátory vám pomohou vylepšit CSS kód, syntaxi a minimalizovat vaše webové stránky. Přečtěte si více .