Hogyan működik a tömörített HTML, és miért van rá szüksége

Hogyan működik a tömörített HTML, és miért van rá szüksége

Ha webhelyet üzemeltet, akkor már tudnia kell, hogyan kell használja a megfelelő képformátumokat és optimalizálja képeit az interneten. Mégis, bár a képtömörítés jól ismert gyakorlat, a HTML tömörítést általában figyelmen kívül hagyják, ami kár, mert az előnyök megérdemlik.





Ebben a cikkben áttekintjük a HTML -fájlok zsugorításának két fő módját, miért kell a HTML -fájlokat zsugorítani, és hogyan kell ezt megtenni.



Tömörítés kontra kicsinyítés

A HTML -fájlok optimalizálása tekintetében két fő módszer létezik: tömörítés és minifikáció . A felszínen hasonlítanak, de valójában két különböző technika, ezért ne keverje össze őket.





Minimalizálás

A minifikációra úgy gondolhatunk, mint a felesleges karakterek és sorok eltávolítására a forráskódban. Gondoljon a behúzásra, megjegyzésekre, üres sorokra stb. Ezek közül egyik sem kötelező a HTML -ben - ezek azért vannak, hogy megkönnyítsék a fájl olvasását. Ezeknek a részleteknek a levágása csökkentheti a fájlméretet anélkül, hogy bármit is befolyásolna.

Minta HTML oldal:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Eredeti méret: 354. Minimalizált méret: 272. Megtakarítás: 82 (23,16%).

Sok webfejlesztő és webhelytulajdonos a kicsinyítést csak a JS és CSS fájlokhoz tartja fenn, de ez az elavult gyakorlat hiba. A HTML minimalizálása is fontos.



A 2000 -es években a minifikációs eszközök ritkák voltak. Minden alkalommal manuálisan kellett kicsinyítenie a fájlokat, amikor valami megváltozott. Mivel a HTML fájlok gyakrabban változnak, mint a JS és CSS fájlok, akkor egyszerűen túl unalmas volt minden alkalommal kicsinyíteni. Manapság ez vitás kérdés.

Tömörítés

Amikor a felhasználók felkeresik webhelyét, a HTTP protokoll használatával teszik ezt. A böngésző kérést küld a webszervernek egy adott oldalra, a webszerver megtalálja az oldalt, majd visszaküldi az oldal tartalmát a látogató böngészőjének.



Mivel azonban a HTTP protokoll támogatja a tömörítést, a webszerver tömörítheti az oldalt, mielőtt elküldi a látogatónak (feltéve, hogy a tömörítés engedélyezve van a szerver beállításaiban), majd a látogató böngészője vissza tudja tömöríteni az oldalt az eredeti állapotába.

A leggyakoribb tömörítési séma GZIP , amely egy fájlformátum, amely a veszteségmentes tömörítési algoritmus DEFLATE néven.

Az algoritmus megkeresi a szöveg ismétlődő előfordulásait a HTML -fájlban, majd lecseréli ezeket az ismétlődő előfordulásokat egy korábbi előfordulásra való hivatkozással. Minden hivatkozás egyszerűen két szám: milyen messze van a hivatkozás, és hány karakterre hivatkozunk.

Fontolja meg az alábbi szövegsorozatot (példa a GZIP webhelyéről):

Blah blah blah blah blah.

Az algoritmus a következő ismétlődést ismeri fel:

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

Az első eset a referenciánk, ezért hagyjuk:

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

A második előfordulás az első előfordulásra utal, amely öt karakterrel van hátra és öt karakter hosszú:

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

De ebben az esetben az algoritmus felismeri, hogy a következő előfordulás ugyanaz a karaktersorozat, ezért további öttel meghosszabbítja a referenciahosszat:

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

És újra:

Blah b[5,15]lah.

És az algoritmus elég okos ahhoz, hogy felismerje, hogy a következő három karakter a hivatkozás első három karaktere, tehát hárommal bővül:

Blah b[5,18].

Most gondoljon egy tipikus HTML -fájlra, és mennyi ismétlődésre. Szinte minden címke, mint pl

, megfelelő zárócímkével rendelkezik, például

. Továbbá sok címke ismétlődik az egészben, mint pl

,

,

