Paano Gumagana ang Na-compress na HTML at Bakit mo Kakailanganin Ito

Paano Gumagana ang Na-compress na HTML at Bakit mo Kakailanganin Ito

Kung nagpapatakbo ng isang website, dapat alam mo na kung paano gumamit ng tamang mga format ng imahe at i-optimize ang iyong mga imahe para sa web. Gayunpaman habang ang compression ng imahe ay isang kilalang kasanayan, ang HTML compression ay may gawi na napapansin, na kahiya-hiya dahil sulit ang mga benepisyo.





Sa artikulong ito, susuriin natin ang dalawang pangunahing pamamaraan para sa pag-urong ng mga HTML file, kung bakit dapat paliitin ang mga HTML file, at kung paano ito gagawin.



Pag-compress kumpara sa Pagliit

Hanggang sa pag-optimize ng mga HTML file, mayroong dalawang pangunahing pamamaraan para dito: pag-compress at pagliit . Pareho ang tunog ng mga ito sa ibabaw, ngunit talagang dalawang magkakaibang mga diskarte, kaya huwag malito sila.





Pagpapaliit

Maaari mong isipin ang pag-minimize bilang pagtanggal ng mga hindi kinakailangang mga character at linya sa source code. Mag-isip ng indentation, mga puna, walang laman na linya, atbp. Wala sa mga ito ang kinakailangan sa HTML - mayroon sila upang gawing mas madaling mabasa ang file. Ang pagpuputol ng mga detalyeng ito ay maaaring mag-ahit ng laki ng file nang hindi nakakaapekto sa anuman.

Halimbawang pahina ng HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Orihinal na laki: 354. Pinaliit na laki: 272. Pagtitipid: 82 (23.16%).

Maraming mga tagabuo ng web at may-ari ng site ang nagreserba ng pagliit para sa JS at CSS file lamang, ngunit ang hindi napapanahong kasanayan na ito ay isang pagkakamali. Mahalaga rin ang pagliit ng HTML.



Bumalik noong 2000s, ang mga tool sa pag-minimize ay bihirang. Kailangan mong manu-manong i-minify ang mga file sa tuwing may nagbago. Dahil ang mga file ng HTML ay mas madalas na nagbabago kaysa sa mga file ng JS at CSS, napakapagod lamang upang mabawasan ang bawat oras noon. Ngayon, ito ay isang punto ng moot.

Pag-compress

Kapag binisita ng mga gumagamit ang iyong website, ginagawa nila ito gamit ang HTTP protocol. Nagpapadala ang browser ng isang kahilingan sa iyong web server para sa isang tukoy na pahina, hahanapin ng iyong web server ang pahina, pagkatapos ay ipapadala ang mga nilalaman ng pahinang iyon pabalik sa browser ng bisita.



Ngunit dahil sinusuportahan ng HTTP protocol ang compression, maaaring i-compress ng iyong web server ang pahina bago ipadala ito sa bisita (sa pag-aakalang ang compression ay pinagana sa mga setting ng iyong server), at pagkatapos ay maaaring mai-decompress ng browser ng bisita ang pahina pabalik sa orihinal nitong estado.

Ang pinakakaraniwang scheme ng compression ay GZIP , na isang format ng file na gumagamit ng a lossless algorithm ng compression tinawag na DEFLATE.

Ang algorithm ay naghahanap ng paulit-ulit na mga paglitaw ng teksto sa HTML file, pagkatapos ay pinapalitan ang mga paulit-ulit na pangyayari sa mga sanggunian sa isang nakaraang paglitaw. Ang bawat sanggunian ay dalawang numero lamang: kung gaano kalayo ang sanggunian at kung gaano karaming mga character ang tinutukoy namin.

Isaalang-alang ang isang string ng teksto tulad nito (halimbawang kinuha mula sa website ng GZIP):

Blah blah blah blah blah.

Kinikilala ng algorithm ang sumusunod na pag-uulit:

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

Ang unang paglitaw ay ang aming sanggunian, kaya't iwanan ito:

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

