Kā darbojas saspiests HTML un kāpēc tas var būt vajadzīgs

Kā darbojas saspiests HTML un kāpēc tas var būt vajadzīgs

Ja jūs vadāt vietni, jums jau vajadzētu zināt, kā to darīt izmantojiet pareizos attēlu formātus un optimizējiet attēlus tīmeklim. Tomēr, lai gan attēlu saspiešana ir plaši pazīstama prakse, HTML saspiešana parasti tiek ignorēta, un tas ir kauns, jo ieguvumi ir tā vērti.





Šajā rakstā mēs apskatīsim divas galvenās metodes, kā samazināt HTML failus, kāpēc HTML faili ir jāsamazina un kā rīkoties.



Saspiešana pret samazināšanu

Kas attiecas uz HTML failu optimizāciju, tam ir divas galvenās metodes: saspiešana un minifikācija . Uz virsmas tie izklausās līdzīgi, bet patiesībā ir divas atšķirīgas metodes, tāpēc nejauciet tos.





Samazināšana

Jūs varat iedomāties minifikāciju kā nevajadzīgu rakstzīmju un rindiņu noņemšanu avota kodā. Padomājiet par atkāpi, komentāriem, tukšām rindām utt. Neviens no tiem nav obligāts HTML formātā - tie pastāv, lai atvieglotu faila lasīšanu. Šo detaļu apgriešana var samazināt faila lielumu, neko neietekmējot.

HTML lapas paraugs:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Oriģinālais izmērs: 354. Minimālais izmērs: 272. Ietaupījumi: 82 (23,16%).

Daudzi tīmekļa izstrādātāji un vietņu īpašnieki minifikāciju rezervē tikai JS un CSS failiem, taču šī novecojušā prakse ir kļūda. Svarīga ir arī HTML minifikācija.



Vēl 2000. gados minifikācijas rīki bija reti. Jums bija manuāli jāsamazina faili ikreiz, kad kaut kas mainījās. Tā kā HTML faili tiek mainīti biežāk nekā JS un CSS faili, toreiz to vienkārši bija pārāk garlaicīgi samazināt. Mūsdienās tas ir strīdīgs jautājums.

Saspiešana

Kad lietotāji apmeklē jūsu vietni, viņi to dara, izmantojot HTTP protokolu. Pārlūkprogramma nosūta jūsu tīmekļa serverim pieprasījumu pēc konkrētas lapas, jūsu tīmekļa serveris atrod lapu un pēc tam nosūta šīs lapas saturu atpakaļ apmeklētāja pārlūkprogrammai.



Bet, tā kā HTTP protokols atbalsta saspiešanu, jūsu tīmekļa serveris var saspiest lapu pirms tās nosūtīšanas apmeklētājam (pieņemot, ka jūsu servera iestatījumos ir iespējota saspiešana), un pēc tam apmeklētāja pārlūkprogramma var atspiest lapu atpakaļ sākotnējā stāvoklī.

Visizplatītākā saspiešanas shēma ir GZIP , kas ir faila formāts, kas izmanto bezzudumu saspiešanas algoritms sauc par DEFLATE.

Algoritms meklē teksta atkārtotus gadījumus HTML failā, pēc tam aizstāj šos atkārtojumus ar atsaucēm uz iepriekšējo notikumu. Katra atsauce ir vienkārši divi skaitļi: cik tālu ir atsauce un uz cik rakstzīmēm mēs atsaucamies.

Apsveriet šādu teksta virkni (piemērs ņemts no GZIP vietnes):

Blah blah blah blah blah.

Algoritms atpazīst šādu atkārtojumu:

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

Pirmā parādība ir mūsu atsauce, tāpēc atstājiet to:

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

Otrais gadījums attiecas uz pirmo gadījumu, kas ir piecas rakstzīmes aiz un piecas rakstzīmes garš:

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

Bet šajā gadījumā algoritms atzīst, ka nākamā parādība ir tāda pati rakstzīmju secība, tāpēc tas pagarina atsauces garumu vēl par pieciem:

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

Un atkal:

Blah b[5,15]lah.

Un algoritms ir pietiekami gudrs, lai saprastu, ka nākamās trīs rakstzīmes ir pirmās trīs rakstzīmes atsaucē, tāpēc tas tiek pagarināts par trim:

Blah b[5,18].

Tagad padomājiet par tipisku HTML failu un to, cik daudz atkārtojumu pastāv tajā. Gandrīz katrs tags, piemēram

, ir atbilstošs noslēguma tags, piemēram,

. Turklāt daudzi tagi tiek atkārtoti visā, piemēram,

,

,