,

  • , stb. Az attribútumok is gyakran ismétlődnek, beleértve

    class

    ,

    href

    , és

    src

    . Könnyen belátható, hogy a GZIP tömörítés miért olyan hatékony a HTML segítségével.

    Az egyetlen hátránya, hogy a webszervernek valamivel több CPU -ra van szüksége a tömörítés végrehajtásához minden alkalommal, amikor egy oldalt kérnek. De mivel a CPU manapság nem jelent különösebb gondot, szinte mindig jobb engedélyezni a GZIP-t, mint nélkülözni, még akkor is, ha belépő szintű webtárhelye van.

    Miért érdemes tömöríteni és kicsinyíteni

    Két fő előnye van, amelyek mindkettő kulcsfontosságúak a mai mobilnehéz webes környezetben.

    Gyorsabb oldalbetöltések

    Egy HTML -tömörítő átlagosan körülbelül 3 százalékkal képes csökkenteni egy fájl méretét alapvető beállításokkal. Az opcionális speciális beállításokkal a HTML fájl további 3–7 százalékkal csökkenthető, ami akár 10 százalékos csökkenést is jelenthet. Ez közvetlenül gyorsabb oldalbetöltési időt jelent.

    Kevesebb használt sávszélesség

    Tegyük fel, hogy 10 fájlja van, mindegyik 50 KB -ról 45 KB -ra kicsinyítve, így összesen 50 KB -ra csökken. És tegyük fel, hogy webhelye naponta átlagosan 1000 látogatót szolgál ki, ahol minden egyes látogatás átlagosan tíz oldalt jelent. A HTML -tömörítés önmagában napi 50 MB -mal (havi 1,5 GB) csökkenti a sávszélesség -használatot.

    Tömörítés + kicsinyítés

    Amint láthatja, a HTML -tömörítés önmagában hasznos, különösen akkor, ha webhelye egyre nagyobb, a fájlok nagyobbak és a forgalom nő. Vegye figyelembe, hogy A Google PageSpeed ​​irányelvei javasoljuk a HTML lerövidítését, ezért ha szkeptikus, hagyja, hogy ez meggyőzze az ellenkezőjéről.

    hogyan kell játszani a fortnite -ot xbox nélkül élőben

    De a HTML -optimalizálásban az a nagyszerű, hogy nem kell sem a kicsinyítést, sem a tömörítést választani. Mindkettőt megteheti! Valójában te kellene csináld mindkettőt.

    A GZIP tömörítés átlagosan 70-90 százalékos zsugorodásra számíthat. A konzervatív becslési becsléssel a fenti példát használva a kicsinyített HTML -fájlok egyenként 45 KB -ról 13,5 KB -ra növekednének, összesen 365 KB -ra. A tömörítetlen/tömörítetlenhez képest a webhely sávszélessége most 365 MB -mal csökken naponta (11 GB havonta).

    A sávszélesség -megtakarításon felül minden oldal drámaian gyorsabban töltődik be, mert a végfelhasználó böngészőjének mindössze 13,5 KB -ot kell letöltenie, szemben az oldalankénti 50 KB -tal.

    Hogyan lehet tömöríteni és kicsinyíteni a HTML -t

    Szerencsére manapság egyik sem nehéz, és ezek beállításához nem kell sok technikai tudás.

    WordPress beépülő modulok

    Ha WordPress webhelyet futtat, mindössze annyit kell tennie, hogy telepít egy beépülő modult, és kihasználhatja a tömörítés és a kicsinyítés előnyeit.

    A legtöbb gyorsítótárazó plugin többet tesz, mint egyszerűen az oldalak gyorsítótárazása. Például, WP leggyorsabb gyorsítótár és W3 Teljes gyorsítótár mindkettő egy kattintással rendelkezik beállításokkal, amelyek lehetővé teszik a HTML-tömörítés és a GZIP-tömörítés bekapcsolását, többek között olyan funkciók mellett, amelyek tovább gyorsítják az oldal betöltését és csökkentik a sávszélesség-használatot.

    Ha te csak kicsinyítést szeretne, javasoljuk a Minimalizálja a HTML -t csatlakoztat. Egyszerű, támogatja a HTML/CSS/JS -t, és lehetővé teszi a kicsinyítési módszer egy kis módosítását (pl.

    http:

    és

    https:

    URL -ekből).

    Statikus HTML -minifigurák

    Ha a HTML -fájlok statikusak (azaz nem dinamikusan generálódnak egy CMS -ben vagy webes keretrendszerben), akkor két HTML -fájlkészletet tarthat fenn: egy „forrás” -halmazt, amely nincs egyszerűsítve a könnyű szerkesztés érdekében, és egy „kicsinyített” halmazt, amelyet minden alkalommal létrehoz, amikor módosítja a forrásfájlt.

    A kicsinyítéshez használja az alábbi eszközök egyikét:

    Ez életképes technika, ha eltávolodott a CMS -ektől, például a WordPress -től, és most statikus webhelygenerátorokat használ.

    A GZIP tömörítés engedélyezése

    A GZIP tömörítés engedélyezésének lépései eltérhetnek attól függően, hogy melyik webszerver szoftvert használja. Mivel az Apache a legnépszerűbb opció, bemutatjuk, hogyan lehet engedélyezni a .htaccess használatával.

    Csatlakozzon a webszerverhez FTP használatával, majd hozzon létre egy ún

    .htaccess

    a gyökérkönyvtárban. Szerkessze a .htaccess fájlt a következő beállításokkal:


    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

    Nem biztos abban, hogy működik -e tömörítés a webhelyén? Tesztelje ezzel az eszközzel .

    A végső hatékonyság érdekében ezt is meg kell tennie megtudhatja, hogyan kell ellenőrizni, tisztítani és optimalizálni a CSS -t .

    Részvény Részvény Csipog Email Azonnal frissítenie kell a Windows 11 rendszerre?

    A Windows 11 hamarosan érkezik, de frissítse a lehető leghamarabb, vagy várjon néhány hetet? Találjuk ki.

    Olvassa tovább     Kapcsolódó témák
    • Programozás
    • HTML
    • Webfejlesztés
    A szerzőről Joel Lee(1524 megjelent cikk)

    Joel Lee a MakeUseOf főszerkesztője 2018 óta. B.S. számítástechnika szakon és több mint kilenc éves szakmai írási és szerkesztési tapasztalat.

    Továbbiak Joel Lee -től

    Iratkozzon fel hírlevelünkre

    Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

    Feliratkozáshoz kattintson ide