Mainos

Jos sinulla on verkkosivusto, sinun pitäisi jo tietää käytä oikeita kuvamuotoja ja optimoi kuvasi verkkoa varten 10 ilmaista online-eräkuvan työkalua koon muuttamiseksi, muuntamiseksi ja optimoimiseksiTarvitset erämuokkaustyökaluja, kun sinulla on paljon käsiteltäviä kuvia ja erittäin vähän aikaa. Esittelemme sinulle parhaat verkossa saatavilla olevat eräsuorittimet, optimoijat tai muuntimet. Lue lisää . Vaikka kuvan pakkaaminen on tunnettu käytäntö, HTML-pakkauksella on taipumus jäädä huomiotta, mikä on sääli, koska edut ovat arvokkaita.

Tässä artikkelissa käsittelemme kahta päämenetelmää HTML-tiedostojen pienentämiseksi, miksi HTML-tiedostoja pitäisi kutistaa ja kuinka jatkaa.

Pakkaus vs. kutistaminen

HTML-tiedostojen optimoinnissa on kaksi päämenetelmää: puristus ja kutistaminen. Ne kuulostavat pinnalta samanlaisilta, mutta ovat oikeastaan ​​kaksi erillistä tekniikkaa, joten älä sekoita niitä.

kutistaminen

Voit ajatella minimointia tarpeettomien merkkien ja rivien poistamisesta lähdekoodissa. Ajattele sisennyksiä, kommentteja, tyhjiä rivejä jne. Mitään näistä ei vaadita HTML-muodossa - ne ovat olemassa, jotta tiedostosta olisi helpompi lukea. Näiden yksityiskohtien leikkaaminen voi pienentää tiedoston kokoa vaikuttamatta mihinkään.

Esimerkki HTML-sivusta:

Tämä on otsikko
Lähetä minulle sähköpostia osoitteessa [email protected].
Tämä on uusi kohta!
Tämä on uusi kappale lihavoituna ja kursivoituna.

Näyte HTML-sivusta, pienennetty:

Tämä on otsikko
Lähetä minulle sähköpostia osoitteessa [email protected].
Tämä on uusi kohta!
Tämä on uusi kappale lihavoituna ja kursivoituna.

Alkuperäinen koko: 354. Minimoitu koko: 272. Säästöt: 82 (23,16%).

Monet web-kehittäjät ja sivuston omistajat pidättävät minimoinnin vain JS- ja CSS-tiedostoille, mutta tämä vanhentunut käytäntö on virhe. Myös HTML-minimointi on tärkeää.

2000-luvulla minitointityökalut olivat harvinaisia. Sinun piti pienentää tiedostoja manuaalisesti joka kerta, kun jotain muuttui. Koska HTML-tiedostot vaihtuvat useammin kuin JS- ja CSS-tiedostot, se oli yksinkertaisesti liian tylsiä pienentää joka kerta silloin. Nykyään se on väitepiste.

Puristus

Kun käyttäjät vierailevat verkkosivustollasi, he tekevät niin HTTP-protokollan avulla. Selain lähettää verkkopalvelimellesi tietyn sivun pyynnön, verkkopalvelimesi löytää sivun ja lähettää sitten sivun sisällön takaisin vierailijan selaimeen.

Mutta koska HTTP-protokolla tukee pakkaamista, verkkopalvelimesi voi pakata sivun ennen lähettämistä kävijälle (olettaen, että pakkaus on otettu käyttöön palvelimen asetuksissa), ja sitten vierailijan selain voi purkaa sivun takaisin alkuperäiseen tilaansa.

Yleisin pakkausjärjestelmä on GZIP, joka on tiedostomuoto, joka käyttää häviötön pakkausalgoritmi Kuinka tiedostojen pakkaus toimii?Kuinka tiedostojen pakkaus toimii? Opi tiedostojen pakkaamisen perusteet ja ero häviöllisen ja häviöttömän pakkauksen välillä. Lue lisää kutsutaan DEFLATE.

Algoritmi etsii toistuvia tekstin esiintymiä HTML-tiedostossa, korvaa sitten nämä toistuvat esiintymät viittauksilla aiempaan esiintymiseen. Jokainen viittaus on yksinkertaisesti kaksi numeroa: kuinka kaukana viite on ja kuinka monta merkkiä me viittaamme.