Ang pangalawang paglitaw ay tumutukoy sa unang paglitaw, na kung saan ay limang character sa likod at limang character ang haba:

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

Ngunit sa kasong ito, kinikilala ng algorithm na ang susunod na paglitaw ay ang parehong pagkakasunud-sunod ng mga character, kaya pinahahaba nito ang haba ng sanggunian ng isa pang lima:

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

At muli:

Blah b[5,15]lah.

At ang algorithm ay sapat na matalino upang mapagtanto na ang susunod na tatlong mga character ay ang unang tatlong mga character sa sanggunian, kaya umaabot ito ng tatlo:

Blah b[5,18].

Ngayon isipin ang tungkol sa isang tipikal na HTML file at kung magkano ang pag-uulit na mayroon sa loob. Halos bawat tag, tulad ng

, ay may kaukulang tag na pagsasara, tulad ng

. Bukod dito, maraming mga tag ang inuulit sa buong, tulad ng

,

,

,

  • , atbp. Ang mga katangian ay paulit-ulit din na madalas, kasama na

    class

    ,

    href

    , at

    src

    . Madaling makita kung bakit napakahusay ng compression ng GZIP sa HTML.

    Ang tanging downside ay kailangan ng web server ng kaunti pang CPU upang maisagawa ang compression sa tuwing hinihiling ang isang pahina. Ngunit dahil ang CPU ay hindi isang pag-aalala ngayon, halos palaging mas mahusay na paganahin ang GZIP kaysa sa pumunta nang wala, kahit na mayroon kang entry-level web hosting.

    Bakit Dapat Mong I-compress at Minify

    Mayroong dalawang pangunahing mga benepisyo, na kapwa mahalaga sa mobile-mabigat na tanawin sa web ngayon.

    Mas Mabilis na Mga Pag-load ng Pahina

    Sa average, ang isang HTML minifier ay maaaring mabawasan ang laki ng isang file ng halos 3 porsyento sa mga pangunahing setting. Sa mga opsyonal na advanced na setting, ang isang HTML file ay maaaring mabawasan ng isa pang 3 hanggang 7 porsyento, para sa isang potensyal na pagbawas ng hanggang sa 10 porsyento. Direktang isinasalin ito sa mas mabilis na mga oras ng pag-load ng pahina.

    Mas Ginamit ang Bandwidth

    Sabihin nating mayroon kang 10 mga file, bawat isa ay minified mula 50 KB hanggang 45 KB para sa isang kabuuang pag-urong ng 50 KB. At sabihin natin na ang iyong website ay naghahatid ng isang average ng 1,000 mga bisita araw-araw, kung saan ang bawat pagbisita ay nag-average ng sampung pahina. Ang pag-minimize ng HTML lamang ay binabawasan ang iyong paggamit ng bandwidth ng 50 MB bawat araw (1.5 GB bawat buwan).

    Pag-compress + Minification

    Tulad ng nakikita mo, ang pagliit ng HTML ay kapaki-pakinabang sa sarili nitong, lalo na habang lumalaki ang iyong site, lumalaki ang mga file, at tumataas ang trapiko. Tandaan na Mga alituntunin ng PageSpeed ​​ng Google inirerekumenda ang pag-minimize ng HTML, kaya kung may pag-aalinlangan, hayaan mong kumbinsihin ka kung hindi man.

    alamin kung ano ang isang tinanggal na video sa youtube

    Ngunit kung ano ang mahusay tungkol sa pag-optimize ng HTML ay hindi mo kailangang pumili ng alinman sa pag-minimize o compression. Maaari mong gawin ang pareho! Sa katunayan, ikaw dapat gawin ang pareho.

    Sa average, maaari mong asahan ang compression ng GZIP na magpapaliit ng isang HTML file ng 70 hanggang 90 porsyento. Gamit ang halimbawa sa itaas na may isang konserbatibong pagtatantya sa compression, ang pinaliit na mga file ng HTML ay pupunta mula 45 KB hanggang 13.5 KB bawat isa, para sa isang kabuuang pag-urong ng 365 KB. Kung ihahambing sa hindi nabago / hindi na-compress, ang bandwidth ng iyong site ay nabawasan ngayon ng 365 MB bawat araw (11 GB bawat buwan).

    At sa tuktok ng pagtipid ng bandwidth, ang bawat pahina ay mas mabilis na naglo-load dahil ang browser ng end user ay kailangang mag-download lamang ng 13.5 KB kumpara sa 50 KB bawat pahina.

    Paano Mag-compress at Minify HTML

    Sa kasamaang palad, ni napakahirap sa mga araw na ito, at hindi mo kailangan ng maraming kaalamang panteknikal kung paano i-set up ang mga ito.

    Mga Plugin ng WordPress

    Kung nagpapatakbo ka ng isang WordPress site, ang kailangan mo lang gawin ay mag-install ng isang plugin at maaari mong makuha ang mga pakinabang ng parehong compression at minification.

    Karamihan sa mga plugin ng pag-cache ay gumagawa ng higit pa sa mga pahina ng pag-cache. Halimbawa, WP Pinakamabilis na Cache at W3 Kabuuang Cache Parehong may mga setting ng isang pag-click na nagbibigay-daan sa iyo upang i-on ang HTML minification at GZIP compression, bukod sa iba pang mga tampok na lalong nagpapabilis sa paglo-load ng pahina at binawasan ang paggamit ng bandwidth.

    kung ikaw lamang gusto ng minification, inirerekumenda namin ang I-minify ang HTML isaksak. Ito ay simple, sinusuportahan ang HTML / CSS / JS, at pinapayagan kang mag-tweak nang kaunti ang paraan ng pag-minimize (hal. Kung tatanggalin

    http:

    at

    https:

    mula sa mga URL).

    Static HTML Minifiers

    Kung ang iyong mga HTML file ay static, (ibig sabihin ay hindi pabuong nabuo ng isang CMS o balangkas ng web), pagkatapos ay mapapanatili mo ang dalawang hanay ng mga HTML file: isang hanay na 'mapagkukunan', na hindi binago para sa madaling pag-edit, at isang 'minified' na hanay, na iyong nilikha anumang oras na gumawa ka ng pagbabago sa isang mapagkukunang file.

    Upang mag-minify, gumamit ng isa sa mga tool na ito:

    Ito ay isang praktikal na pamamaraan kung lumipat ka mula sa CMSes tulad ng WordPress at ngayon ay gumagamit ng mga static na generator ng site.

    Paganahin ang GZIP Compression

    Ang mga hakbang upang paganahin ang GZIP compression ay maaaring magkakaiba depende sa aling web server software ang iyong ginagamit. Dahil ang Apache ang pinakatanyag na pagpipilian, sasakupin namin kung paano ito paganahin gamit ang .htaccess.

    Kumonekta sa iyong web server gamit ang FTP, pagkatapos ay lumikha ng isang file na tinawag

    .htaccess

    sa direktoryo ng ugat. I-edit ang .htaccess file upang magkaroon ng mga sumusunod na setting:


    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

    Hindi sigurado kung gumagana ang compression sa iyong website? Subukan ito sa tool na ito .

    Para sa panghuli kahusayan, dapat mo rin alamin ang tungkol sa kung paano suriin, linisin, at i-optimize ang iyong CSS .

    Magbahagi Magbahagi Mag-tweet Email Dapat Ka Bang Mag-upgrade sa Windows 11 Kaagad?

    Malapit na ang Windows 11, ngunit dapat mo bang i-update sa lalong madaling panahon o maghintay ng ilang linggo? Alamin Natin.

    Basahin Susunod     Mga Kaugnay na Paksa
    • Programming
    • HTML
    • Pag-unlad sa Web
    Tungkol sa May-akda Si Joel lee(1524 Mga Artikulo Na-publish)

    Si Joel Lee ay ang Editor in Chief ng MakeUseOf mula pa noong 2018. Mayroon siyang B.S. sa Computer Science at higit sa siyam na taong propesyonal na karanasan sa pagsusulat at pag-edit.

    Higit pa Mula kay Joel Lee

    Mag-subscribe sa aming newsletter

    Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

    Mag-click dito upang mag-subscribe