Kuinka pakattu HTML toimii ja miksi tarvitset sitä

Kuinka pakattu HTML toimii ja miksi tarvitset sitä

Jos sinulla on verkkosivusto, sinun pitäisi jo tietää, miten se tehdään käytä oikeita kuvamuotoja ja optimoi kuvasi verkkoa varten. Kuitenkin, vaikka kuvan pakkaaminen on tunnettu käytäntö, HTML-pakkaus jää yleensä huomiotta, mikä on sääli, koska hyödyt ovat hyödyllisiä.





Tässä artikkelissa käymme läpi kaksi pääasiallista tapaa pienentää HTML -tiedostoja, miksi HTML -tiedostoja pitäisi kutistua ja miten toimia.



Pakkaus vs. minimointi

Mitä tulee HTML -tiedostojen optimointiin, siihen on kaksi päämenetelmää: puristus ja minimointi . Ne kuulostavat pinnalta samanlaisilta, mutta ovat itse asiassa kaksi erillistä tekniikkaa, joten älä sekoita niitä.





Pienentäminen

Voit ajatella pienentämistä tarpeettomien merkkien ja rivien poistamisen lähdekoodissa. Ajattele sisennystä, kommentteja, tyhjiä rivejä jne. Mitään näistä ei vaadita HTML -muodossa - ne on tehty helpottamaan tiedoston lukemista. Näiden tietojen leikkaaminen voi pienentää tiedoston kokoa vaikuttamatta mihinkään.

Esimerkki HTML -sivusta:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

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

Monet web -kehittäjät ja sivustojen omistajat varaavat minimoinnin vain JS- ja CSS -tiedostoille, mutta tämä vanhentunut käytäntö on virhe. HTML: n minimointi on myös tärkeää.



2000 -luvulla minimointityökalut olivat harvinaisia. Piti pienentää tiedostot manuaalisesti aina, kun jotain muuttui. Koska HTML -tiedostot muuttuvat useammin kuin JS- ja CSS -tiedostot, oli yksinkertaisesti liian työlästä minimoida joka kerta. Nykyään se on kiistanalainen asia.

Puristus

Kun käyttäjät vierailevat verkkosivustollasi, he käyttävät sitä käyttämällä HTTP -protokollaa. Selain lähettää Web -palvelimellesi 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 sen lähettämistä vierailijalle (olettaen, että pakkaus on otettu käyttöön palvelimen asetuksissa), ja sitten vierailijan selain voi purkaa sivun alkuperäiseen tilaansa.

Yleisin pakkausmenetelmä on GZIP , joka on tiedostomuoto, joka käyttää häviötön pakkausalgoritmi nimeltään DEFLATE.

Algoritmi etsii tekstin toistuvia esiintymiä HTML -tiedostosta ja korvaa sitten toistuvat esiintymät viittauksilla edelliseen tapahtumaan. Jokainen viittaus on yksinkertaisesti kaksi numeroa: kuinka kaukana viite on ja kuinka monta merkkiä viittaamme.

Harkitse tällaista tekstijonoa (esimerkki GZIP -sivustosta):

Blah blah blah blah blah.

Algoritmi tunnistaa seuraavan toiston:

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

Ensimmäinen tapahtuma on viittauksemme, joten jätä se:

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

Toinen esiintymä viittaa ensimmäiseen esiintymään, joka on viisi merkkiä jäljessä ja viisi merkkiä pitkä:

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

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

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

Ja uudelleen:

Blah b[5,15]lah.

Ja algoritmi on tarpeeksi älykäs ymmärtääkseen, että seuraavat kolme merkkiä ovat viitteen kolme ensimmäistä merkkiä, joten se ulottuu kolmella:

Blah b[5,18].

Ajattele nyt tyypillistä HTML -tiedostoa ja kuinka paljon toistoa on sisällä. Lähes jokainen tunniste, kuten

, on vastaava sulkumerkki, kuten

. Lisäksi monet tunnisteet toistetaan kaikkialla, kuten

,

,

