Lærðu hvernig á að flýta fyrir vefsíðum með því að nota Nginx og Gzip einingu


Jafnvel á tímum þegar umtalsverður nethraði er fáanlegur um allan heim er öll viðleitni til að hámarka hleðslutíma vefsíðna velkomin með opnum örmum.

Í þessari grein munum við ræða aðferð til að auka flutningshraða með því að minnka skráarstærð með þjöppun. Þessi nálgun hefur auka ávinning að því leyti að hún dregur einnig úr bandbreidd sem notuð er í ferlinu og gerir það ódýrara fyrir eiganda vefsíðunnar sem borgar fyrir hana.

Til að ná markmiðinu sem fram kemur í málsgreininni hér að ofan munum við nota Nginx og innbyggða gzip einingu þess í þessari grein. Eins og opinberu skjölin segja til um er þessi eining sía sem þjappar saman svörum með því að nota hina vel þekktu gzip þjöppunaraðferð. Þetta tryggir að stærð sendra gagna verði þjappað um helming eða jafnvel meira.

Þegar þú nærð botni þessarar færslu muntu hafa enn eina ástæðu til að íhuga að nota Nginx til að þjóna vefsíðum þínum og forritum.

Að setja upp Nginx vefþjón

Nginx er fáanlegt fyrir allar helstu nútíma dreifingar. Þó að við munum nota CentOS 7 sýndarvél (IP 192.168.0.29) fyrir þessa grein.

Leiðbeiningarnar hér að neðan munu virka með litlum (ef einhverjum) breytingum í öðrum dreifingum líka. Gert er ráð fyrir að VM þinn sé ný uppsetning; annars verður þú að ganga úr skugga um að það séu engir aðrir vefþjónar (eins og Apache) í gangi á vélinni þinni.

Til að setja upp Nginx ásamt nauðsynlegum ósjálfstæðum, notaðu eftirfarandi skipun:

----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
# yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
# apt update && apt install nginx

Til að ganga úr skugga um að uppsetningunni hafi verið lokið og að Nginx geti þjónað skrám skaltu ræsa vefþjóninn:

# systemctl start nginx
# systemctl enable nginx

og opnaðu síðan vafra og farðu í http://192.168.0.29 (ekki gleyma að skipta út 192.168.0.29 fyrir IP tölu eða hýsingarheiti þjónsins þíns). Þú ættir að sjá velkomnasíðuna:

Við verðum að hafa í huga að sumar skráargerðir er hægt að þjappa betur en aðrar. Venjulegar textaskrár (eins og HTML, CSS og JavaScript skrár) þjappast mjög vel á meðan aðrar (.iso skrár, tarballs og myndir, svo eitthvað sé nefnt) gera það ekki, þar sem þær eru þegar þjappaðar í eðli sínu.

Þannig má búast við að samsetning Nginx og gzip muni gera okkur kleift að auka flutningshraða þess fyrrnefnda, á meðan hið síðarnefnda gæti sýnt litla sem enga framför.

Það er líka mikilvægt að hafa í huga að þegar gzip einingin er virkjuð eru HTML skrár ALLTAF þjappaðar, en aðrar skráargerðir sem venjulega er að finna á vefsíðum og forritum (þ.e. CSS og JavaScript) eru það ekki.

Að prófa Nginx vefsíðuhraða ÁN gzip einingarinnar

Til að byrja skulum við hlaða niður fullkomnu Bootstrap sniðmáti, frábærri samsetningu af HTML, CSS og JavaScript skrám.

Eftir að hafa hlaðið niður þjöppuðu skránni munum við pakka henni niður í rótarskrá netþjónsblokkarinnar okkar (mundu að þetta er Nginx jafngildi DocumentRoot tilskipunarinnar í Apache sýndarhýsingaryfirlýsingu):

# cd /var/www/html
# wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
# unzip -a gh-pages.zip
# mv startbootstrap-creative-gh-pages tecmint

Þú ættir að hafa eftirfarandi möppuskipulag inni í /var/www/html/tecmint:

# ls -l /var/www/html/tecmint