Mieti seuraavaa merkkijonoa (esimerkki otettu GZIP-verkkosivustolta):

Blah blah blah blah blah.

Algoritmi tunnistaa seuraavan toiston:

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

Ensimmäinen tapahtuma on referenssimme, joten jätä se olemaan:

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

Toinen tapahtuma viittaa ensimmäiseen tapahtumaan, joka on viisi merkkiä takana ja viisi merkkiä pitkä:

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

Mutta tässä tapauksessa algoritmi tunnistaa, että seuraava tapahtuma on sama merkkijono, joten se pidentää referenssipituutta vielä viidellä:

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

Ja uudelleen:

Blah b [5,15] lah.

Ja algoritmi on tarpeeksi älykäs ymmärtääksesi, että seuraavat kolme merkkiä ovat referenssin kolme ensimmäistä merkkiä, joten se laajenee kolmella:

Blah b [5,18].

Mieti nyt tyypillistä HTML-tiedostoa ja kuinka paljon toistoa siinä esiintyy. Lähes jokainen tunniste, kuten, on vastaava suljetunniste, kuten. Lisäksi monet tunnisteet toistetaan kaikkialla, kuten, , ,, jne. Määritteet toistuvat myös usein, mukaan lukien luokka, hrefja src. On helppo nähdä, miksi GZIP-pakkaus on niin tehokas HTML: n kanssa.

Ainoa haittapuoli on, että web-palvelin tarvitsee hieman enemmän prosessoria suorittaaksesi pakkauksen joka kerta, kun sivua pyydetään. Mutta koska prosessori ei ole nykyään paljon huolenaihe, on melkein aina parempi ottaa GZIP käyttöön kuin mennä ilman, vaikka sinulla olisi lähtötason web-hosting Paras Web-hosting-palvelu: Jaettu, VPS ja omistettuEtsitkö parasta web-hosting-palvelua tarpeitasi varten? Tässä ovat parhaat suosituksemme blogiisi tai verkkosivustoosi. Lue lisää .

Miksi sinun pitäisi pakkaa ja pienentää

On olemassa kaksi pääasiallista etua, jotka molemmat ovat ratkaisevan tärkeitä nykypäivän mobiiliraskaisessa verkkoympäristössä.

Nopeampi sivukuormitus

HTML-minifikaattori voi pienentää tiedoston kokoa noin 3 prosenttia perusasetuksilla. Valinnaisilla lisäasetuksilla HTML-tiedosto voidaan vähentää vielä 3–7 prosentilla potentiaalisen pienentämisen vuoksi jopa 10 prosentilla. Tämä johtaa suoraan nopeampiin sivujen latausaikoihin.

Vähemmän kaistanleveyttä käytetty

Oletetaan, että sinulla on 10 tiedostoa, joista jokainen on pienennetty 50 kt: stä 45 kt: iin, jolloin kokonaiskutistuma on 50 kt. Oletetaan, että verkkosivustosi palvelee keskimäärin 1000 kävijää päivittäin, kun jokainen käynti on keskimäärin kymmenen sivua. Pelkkä HTML-minimointi vähentää kaistanleveyden käyttöä 50 Mt päivässä (1,5 Gt kuukaudessa).

Pakkaus + minimointi

Kuten näette, HTML-minimointi on hyödyllistä yksinään, etenkin kun sivustosi kasvaa, tiedostot kasvavat ja liikenne kasvaa. Ota huomioon, että Googlen PageSpeed-ohjeet suosittele HTML: n pienentämistä, joten jos olet skeptinen, anna sen vakuuttaa muuten.

Mutta hienoa HTML-optimoinnissa on, että sinun ei tarvitse valita pienentämistä tai pakkaamista. Voit tehdä molemmat! Itse asiassa sinä pitäisi tee molemmat.