,

  • jne. Attribuutit toistetaan myös usein, mukaan lukien

    class

    ,

    href

    ja

    src

    . On helppo ymmärtää, miksi GZIP -pakkaus on niin tehokas HTML: n kanssa.

    Ainoa haittapuoli on se, että verkkopalvelin tarvitsee hieman enemmän suoritintaa pakkauksen suorittamiseen aina, kun sivua pyydetään. Mutta koska suoritin ei ole paljon huolta nykyään, on melkein aina parempi ottaa GZIP käyttöön kuin olla ilman, vaikka sinulla olisi lähtötason webhotelli.

    Miksi sinun pitäisi puristaa ja pienentää

    On kaksi pääasiallista hyötyä, jotka molemmat ovat ratkaisevia nykypäivän mobiilipainotteisessa verkkomaisemassa.

    Nopeammat sivun lataukset

    Keskimäärin HTML -pienennin voi pienentää tiedoston kokoa noin 3 prosenttia perusasetuksilla. Valinnaisilla lisäasetuksilla HTML -tiedostoa voidaan pienentää vielä 3–7 prosenttia, mikä voi pienentää jopa 10 prosenttia. Tämä johtaa suoraan sivujen latausajan nopeutumiseen.

    Vähemmän kaistanleveyttä käytetty

    Oletetaan, että sinulla on 10 tiedostoa, joista jokainen on pienennetty 50 kt: stä 45 kt: iin ja kutistuu yhteensä 50 kt. Oletetaan, että verkkosivustollasi on keskimäärin 1000 kävijää päivässä, ja 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 huomaat, HTML -minimointi on hyödyllinen itsessään, varsinkin kun sivustosi kasvaa, tiedostot suurenevat ja liikenne kasvaa. Ota huomioon, että Googlen PageSpeed ​​-ohjeet suosittelen HTML -koodin pienentämistä, joten jos olet skeptinen, anna sen vakuuttaa toisin.

    miten teet minecraft modin

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

    Keskimäärin voit odottaa GZIP -pakkauksen kutistavan HTML -tiedoston 70-90 prosenttia. Käyttämällä yllä olevaa esimerkkiä, jossa on konservatiivinen pakkausarvio, pienennetyt HTML -tiedostot siirtyisivät 45 kt: sta 13,5 kt: iin, jolloin koko kutistuu 365 kt. Verrattuna pienentämättömään/pakkaamattomaan, sivustosi kaistanleveys pienenee nyt 365 Mt päivässä (11 Gt kuukaudessa).

    Ja kaistanleveyden säästöjen lisäksi jokainen sivu latautuu dramaattisesti nopeammin, koska loppukäyttäjän selaimen tarvitsee vain ladata 13,5 kt verrattuna 50 kt sivua kohti.

    Kuinka pakata ja pienentää HTML -koodia

    Onneksi kumpikaan ei ole kovin vaikeaa nykyään, eikä niiden asentamiseen tarvita paljon teknistä osaamista.

    WordPress -laajennukset

    Jos käytät WordPress -sivustoa, sinun tarvitsee vain asentaa yksi laajennus ja voit hyötyä sekä pakkaamisesta että pienentämisestä.

    Useimmat välimuistilaajennukset tekevät muutakin kuin vain sivujen välimuistin. Esimerkiksi, WP Nopein välimuisti ja W3 Kokonaisvälimuisti Molemmissa on yhden napsautuksen asetukset, joiden avulla voit ottaa käyttöön HTML-minimoinnin ja GZIP-pakkauksen. Muita ominaisuuksia, jotka nopeuttavat edelleen sivujen lataamista ja vähentävät kaistanleveyden käyttöä.

    Jos sinä vain haluat minimoinnin, suosittelemme Pienennä HTML kytkeä. Se on yksinkertainen, tukee HTML/CSS/JS -tiedostoja ja antaa sinun muokata pienentämismenetelmää hiukan (esim.

    http:

    ja

    https:

    URL -osoitteista).

    Staattiset HTML -minifikaattorit

    Jos HTML -tiedostosi ovat staattisia (eli niitä ei luoda dynaamisesti sisällönhallintajärjestelmässä tai verkkokehyksessä), voit ylläpitää kahta HTML -tiedostojoukkoa: lähdejoukkoa, jota ei ole helppo muokata, ja minimoitua joukkoa, joka luodaan aina, kun muutat lähdetiedostoa.

    Pienennä käyttämällä jotakin seuraavista työkaluista:

    Tämä on toteuttamiskelpoinen tekniikka, jos olet siirtynyt pois WordPressin kaltaisista sisällönhallintajärjestelmistä ja käytät nyt staattisia sivustogeneraattoreita.

    Ota GZIP -pakkaus käyttöön

    GZIP -pakkauksen käyttöönoton vaiheet voivat vaihdella käyttämäsi verkkopalvelinohjelmiston mukaan. Koska Apache on suosituin vaihtoehto, kerromme, miten se otetaan käyttöön .htaccess -ohjelmalla.

    Muodosta yhteys verkkopalvelimeesi FTP: llä ja luo sitten tiedosto nimeltä

    .htaccess

    juurihakemistossa. Muokkaa .htaccess -tiedostoa saadaksesi seuraavat asetukset:


    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

    Etkö ole varma, toimiiko pakkaus sivustossasi? Testaa tällä työkalulla .

    Lopullisen tehokkuuden saavuttamiseksi sinun pitäisi myös opit tarkistamaan, puhdistamaan ja optimoimaan CSS: n .

    Jaa Jaa Tweet Sähköposti Pitäisikö sinun päivittää Windows 11: een välittömästi?

    Windows 11 on tulossa pian, mutta pitäisikö sinun päivittää mahdollisimman pian tai odottaa muutama viikko? Otetaan selvää.

    Lue seuraava     Liittyvät aiheet
    • Ohjelmointi
    • HTML
    • Verkkokehitys
    Kirjailijasta Joel Lee(1524 artikkelia julkaistu)

    Joel Lee on toiminut MakeUseOfin päätoimittajana vuodesta 2018. Hänellä on B.S. tietojenkäsittelytieteen alalta ja yli yhdeksän vuoden ammattikirjoittamisesta ja editoinnista.

    Lisää Joel Lieltä

    tilaa uutiskirjeemme

    Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

    Klikkaa tästä tilataksesi