Skelbimas

Jei turite svetainę, jau turėtumėte žinoti, kaip tai padaryti naudokite tinkamus vaizdo formatus ir optimizuokite savo vaizdus internete 10 nemokamų internetinių paketinių vaizdų įrankių, kad galėtumėte pakeisti dydį, konvertuoti ir optimizuotiJei turite daug apdorojamų nuotraukų ir labai mažai laiko, jums reikia paketinio redagavimo įrankių. Mes supažindiname jus su geriausiais internetinių parduotuvių keitikliais, optimizatoriais ar keitikliais. Skaityti daugiau . Nepaisant to, kad vaizdų glaudinimas yra plačiai žinoma praktika, HTML suspaudimo tendencija yra nepastebima, o tai yra gėda, nes privalumai yra verti.

Šiame straipsnyje apžvelgsime du pagrindinius HTML failų susitraukimo būdus, kodėl HTML failai turėtų būti sutraukiami ir kaip tai padaryti.

Suspaudimas vs. Minifikacija

Kalbant apie HTML failų optimizavimą, yra du pagrindiniai metodai: suspaudimas ir minifikacija. Ant paviršiaus jie skamba panašiai, tačiau iš tikrųjų yra du skirtingi metodai, todėl nereikia jų supainioti.

Minifikacija

Galite galvoti apie mažinimą kaip nereikalingų simbolių ir eilučių šalinimą šaltinio kode. Pagalvokite apie įtraukas, komentarus, tuščias eilutes ir pan. Nė vienas iš jų nėra būtinas HTML - jie yra, kad failą būtų lengviau perskaityti. Šių detalių apkarpymas gali sumažinti failo dydį, nieko nepadarydamas.

HTML puslapio pavyzdys:

Tai antraštė
Siųsti man paštą [email protected].
Tai nauja pastraipa!
Tai nauja pastraipa paryškintu kursyvu.

Minimalus HTML puslapio pavyzdys:

Tai antraštė
Siųsti man paštą [email protected].
Tai nauja pastraipa!
Tai nauja pastraipa paryškintu kursyvu.

Originalus dydis: 354. Minimalus dydis: 272. Taupymas: 82 (23,16%).

Daugelis interneto svetainių kūrėjų ir svetainių savininkų pasilieka minifikaciją tik JS ir CSS failams, tačiau ši pasenusi praktika yra klaida. Taip pat svarbu HTML sumažinimas.

Dar 2000-aisiais minimizacijos įrankiai buvo reti. Kiekvieną kartą, kai kas nors pasikeitė, reikėjo rankiniu būdu sutrumpinti failus. Kadangi HTML failai keičiasi dažniau nei JS ir CSS failai, tada buvo kas per daug nuobodūs kaskart minifikuoti. Šiais laikais tai yra esminis dalykas.

Suspaudimas

Kai vartotojai lankosi jūsų svetainėje, jie tai daro naudodamiesi HTTP protokolu. Naršyklė siunčia užklausą jūsų interneto serveriui dėl konkretaus puslapio, jūsų žiniatinklio serveris suranda puslapį, tada siunčia to puslapio turinį atgal į lankytojo naršyklę.

Kadangi HTTP protokolas palaiko glaudinimą, jūsų žiniatinklio serveris gali suspausti puslapį prieš siųsdamas jį lankytojui (darant prielaidą, kad glaudinimas įgalintas jūsų serverio nustatymuose), tada lankytojo naršyklė gali suspausti puslapį į pradinę būseną.

Dažniausia suspaudimo schema GZIP, kuris yra failo formatas, kuriame naudojamas a be nuostolių suspaudimo algoritmas Kaip veikia failų glaudinimas?Kaip veikia failų glaudinimas? Išmokite failų glaudinimo pagrindus ir skirtumą tarp nuostolingo ir be nuostolio glaudinimo. Skaityti daugiau vadinamas DEFLATE.

Algoritmas ieško pakartojamų teksto įvykių HTML faile, tada pakeičia tuos pakartotinius įvykius nuorodomis į ankstesnį atvejį. Kiekviena nuoroda yra tik du skaičiai: kiek atgal nuoroda yra ir kiek ženklų mes nurodome.

Apsvarstykite tokią teksto eilutę (pavyzdys paimtas iš GZIP svetainės):

