Reklāma

Ja jums ir vietne, jums jau vajadzētu zināt, kā to darīt izmantojiet pareizos attēlu formātus un optimizējiet savus attēlus tīmeklim 10 bezmaksas tiešsaistes sērijveida attēlu rīki, lai mainītu izmēru, pārveidotu un optimizētuJums ir nepieciešami partijas rediģēšanas rīki, ja jums ir daudz apstrādājamo fotoattēlu un ļoti maz laika. Iepazīstinām jūs ar labākajiem sērijas mainītājiem, optimizētājiem vai pārveidotājiem, kas pieejami tiešsaistē. Lasīt vairāk . Kaut arī attēlu saspiešana ir plaši pazīstama prakse, HTML saspiešana parasti tiek ignorēta, kas ir kauns, jo priekšrocības ir vērtīgas.

Šajā rakstā mēs apskatīsim divas galvenās metodes HTML failu saraušanai, kāpēc HTML faili ir jāsarauj un kā rīkoties.

Saspiešana pret Minifikācija

Ciktāl tas optimizē HTML failus, tam ir divas galvenās metodes: saspiešana un minifikācija. Uz virsmas tie izklausās līdzīgi, taču faktiski ir divi atšķirīgi paņēmieni, tāpēc nejauciet tos.

Minifikācija

Par minifikāciju var domāt kā par nevajadzīgu rakstzīmju un līniju noņemšanu avota kodā. Padomājiet par ievilkumiem, komentāriem, tukšām rindām utt. Neviens no šiem dokumentiem nav nepieciešams HTML formātā - tie pastāv, lai failu būtu vieglāk lasīt. Šīs detaļas apgriešana var samazināt faila lielumu, neko neietekmējot.

HTML lapas paraugs:

Šī ir galvene
Sūtiet man pastu plkst [email protected].
Šī ir jauna rindkopa!
Šī ir jauna rindkopa treknrakstā un slīprakstā.

Minificētas HTML lapas paraugs:

Šī ir galvene
Sūtiet man pastu plkst [email protected].
Šī ir jauna rindkopa!
Šī ir jauna rindkopa treknrakstā un slīprakstā.

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

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

2000. gados minifikācijas rīki bija reti. Jums bija manuāli jāsamazina faili katru reizi, kad kaut kas mainās. Tā kā HTML faili mainās biežāk nekā JS un CSS faili, toreiz katru reizi minificēt bija vienkārši pārāk apnicīgi. Mūsdienās tas ir strīdīgs punkts.

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 noteiktas lapas, jūsu tīmekļa serveris atrod lapu, pēc tam nosūta šīs lapas saturu atpakaļ apmeklētāja pārlūkprogrammā.

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

Visizplatītākā saspiešanas shēma ir GZIP, kas ir faila formāts, kas izmanto a bezzaudējumu saspiešanas algoritms Kā darbojas failu saspiešana?Kā darbojas failu saspiešana? Uzziniet failu saspiešanas pamatus un atšķirību starp zaudējumiem salīdzinājumā ar bezspēcīgu saspiešanu. Lasīt vairāk sauc DEFLATE.

Algoritms meklē atkārtotus teksta gadījumus HTML failā, pēc tam aizstāj šos atkārtotos gadījumus ar atsaucēm uz iepriekšējo notikumu. Katra norāde ir vienkārši divi skaitļi: cik tālu atsauce atrodas un cik daudz zīmju mēs atsauces.

Apsveriet šāda 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.

Pirmais notikums ir mūsu atsauce, tāpēc atstājiet to:

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

Otrais notikums attiecas uz pirmo notikumu, kas ir piecas rakstzīmes aiz muguras un piecas rakstzīmes garas:

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

Bet šajā gadījumā algoritms atzīst, ka nākamais notikums ir tā 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 atsauces pirmās trīs rakstzīmes, tāpēc tas pagarinās par trim:

Blah b [5,18].

Tagad padomājiet par tipisku HTML failu un to, cik liels atkārtojums pastāv tajā. Gandrīz katrs tags, piemēram, ir atbilstošs noslēdzošais tags, piemēram. Turklāt visā pasaulē tiek atkārtoti daudzi tagi, piemēram,, , , utt. Atribūtus arī atkārtojas bieži, ieskaitot klase, href, un src. Ir viegli saprast, kāpēc GZIP saspiešana ir tik efektīva, izmantojot HTML.

Vienīgais mīnuss ir tas, ka tīmekļa serverim ir nepieciešams nedaudz vairāk centrālā procesora, lai katru reizi, kad tiek pieprasīta lapa, veiktu saspiešanu. Bet, tā kā mūsdienās CPU nerada lielas bažas, GZIP iespējot gandrīz vienmēr ir labāk, nekā bez tā, pat ja jums ir sākuma līmeņa tīmekļa mitināšana Labākie tīmekļa mitināšanas pakalpojumi: koplietots, VPS un īpašsVai meklējat vislabāko tīmekļa mitināšanas pakalpojumu jūsu vajadzībām? Šeit ir mūsu labākie ieteikumi jūsu emuāram vai vietnei. Lasīt vairāk .

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