,

  • utt. Atribūti tiek bieži atkārtoti, ieskaitot

    class

    ,

    href

    , un

    src

    . Ir viegli saprast, kāpēc GZIP saspiešana ir tik efektīva, izmantojot HTML.

    Vienīgais trūkums ir tas, ka tīmekļa serverim ir nepieciešams nedaudz vairāk CPU, lai veiktu saspiešanu katru reizi, kad tiek pieprasīta lapa. Bet, tā kā mūsdienās centrālais procesors nerada lielas bažas, gandrīz vienmēr ir labāk iespējot GZIP, nekā bez tā, pat ja jums ir sākuma līmeņa tīmekļa mitināšana.

    Kāpēc jums vajadzētu saspiest un samazināt

    Ir divi galvenie ieguvumi, kas abi ir izšķiroši mūsdienu mobilajām ierīcēm piesātinātajā tīmekļa vidē.

    Ātrāka lapas ielāde

    Vidēji HTML minifikators ar pamata iestatījumiem var samazināt faila lielumu par aptuveni 3 procentiem. Izmantojot papildu papildu iestatījumus, HTML failu var samazināt vēl par 3 līdz 7 procentiem, tādējādi samazinot līdz pat 10 procentiem. Tas tieši nozīmē ātrāku lapas ielādes laiku.

    Izmantots mazāks joslas platums

    Pieņemsim, ka jums ir 10 faili, no kuriem katrs ir samazināts no 50 KB līdz 45 KB, lai kopumā saruktu par 50 KB. Pieņemsim, ka jūsu vietne katru dienu apkalpo vidēji 1000 apmeklētāju, kur katrs apmeklējums vidēji ir desmit lapas. Tikai HTML minifikācija samazina joslas platuma izmantošanu par 50 MB dienā (1,5 GB mēnesī).

    Saspiešana + samazināšana

    Kā redzat, HTML minifikācija ir noderīga pati par sevi, it īpaši, ja jūsu vietne kļūst lielāka, faili kļūst lielāki un palielinās datplūsma. Pieraksti to Google PageSpeed ​​vadlīnijas iesakām samazināt HTML, tādēļ, ja esat skeptisks, ļaujiet tam pārliecināt jūs par pretējo.

    komandu uzvedņu saraksts operētājsistēmai Windows 10

    Bet HTML optimizācijā lieliski ir tas, ka jums nav jāizvēlas minifikācija vai saspiešana. Jūs varat darīt abus! Patiesībā jūs vajadzētu dari abus.

    Vidēji jūs varat sagaidīt, ka GZIP saspiešana samazinās HTML failu par 70 līdz 90 procentiem. Izmantojot iepriekš minēto piemēru ar konservatīvu saspiešanas aprēķinu, samazināto HTML failu apjoms būtu no 45 KB līdz 13,5 KB, un kopējais sarukums būtu 365 KB. Salīdzinot ar nemainītu/nesaspiestu, jūsu vietnes joslas platums tagad ir samazināts par 365 MB dienā (11 GB mēnesī).

    Papildus joslas platuma ietaupījumiem katra lapa tiek ielādēta ievērojami ātrāk, jo galalietotāja pārlūkprogrammai ir jālejupielādē tikai 13,5 KB salīdzinājumā ar 50 KB vienā lapā.

    Kā saspiest un samazināt HTML

    Par laimi, mūsdienās ne viens, ne otrs nav ļoti grūts, un to uzstādīšanai nav vajadzīgas lielas tehniskās zināšanas.

    WordPress spraudņi

    Ja izmantojat WordPress vietni, viss, kas jums jādara, ir instalēt vienu spraudni, un jūs varat izmantot gan saspiešanas, gan samazināšanas priekšrocības.

    Lielākā daļa kešatmiņas spraudņu dara vairāk nekā vienkārši kešatmiņas lapas. Piemēram, WP ātrākā kešatmiņa un W3 kopējā kešatmiņa abiem ir viena klikšķa iestatījumi, kas ļauj ieslēgt HTML minifikāciju un GZIP saspiešanu, kā arī citas funkcijas, kas vēl vairāk paātrina lapu ielādi un samazina joslas platuma izmantošanu.

    Ja jūs tikai vēlaties samazināt, mēs iesakām Samaziniet HTML iespraust. Tas ir vienkārši, atbalsta HTML/CSS/JS un ļauj nedaudz pielāgot minifikācijas metodi (piemēram, vai noņemt

    http:

    un

    https:

    no URL).

    Statiski HTML minifikatori

    Ja jūsu HTML faili ir statiski (ti, tos dinamiski neveido CMS vai tīmekļa ietvars), varat saglabāt divas HTML failu kopas: “avota” kopu, kas ir nenozīmīga ērtai rediģēšanai, un “samazinātu” kopu, kuru izveidojat ikreiz, kad veicat izmaiņas avota failā.

    Lai samazinātu, izmantojiet vienu no šiem rīkiem:

    Šī ir dzīvotspējīga tehnika, ja esat atkāpies no CMS, piemēram, WordPress, un tagad izmantojat statiskus vietņu ģeneratorus.

    Iespējot GZIP saspiešanu

    GZIP saspiešanas iespējošanas darbības var atšķirties atkarībā no izmantotās tīmekļa servera programmatūras. Tā kā Apache ir vispopulārākā iespēja, mēs apskatīsim, kā to iespējot, izmantojot .htaccess.

    Izveidojiet savienojumu ar savu tīmekļa serveri, izmantojot FTP, un pēc tam izveidojiet failu ar nosaukumu

    .htaccess

    saknes direktorijā. Rediģējiet .htaccess failu, lai būtu šādi iestatījumi:


    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

    Vai neesat pārliecināts, vai jūsu vietnē darbojas saspiešana? Pārbaudiet to ar šo rīku .

    Lai panāktu maksimālu efektivitāti, jums arī vajadzētu uzziniet, kā pārbaudīt, tīrīt un optimizēt savu CSS .

    Kopīgot Kopīgot Čivināt E -pasts Vai jums nekavējoties jājaunina uz Windows 11?

    Drīzumā parādīsies operētājsistēma Windows 11, bet vai jums vajadzētu to atjaunināt pēc iespējas ātrāk vai pagaidīt dažas nedēļas? Noskaidrosim.

    Lasīt Tālāk     Saistītās tēmas
    • Programmēšana
    • HTML
    • Web izstrāde
    Par autoru Džoels Lī(Publicēti 1524 raksti)

    Džoels Lī ir MakeUseOf galvenais redaktors kopš 2018. gada. Viņam ir B.S. datorzinātnēs un vairāk nekā deviņu gadu profesionāla rakstīšanas un rediģēšanas pieredze.

    Vairāk no Džoela Lī

    Abonējiet mūsu biļetenu

    Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

    Noklikšķiniet šeit, lai abonētu