Blah blah blah blah blah.

Algoritmas atpažįsta šį pakartojimą:

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

Pirmasis įvykis yra mūsų nuoroda, todėl palikite tai būti:

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

Antrasis įvykis susijęs su pirmuoju įvykiu, kuris yra penki ženklai už nugaros ir penki simboliai ilgio:

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

Bet šiuo atveju algoritmas atpažįsta, kad kitas įvykis yra ta pati simbolių seka, todėl jis pratęsia atskaitos ilgį dar penkiais:

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

Ir vėl:

Blah b [5,15] lah.

Ir algoritmas yra pakankamai protingas, kad suprastų, kad kiti trys simboliai yra pirmieji trys simboliai nuorodoje, todėl jis tęsiasi trimis:

Blahas b [5,18].

Dabar pagalvokite apie tipišką HTML failą ir tai, kiek pasikartojimų jame yra. Beveik kiekviena etiketė, tokia kaip, turi atitinkamą uždarymo žymą, pvz. Be to, daug etikečių kartojamos visoje, pvz.,, , , ir kt. Atributai taip pat kartojami dažnai, įskaitant klasė, hrefir src. Nesunku suprasti, kodėl GZIP glaudinimas yra toks efektyvus naudojant HTML.

Vienintelis neigiamas aspektas yra tas, kad žiniatinklio serveriui reikia šiek tiek daugiau centrinio procesoriaus, kad būtų galima suspausti kiekvieną kartą, kai prašoma puslapio. Bet kadangi procesorius šiais laikais nekelia daug rūpesčių, beveik visada geriau įjungti GZIP, nei išeiti be jo, net jei turite pradinio lygio žiniatinklio prieglobą Geriausios žiniatinklio prieglobos paslaugos: Bendros, VPS ir DedikuotosIeškote geriausios interneto prieglobos paslaugų jūsų poreikiams? Čia yra geriausios jūsų tinklaraščio ar svetainės rekomendacijos. Skaityti daugiau .

Kodėl jūs turėtumėte suspausti ir sumažinti

Yra du pagrindiniai pranašumai, kurie abu yra esminiai šiuolaikiniame mobiliesiems tinklalapiuose.

Greitesnis puslapio įkėlimas

Vidutiniškai HTML mažintuvas, naudodamas pagrindinius parametrus, gali sumažinti failo dydį maždaug 3 procentais. Naudojant pasirinktinius išplėstinius parametrus, HTML failą galima sumažinti dar 3–7 procentais, norint sumažinti iki 10 procentų. Tai tiesiogiai reiškia greitesnį puslapio įkėlimo laiką.

Mažiau pralaidumo

Tarkime, kad turite 10 failų, kurių kiekvienas sumažinamas nuo 50 KB iki 45 KB, kad bendras susitraukimas būtų 50 KB. Tarkime, jūsų svetainė kasdien aptarnauja vidutiniškai 1 000 lankytojų, kurių kiekvienas apsilankymas vidutiniškai siekia dešimt puslapių. Vien tik HTML sumažinimas sumažina pralaidumo naudojimą 50 MB per dieną (1,5 GB per mėnesį).

Suspaudimas + sumažinimas

Kaip matote, HTML sumažinimas yra naudingas savaime, ypač kai jūsų svetainė auga, failai didėja, o srautas didėja. Prisimink tai „Google“ „PageSpeed“ gairės rekomenduokite sutrumpinti HTML, taigi, jei esate skeptiškas, leiskite tai įtikinti kitaip.

Tačiau HTML optimizavimas yra puikus, kad jums nereikia pasirinkti nei mažinimo, nei glaudinimo. Galite padaryti abu! Tiesą sakant, tu turėtų daryk abu.

Vidutiniškai galite tikėtis, kad GZIP suspaudimas sumažins HTML failą nuo 70 iki 90 procentų. Naudojant aukščiau pateiktą pavyzdį su konservatyviu suspaudimo įvertinimu, minifikuotų HTML failų dydis būtų nuo 45 KB iki 13,5 KB, o bendras susitraukimas būtų 365 KB. Palyginti su neminimaliu / nesuspaustu, jūsų svetainės pralaidumas dabar sumažėja 365 MB per dieną (11 GB per mėnesį).