Keskimäärin voit odottaa, että GZIP-pakkaus vähentää HTML-tiedostoa 70–90 prosenttia. Käyttämällä yllä olevaa esimerkkiä konservatiivisella pakkausarvioilla, minimoidut HTML-tiedostot nousisivat 45 kt: sta 13,5 KB: iin kutakin kutistettaessa 365 kt. Verrattuna muokkaamattomaan / pakkaamattomaan, sivustosi kaistanleveys on nyt pienentynyt 365 Mt päivässä (11 Gt kuukaudessa).

Kaistanleveyden säästöjen lisäksi jokainen sivu latautuu dramaattisesti nopeammin, koska loppukäyttäjän selaimen on ladattava vain 13,5 kt vs. 50 kt sivua kohden.

HTML-tiedostojen pakkaaminen ja pienentäminen

Onneksi kumpikaan ei ole kovin vaikeaa nykyään, ja sinun ei tarvitse paljon teknistä tietotaitoa niiden asettamiseen.

WordPress-laajennukset

Jos käytät WordPress-sivustoa, sinun tarvitsee vain asentaa yksi laajennus ja voit hyödyntää sekä pakkaamisen että pienentämisen etuja.

Suurin osa välimuistiin liitettävistä laajennuksista tekee muutakin kuin vain välimuistisivuja. Esimerkiksi, WP-nopein välimuisti ja W3-välimuisti molemmilla on yhden napsautuksen asetukset, joiden avulla voit ottaa HTML-minimoinnin ja GZIP-pakkauksen käyttöön muiden ominaisuuksien lisäksi, jotka nopeuttavat sivujen lataamista entisestään ja vähentävät kaistanleveyden käyttöä.

Jos sinä vain haluat minitoida, suosittelemme Pienennä HTML kytkeä. Se on yksinkertainen, tukee HTML / CSS / JS: tä ja antaa sinun mukauttaa pienennysmenetelmää vähän (esim. Poistetaanko http: ja https: URL-osoitteista).

Staattiset HTML-minimoijat

Jos HTML-tiedostosi ovat staattisia (ts. Niitä ei luoda CMS: n tai verkkokehyksen avulla dynaamisesti), voit ylläpitää kahta HTML-tiedostojoukkoa: "lähde" ​​-sarja, joka on määrittelemätön helppoa muokkaamista varten, ja "pienennetty" -joukko, jonka luot aina, kun muutat lähdetiedostoa.

Pienennä jotain seuraavista työkaluista:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (erilainen kuin yllä)

Tämä on toteuttamiskelpoinen tekniikka, jos olet siirtynyt CMS-ohjelmista, kuten WordPressistä, ja käytät nyt staattiset sivustogeneraattorit 7 syytä CMS: n ohittamiseen ja staattisen sivuston luomiseenVerkkosivuston julkaiseminen oli monien vuosien ajan vaikeaa monille käyttäjille. WordPressin kaltaiset CMS: t muuttivat sen, mutta ne voivat silti olla hämmentäviä. Toinen vaihtoehto on staattinen sivustogeneraattori. Lue lisää .

Ota GZIP-pakkaus käyttöön

GZIP-pakkauksen käyttöönottovaiheet saattavat poiketa käyttämästäsi verkkopalvelinohjelmistosta. Koska Apache on suosituin vaihtoehto, selvitämme kuinka se otetaan käyttöön .htaccess-sovelluksella.

Yhdistä verkkopalvelimeesi FTP: llä ja luo sitten tiedosto nimeltä .htaccess juurihakemistossa. Muokkaa .htaccess-tiedostoa seuraavilla asetuksilla:

 mod_gzip_on Kyllä mod_gzip_dechunk Kyllä mod_gzip_item_include tiedosto. (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. 

Etkö ole varma, toimiiko pakkaaminen verkkosivustollasi? Testaa se tällä työkalulla.

Perimmäisen tehokkuuden saavuttamiseksi sinun tulisi myös opi kuinka tarkistaa, puhdistaa ja optimoida CSS 11 Hyödyllisiä työkaluja CSS-tiedostojen tarkistamiseen, puhdistamiseen ja optimointiinHaluatko parantaa CSS-koodiasi? Nämä CSS-checkerit ja optimoijat auttavat parantamaan CSS-koodia, syntaksia ja pienentämään verkkosivujasi. Lue lisää .