Ir divas galvenās priekšrocības, kurām abām ir izšķiroša nozīme mūsdienu mobilajā tīmekļa vidē.

Ātrāka lapu ielāde

Vidēji HTML saīsinātājs ar pamata iestatījumiem var samazināt faila lielumu par aptuveni 3 procentiem. Izmantojot izvēles papildu iestatījumus, HTML failu var samazināt vēl par 3 līdz 7 procentiem, lai samazinātu līdz 10 procentiem. Tas tieši nozīmē ātrāku lapas ielādes laiku.

Mazāks joslas platums izmantots

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

Saspiešana + samazināšana

Kā redzat, HTML samazināšana ir noderīga pati par sevi, it īpaši tāpēc, ka jūsu vietne kļūst lielāka, faili kļūst lielāki un palielinās trafiks. Pieraksti to Google vadlīnijas PageSpeed ieteicams saīsināt HTML, tāpēc, ja esat skeptiski noskaņots, ļaujiet pārliecināt jūs citādi.

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

Vidēji var gaidī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, minificēto HTML failu kopējais lielums būtu no 45 KB līdz 13,5 KB, par kopējo saraušanos 365 KB. Salīdzinot ar neminē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 krasi krasi ātrāka, jo gala lietotāja pārlūkprogrammai ir jālejupielādē tikai 13,5 KB pret 50 KB vienā lapā.

Kā saspiest un samazināt HTML

Par laimi, mūsdienās abiem nav ļoti grūti, un, lai tos uzstādītu, nav nepieciešams daudz tehnisko zināšanu.

WordPress spraudņi

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

Lielākā daļa kešatmiņas spraudņu ir vairāk nekā tikai kešatmiņas lapu saglabāšana. 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 samazināšanu un GZIP saspiešanu, starp citām funkcijām, kas vēl vairāk paātrina lapu ielādi un samazina joslas platuma izmantošanu.

Ja jūs tikai vēlaties minifikāciju, mēs iesakām Samazināt HTML iespraust. Tas ir vienkārši, atbalsta HTML / CSS / JS un ļauj mazliet uzlabot minifikācijas metodi (piemēram, vai noņemt http: un https: no vietrāžiem URL).

Statiski HTML minifieri

Ja jūsu HTML faili ir statiski (t.i., tos nav dinamiski ģenerējis CMS vai tīmekļa ietvars), varat uzturēt divas HTML failu kopas: “avota” kopa, kas nav neminificēta, lai to ērti rediģētu, un “sašaurināta”, kas tiek izveidots katru reizi, kad veicat izmaiņas avota failā.

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

• HTMLCompresors
• HTML samazinātājs
• HTML samazinātājs (atšķiras no iepriekšminētā)

Šī ir dzīvotspējīga tehnika, ja esat attālinājies no CMSes, piemēram, WordPress, un tagad izmantojat statiskie vietņu ģeneratori 7 iemesli, kāpēc novirzīt CMS un apsvērt statisku vietņu ģeneratoruDaudzus gadus tīmekļa vietnes publicēšana bija sarežģīta. CMS, piemēram, WordPress, to mainīja, taču tie joprojām var mulsināt. Vēl viena alternatīva ir statiskais vietnes ģenerators. Lasīt vairāk .

Iespējot GZIP saspiešanu

GZIP saspiešanas iespējošanas darbības var atšķirties atkarībā no tā, kuru Web servera programmatūru izmantojat. Tā kā Apache ir vispopulārākā opcija, mēs apskatīsim, kā to iespējot, izmantojot .htaccess.

Pievienojieties savam tīmekļa serverim, izmantojot FTP, pēc tam izveidojiet failu ar nosaukumu .htaccess saknes direktorijā. Rediģējiet .htaccess failu, lai būtu šādi iestatījumi:

 mod_gzip_on Jā mod_gzip_dechunk Jā mod_gzip_item_include fails. (html? | txt | css | js | php | pl) $ mod_gzip_item_include apstrādātājs ^ cgi-script $ mod_gzip_item_include mime ^ teksts /.* mod_gzip_item_include mime ^ lietojumprogramma / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Satura kodējums:. * Gzip. *
 SetOutputFilter DEFLATE. 

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

Lai sasniegtu maksimālu efektivitāti, jums to vajadzētu darīt uzziniet, kā pārbaudīt, iztīrīt un optimizēt CSS 11 Noderīgi rīki CSS failu pārbaudei, tīrīšanai un optimizēšanaiVai vēlaties uzlabot savu CSS kodu? Šie CSS pārbaudītāji un optimizētāji palīdzēs uzlabot CSS kodu, sintakse un samazināt jūsu tīmekļa lapas. Lasīt vairāk .