Farðu nú á http://192.168.0.29/tecmint og vertu viss um að síðan hleðst rétt. Flestir nútíma vafrar innihalda sett af þróunarverkfærum. Í Firefox geturðu opnað það með Tools → Web Developer valmyndinni.

Við höfum sérstakan áhuga á Network undirvalmyndinni, sem gerir okkur kleift að fylgjast með öllum netbeiðnum sem fara fram á milli tölvunnar okkar og staðarnetsins og internetsins.

Flýtileið til að opna valmyndina Network í þróunartólunum er Ctrl + Shift + Q. Ýttu á þá takkasamsetningu eða notaðu valmyndastikuna til að opna hana.

Þar sem við höfum áhuga á að skoða flutning á HTML, CSS og JavaScript skrám, smelltu á hnappana neðst og endurnýjaðu síðuna. Á aðalskjánum muntu sjá upplýsingar um flutning allra HTML, CSS og JavaScript skráa:

Hægra megin við Stærð dálkinn (sem sýnir einstakar skráarstærðir) sérðu einstaka flutningstíma. Þú getur líka tvísmellt á hvaða skrá sem er til að sjá frekari upplýsingar á flipanum Tímasetningar.

Gakktu úr skugga um að þú takir niður tímasetningarnar sem sýndar eru á myndinni hér að ofan svo þú getir borið þær saman við sama flutning þegar við höfum virkjað gzip eininguna.

Virkja og stilla gzip eininguna í Nginx

Til að virkja og stilla gzip eininguna skaltu opna /etc/nginx/nginx.conf, finna aðalmiðlarablokkina eins og sýnt er á myndinni hér að neðan og bæta við eða breyta eftirfarandi línum (ekki gleyma semíkomma í lokin eða Nginx mun skila villuskilaboðum við endurræsingu síðar!)

root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

Gzip tilskipunin kveikir eða slekkur á gzip einingunni, en gzip_types er notað til að skrá allar MIME-gerðirnar sem einingin ætti að höndla.

Til að læra meira um MIME-gerðir og skoða tiltækar tegundir, farðu í Basics_of_HTTP_MIME_types.

Að prófa Nginx vefsíðuhraða með Gzip þjöppunareiningu

Þegar við höfum lokið ofangreindum skrefum skulum við endurræsa Nginx og endurhlaða síðuna með því að ýta á Ctrl + F5 (aftur, þetta virkar í Firefox, þannig að ef þú ert að nota annan vafra skaltu leita fyrst í samsvarandi skjölum) til að hnekkja skyndiminni og við skulum fylgjast með flutningstímanum:

# systemctl restart nginx

Netbeiðnir flipinn sýnir nokkrar verulegar endurbætur. Berðu saman tímasetningar til að sjá sjálfur, hafðu í huga að það eru millifærslur á milli tölvunnar okkar og 192.168.0.29 (millifærslur á milli Google netþjóna og CDN eru óviðráðanlegar):

Til dæmis skulum við íhuga eftirfarandi dæmi um skráaflutning fyrir/eftir að hafa virkjað gzip. Tímasetningar eru gefnar upp í millisekúndum:

  1. index.html (táknað með /tecmint/ efst á listanum): 15/4
  2. Creative.min.css: 18/8
  3. jquery.min.js: 17/7

Fær þetta þig ekki til að elska Nginx enn meira? Hvað mig varðar þá gerir það það!

Samantekt

Í þessari grein höfum við sýnt fram á að þú getur notað Nginx gzip eininguna til að flýta fyrir skráaflutningum. Opinbera skjölin fyrir gzip eininguna lista yfir aðrar stillingarleiðbeiningar sem þú gætir viljað skoða.

Að auki hefur Mozilla Developer Network vefsíðan færslu um Network Monitor sem útskýrir hvernig á að nota þetta tól til að skilja hvað er að gerast á bak við tjöldin í netbeiðni.

Eins og alltaf, ekki hika við að nota athugasemdareyðublaðið hér að neðan ef þú hefur einhverjar spurningar um þessa grein. Við hlökkum alltaf til að heyra frá þér!