Hirdetés
Ha webhelyet működtet, akkor már tudnia kell, hogyan kell használja a megfelelő képformátumot és optimalizálja képeit az interneten 10 ingyenes online kötegelt kép-eszköz átméretezéshez, konvertáláshoz és optimalizáláshozKötegelt szerkesztő eszközökre van szükség, ha rengeteg feldolgozható fényképe van, és nagyon kevés idő áll rendelkezésre. Bemutatjuk az online elérhető legjobb kötegelt átméretezőket, optimalizálókat vagy átalakítókat. Olvass tovább . Noha a képek tömörítése közismert gyakorlat, a HTML-tömörítést általában figyelmen kívül hagyják, ami szégyen, mert az előnyök érdemesek.
Ebben a cikkben áttekintjük a HTML-fájlok csökkentésének két fő módszerét, miért kell a HTML-fájlokat csökkenteni, és hogyan lehet ezt megtenni.
Tömörítés vs. minification
Ami a HTML fájlok optimalizálását illeti, két fő módszer van erre: összenyomás és minifikációs. A felszínen hasonlóan hangzik, de valójában két különálló technika, tehát ne tévessze össze őket.
minification
A aprításra gondolhat, mint a felesleges karakterek és sorok eltávolítására a forráskódban. Gondoljon behúzásra, megjegyzésekre, üres sorokra stb. Ezek közül egyik sem szükséges a HTML-ben - léteznek, hogy könnyebben olvassák a fájlt. Ezen részletek kivágásával csökkentheti a fájl méretét anélkül, hogy bármit is befolyásolna.
Minta HTML oldal:
A címed itt
Ez egy fejléc
Küldjön nekem e-mailt a [email protected].
Ez egy új bekezdés!
Ez egy új bekezdés félkövér és dőlt betűvel.
Minta HTML oldal, aprítva:
A címed itt
Ez egy fejléc
Küldjön nekem e-mailt a [email protected].
Ez egy új bekezdés!
Ez egy új bekezdés félkövér és dőlt betűvel.
Eredeti méret: 354. Minimális méret: 272. Megtakarítás: 82 (23,16%).
Számos webfejlesztő és webhelytulajdonos csak a JS és a CSS fájlokra tölti le a minifikációt, de ez az elavult gyakorlat hiba. A HTML minimalizálása is fontos.
A 2000-es években a finomítási eszközök ritkák voltak. A fájlokat manuálisan kell tömöríteni minden alkalommal, amikor valami megváltozott. Mivel a HTML fájlok gyakrabban változnak, mint a JS és a CSS fájlok, akkor egyszerűen túl unalmas volt, hogy mindezt apróra csinálják. Manapság erről van szó.
összenyomás
Amikor a felhasználók meglátogatják az Ön webhelyét, akkor ezt a HTTP protokoll használatával teszik meg. A böngésző kérést küld egy weboldal szerverére egy adott oldalról, a webszerver megtalálja az oldalt, majd az oldal tartalmát visszaküldi a látogató böngészőjéhez.
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óra (feltételezve, hogy: a tömörítés engedélyezve van a szerver beállításaiban), majd a látogató böngészője kibonthatja az oldalt az eredeti állapotába.
A leggyakoribb tömörítési séma GZIP, amely egy a veszteségmentes tömörítési algoritmus Hogyan működik a fájl tömörítése?Hogyan működik a fájlok tömörítése? Ismerje meg a fájlok tömörítésének alapjait és a különbséget a veszteséges és a veszteségmentes tömörítés között. Olvass tovább az úgynevezett DEFLATE.
Az algoritmus megkeresi a szöveg ismétlődő előfordulásait a HTML fájlban, majd ezeket az ismétlődő előfordulásokat helyettesíti egy korábbi eseményre mutató hivatkozásokkal. Mindegyik hivatkozás egyszerűen két számból áll: mennyire van vissza a referencia, és hány karakterre hivatkozunk.
Vegyünk egy ilyen szöveges szöveget (példa a GZIP weboldaláról):
Blah blah blah blah blah.Az algoritmus felismeri a következő ismétlést:
B {lah b} {lah b} {lah b} {lah b} lah.Az első előfordulás a referencia, tehát hagyjuk, hogy legyen:
Blah b {lah b} {lah b} {lah b} lah.A második esemény az első eseményre utal, amely öt karakter mögött é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 karaktersor, tehát további öt ötvel meghosszabbítja a referencia hosszát:
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 az első három karakter a referenciaban, tehát háromkal meghosszabbodik:
Blah b [5,18].Gondoljunk egy tipikus HTML fájlra, és hogy mekkora ismétlés létezik benne. Szinte minden címke, például, rendelkezik egy megfelelő zárócímkével, például. Ezenkívül számos címkét megismételnek az egész, például, , osztály, hrefés src. Könnyű belátni, hogy a GZIP tömörítés miért olyan hatékony a HTML használatával.
Az egyetlen hátrány, 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 oldal kért. De mivel a CPU manapság nem sok gondot jelent, szinte mindig jobb, ha engedélyezi a GZIP-et, mint hogy nélkül maradjon, még akkor is, ha belépő szintű webtárhelyed van A legjobb web hosting szolgáltatások: megosztott, VPS és dedikáltAz Ön igényeinek leginkább megfelelő web hosting szolgáltatást keres? Itt vannak a legjobb ajánlások a blogodhoz vagy a webhelyedhez. Olvass tovább .
Miért kellene tömöríteni és aprítani?
Két fő előnye van, amelyek egyaránt kulcsfontosságúak a mai nehéz web-környezetben.
Gyorsabb oldal betöltés
Az alapvető beállításokkal egy HTML tömörítő átlagosan kb. 3% -kal csökkentheti a fájl méretét. Az opcionális speciális beállításokkal a HTML-fájl további 3–7 százalékkal csökkenthető, akár 10 százalékkal is csökkenthető. Ez közvetlenül gyorsabb oldalbetöltési időket jelent.
Kevesebb sávszélességet használt
Tegyük fel, hogy 10 fájlja van, mindegyik 50 KB-ról 45 KB-ra van csökkentve, összesen 50 KB-os zsugorodással. Tegyük fel, hogy webhelye napi átlagosan 1000 látogatóra szolgál, ahol minden látogatás átlagosan tíz oldalt jelent. A HTML-finomítás önmagában 50 MB / nap (1,5 GB / hónap) csökkenti a sávszélességet.
Tömörítés + Minimalizálás
Mint láthatja, a HTML tömörítés önmagában is hasznos, különösen akkor, ha webhelye nagyobb lesz, a fájlok egyre nagyobb, és növekszik a forgalom. Vegye figyelembe, hogy A Google PageSpeed irányelvei javasoljuk a HTML tömörítését, tehát ha szkeptikus vagy, hagyja, hogy ellenkező módon meggyőzze.
A HTML-optimalizálás azonban a legfontosabb, hogy nem kell választania sem a tömörítést, sem a tömörítést. Meg tudod csinálni mindkettőt! Valójában te kellene mindkettőt csinálni.
Átlagosan számíthat arra, hogy a GZIP tömörítés egy HTML fájlt 70-90 százalékkal csökken. A fenti példát konzervatív tömörítési becsléssel felhasználva a tömörített HTML fájlok egyenként 45 KB-ról 13,5 KB-ra csökkennének, összesen 365 KB zsugorodással. A nem finomított / tömörítetlenhez képest a webhely sávszélessége most napi 365 MB-val (11 GB / hó) csökkent.
A sávszélesség-megtakarítás mellett minden oldal drámai gyorsabban töltődik be, mivel a végfelhasználó böngészőjének csupán 13,5 KB-t kell letöltenie, szemben az oldalankénti 50 KB-val.
HTML tömörítése és tömörítése
Szerencsére manapság egyik sem nagyon nehéz, és a beállításukhoz nem kell sok műszaki know-how-ra.
WordPress plugins
Ha WordPress-helyet futtat, csak annyit kell tennie, hogy telepít egy plugint, és élvezheti mind a tömörítés, mind a tömörítés előnyeit.
A legtöbb gyorsítótár-bővítmény nem csupán a gyorsítótár-oldalakat érinti. Például, WP leggyorsabb gyorsítótár és W3 teljes gyorsítótár mindkettő rendelkezik egy kattintással, amely lehetővé teszi a HTML tömörítés és a GZIP tömörítés bekapcsolását, többek között azok mellett, amelyek tovább gyorsítják az oldalak betöltését és csökkentik a sávszélességet.
Ha te csak szeretne aprítani, javasoljuk a Finomítsa a HTML-t csatlakoztat. Ez egyszerű, támogatja a HTML / CSS / JS-t, és lehetővé teszi, hogy egy kissé finomítsa a finomítási módszert (pl. http: és https: URL-ekből).
Statikus HTML minifeszítők
Ha a HTML-fájlok statikusak (azaz nem képezik dinamikusan a CMS vagy a webes keretrendszer által létrehozott fájlokat), akkor két HTML-fájlkészletet tarthat fenn: egy „forrás” halmaz, amely nem szerkeszthető az egyszerű szerkesztés érdekében, és egy „aprított” készlet, amelyet bármikor létrehozhat, amikor módosítja a forrás fájlt.
A aprításhoz használja az alábbi eszközök egyikét:
- HTMLCompressor
- HTML Minifier
- HTML Minifier (eltér a fentiektől)
Ez egy megvalósítható technika, ha elmozdult a CMSes-től, mint például a WordPress, és most már használja statikus helygenerátorok 7 ok a CMS áthidalására és a statikus webhely-generátor mérlegeléséreSok évig sok felhasználó számára nehéz volt a weboldal közzététele. A CMS-ek, mint például a WordPress, megváltoztatta ezt, ám ezek továbbra is zavaróak lehetnek. Egy másik alternatíva a statikus webhely-generátor. Olvass tovább .
Engedélyezze a GZIP tömörítést
A GZIP tömörítés engedélyezésének lépései az alkalmazott webszerver-szoftvertől függően eltérhetnek. Mivel az Apache a legnépszerűbb lehetőség, megvizsgáljuk, hogyan engedélyezzük azt .htaccess használatával.
Csatlakozzon a webszerverhez az FTP használatával, majd hozzon létre egy hívott fájlt .htaccess a gyökérkönyvtárban. Szerkessze a .htaccess fájlt a következő beállításokkal:
mod_gzip_on Igen mod_gzip_dechunk Igen mod_gzip_item_include fájl. (html? | txt | css | js | php | pl) $ mod_gzip_item_include kezelõ ^ 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 a tömörítés működik-e az Ön webhelyén? Tesztelje ezt az eszközt.
A maximális hatékonyság érdekében ezt is meg kell tennie megismerheti a CSS ellenőrzését, tisztítását és optimalizálását 11 Hasznos eszközök a CSS-fájlok ellenőrzéséhez, tisztításához és optimalizálásáhozJavítani szeretné CSS-kódját? Ezek a CSS-ellenőrzők és -optimalizálók elősegítik a CSS-kód, a szintaxis javítását és a weboldalak minimalizálását. Olvass tovább .
Joel Lee B.S. számítástechnikában és több mint hat éves szakmai írói tapasztalat. A MakeUseOf főszerkesztője.