Be to, taupant pralaidumą, kiekvienas puslapis įkeliamas nepaprastai greitai, nes galutinio vartotojo naršyklėje reikia atsisiųsti tik 13,5 KB, palyginti su 50 KB kiekviename puslapyje.

Kaip suspausti ir sutrumpinti HTML

Laimei, šiais laikais nė vienas iš jų nėra labai sunkus, ir jums nereikia daug techninių žinių, kad juos nustatytumėte.

„WordPress“ papildiniai

Jei vykdote „WordPress“ svetainę, viskas, ką jums reikia padaryti, yra įdiegti vieną papildinį ir jūs galite pasinaudoti tiek glaudinimo, tiek mažinimo pranašumais.

Daugelis talpyklos papildinių daro ne tik talpyklos puslapius. Pavyzdžiui, WP greičiausias talpykla ir W3 bendra talpykla abu turi vieno paspaudimo nustatymus, kurie leidžia įjungti HTML mažinimą ir GZIP glaudinimą, be kitų funkcijų, kurios dar labiau paspartina puslapio įkėlimą ir sumažina pralaidumo naudojimą.

Jei tu tik norite minifikavimo, mes rekomenduojame Sumažinkite HTML Prijunkite. Tai paprasta, palaiko HTML / CSS / JS ir leidžia šiek tiek pakoreguoti minifikavimo metodą (pvz., Ar pašalinti http: ir https: iš URL).

Statiniai HTML keitikliai

Jei jūsų HTML failai yra statiniai (t. Y. Nėra dinamiškai sugeneruoti CMS ar žiniatinklio sistemos), galite palaikyti du HTML failų rinkinius: „šaltinio“ rinkinį, kuris yra nepataisytas, kad būtų galima lengvai redaguoti, ir „sutrumpintą“ rinkinį, kurį sukuriate bet kada pakeisdami šaltinio failą.

Norėdami sumalinti, naudokite vieną iš šių įrankių:

• HTMLCompresorius
• HTML minifikatorius
• HTML minifikatorius (skiriasi nuo aukščiau pateikto)

Tai yra perspektyvi technika, jei nutolote nuo CMS, tokių kaip „WordPress“, ir dabar naudojate statiniai svetainių generatoriai 7 priežastys, kodėl reikia nukreipti jūsų CMS ir apsvarstyti galimybę statiniam svetainės generatoriui sukurtiIlgus metus daugeliui vartotojų buvo sunku paskelbti svetainę. CMS, tokios kaip „WordPress“, tai pakeitė, tačiau jos vis tiek gali kelti painiavą. Kita alternatyva yra statinis svetainės generatorius. Skaityti daugiau .

Įgalinti GZIP glaudinimą

GZIP glaudinimo įgalinimo veiksmai gali skirtis atsižvelgiant į tai, kokią žiniatinklio serverio programinę įrangą naudojate. Kadangi „Apache“ yra populiariausias pasirinkimas, aptarsime, kaip jį įgalinti naudojant .htaccess.

Prisijunkite prie savo interneto serverio naudodami FTP, tada sukurkite failą, vadinamą .htaccess šakniniame kataloge. Redaguokite .htaccess failą, kad būtų šie parametrai:

 mod_gzip_on Taip mod_gzip_dechunk Taip mod_gzip_item_include failas. (html? | txt | css | js | php | pl) $ mod_gzip_item_include tvarkyklė ^ cgi-script $ mod_gzip_item_include mime ^ tekstas /.* mod_gzip_item_include mime ^ aplikacija / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Turinio kodavimas:. * Gzip. *
 „SetOutputFilter“ DEFLATE. 

Nesate tikri, ar jūsų svetainėje veikia glaudinimas? Išbandykite tai naudodamiesi šiuo įrankiu.

Siekdami maksimalaus efektyvumo, taip pat turėtumėte Sužinokite apie tai, kaip patikrinti, valyti ir optimizuoti CSS 11 naudingų įrankių CSS failams tikrinti, valyti ir optimizuotiNorite patobulinti savo CSS kodą? Šie CSS tikrinimo ir optimizavimo įrankiai padės patobulinti CSS kodą, sintaksę ir sutrumpinti jūsų tinklalapius. Skaityti daugiau .