"The web should be fast by Google, Inc." гэх ишлэлийг www.gtmetrix.com сайтын нүүр хуудаснаас уншиж болно. Ингээд веб хуудас хурдан ачаалагдахын ач холбогдол, чухаг байдлын талаар нуршилгүйгээр веб хуудсыг хэрхэн хурдан ачаалагддаг болгох талаарх яриагаа эхлүүлье.

Бид энэ сэдвээр веб хуудасны хурд гэх өргөн ойлголт уруу серверийн тохиргоо бас контент талаас нь хандан ярилцах болно. Харин код талаас Хурдан биелэх PHP код бичихэд анхаарах зүйлсээс гэх нэгэн өгүүлэл бичсэнийг маань дараа сонирхоно биз ээ.

Дээрх зурганд миний хувийн www.galaa.mn цахим хуудасны www.gtmetrix.com дахь үнэлгээ байна. Хэрвээ та жаахан л хөдөлмөрлөвөл таны веб сайт ч бас A үнэлгээ авах боломжтой.

GTmetrix тестер нь хурдны үзүүлэлтүүдээр дараах зүйлүүд авч үздэг юм байна. Үүнд:

  1. Defer parsing of JavaScript
  2. Specify a cache validator
  3. Minify HTML
  4. Minify CSS
  5. Minify JavaScript
  6. Avoid bad requests
  7. Avoid a character set in the meta tag
  8. Avoid landing page redirects
  9. Enable gzip compression
  10. Enable Keep-Alive
  11. Inline small CSS
  12. Inline small JavaScript
  13. Leverage browser caching
  14. Minimize redirects
  15. Minimize request size
  16. Optimize images
  17. Optimize the order of styles and scripts
  18. Put CSS in the document head
  19. Remove query strings from static resources
  20. Serve resources from a consistent URL
  21. Serve scaled images
  22. Specify a Vary: Accept-Encoding header
  23. Specify a character set early
  24. Specify image dimensions
  25. Avoid CSS @import
  26. Combine images using CSS sprites
  27. Prefer asynchronous resources

зэрэг үзүүлэлтүүд багтана. Дараах хүснэгтээр үзүүлэлтүүдийн чухаг байдал ба төрлийн уялдаа холбоог харууллаа.

Тоо ширхэг Чухаг байдал Нийт
Өндөр Дунд
Төрөл Content 8 0 8
CSS 3 1 4
CSS/JS 1 0 1
Images 3 1 4
JS 3 1 4
Server 6 0 6
Нийт 24 3 27

Ингээд төрөл нэг бүрээр нь салгаж нарийвчлан авч үзье.

Server

Энэ төрөлд багтах үзүүлэлтүүдийн ихэнхийг .htaccess файлд нэмэлт тохиргоо бичиж өгөх замаар хангаж болно. Тэдгээр тохиргоог хэрхэн хийх талаар .htaccess файл дахь тохируулгуудаас өгүүллээс уншаарай. Тухайлбал

  • Specify a Vary: Accept-Encoding header үзүүлэлтийг хангахад ашиглагдах скриптийг дээрх өгүүллийн 19-р зүйлээс
  • Leverage browser caching: 18-р зүйлээс
  • Enable gzip compression: 17-р зүйлээс
  • Specify a cache validator: 18-р зүйлээс

авч болно.

Avoid landing page redirects үзүүлэлтийн хувьд тухайн хаягаар хандахад ахин өөр хаяг уруу үсэрч байна уу гэдгийг тооцдог. Үүнийг хангахын тулд .htaccess доторх redirect-ээс гадна веб сайтынхаа код дотор header('Location: http://www.galaa.mn/'); мэтээр redirect бичихгүй байхад анхаарах шаардлагатай.

Enable Keep-Alive бол дийлэнх веб хост дээр урьдаас тохируулсан байх тул үүнд анхаарал хандуулах шаардлага барагтай бол гарахгүй.

Content

Specify a character set early үзүүлэлтийг хангахын тулд response-ийнхоо header дэх Content-Type дээр UTF-8 гэх зэргээр charset-ээ заах шаардлагатай. Үүнд харгалзах скриптийг .htaccess файл дахь тохируулгуудаас өгүүллийн 8 дугаар зүйлээс авна уу. Жич, тухайн скриптийг .htaccess файлдаа нэмж өгнө. Header-ээ шалгахдаа web-sniffer.net зэрэг сайтуудыг ашиглах боломжтой.

Serve resources from a consistent URL үзүүлэлтийн хувьд тухайн нэг зураг, css, js мэтийн файл уруу өөр өөр хаягаар хандахаар кодлохгүй байхад л болно. Өөрөөр хэлбэл веб хуудсаа бичихдээ нэг файлыг олон удаа ашиглах үед дуудах хаягийг нь ижилхэн бичиж өгөх хэрэгтэй гэсэн үг юм.

Remove query strings from static resources үзүүлэлтийн тухайд зураг, css, js мэтийн статик ресурсийн хаягийг бичихдээ зөвхөн хандах замыг нь л бичээд байхад хангалттай. Жишээлбэл веб сайтын хуудас дуудахдаа get-ээр параметр дамжуулдаг шиг юм хийж болохгүй.

Minimize request size Үүний тухайд веб сайтынхаа кодыг бичихээсээ л анхаарах шаардлагатай. Веб бровсерийн cookie дотор хадгалсан, get ба post-оор дамжуулж байгаа мэдээллийн хэмжээ ихсэхэд клиентээс серверт дамжуулах хүсэлтийн хэмжээ мөн тэр хэмжээгээр өсдөг. Иймээс уг үзүүлэлтээр өндөр оноо авахын тулд вебээ анхнаас нь маш сайн судалгаа шинжилгээ хийж байж, мөн түүнийхээ дагуу нягт зохиосон алгоритмын дагуу нарийн нямбай кодлож бичих хэрэгтэй.

Minimize redirects Дээр бичсэнчлэн redirect-ээ цөөлөх шаардлагатай. Тэгэхээр веб хуудаснуудынхаа хаягийн бүтэц зохион байгуулалтад сайтар анхаарна гэсэн үг.

Avoid a character set in the meta tag Зарим хөгжүүлэгчид charset-ийг html дотроо metatag бичээд заачихсан байдаг нь буруу юм. Зүй нь "Specify a character set early" дээр яригдсан шиг header дотроо заах ёстой билээ.

Avoid bad requests үзүүлэлтийг сайжруулахын тулд нэгэнт устсан эсвэл олдохгүй болсон хаягаас веб сайтынхаа агуулгыг цэвэрлэнэ.

Minify HTML За энэ бол эсвэл нямбай, хөдөлмөрч, уйгагүй хүний эсвэл маш сайн IDE-тэй хүний л хийх ажил болов уу. Minify HTML гэдгийг веб хуудасныхаа html кодоос илүү дутуу хоосон зайг цэвэрлэх гэж ойлгож болох юм.

CSS

Avoid CSS @import Уг нь хуудасны хэсэг нэг бүрт харгалзуулан CSS бичээд дараа нь түүнийгээ үндсэн CSS файлдаа @import url("footer.css") мэтээр дуудчих нь хөгжүүлэгчид хичнээн амар байдаг билээ дээ. Гэтэл ингэж биеийн амрыг харах нь эцсийн үр дүнгийн нэг чухал үзүүлэлтэд сөргөөр нөлөөлдөг. Учир нь веб бровсер html дотор байх бүх CSS-ийг бараг нэг зэрэг дуудчихдаг. Гэтэл import-олж орхивол дахин нэмж дуудах болдог.

Put CSS in the document head За үүнийг буюу CSS файлуудынхаа замыг head дотор заахыг хөгжүүлэгчид бүгдээрээ л хэрэгжүүлдэг байлгүй дээ.

Inline small CSS CSS бас JS кодыг тусдаа файлд хадгалах уу эсвэл html дотроо бичих үү гэдгийг яг таг хатуу шийдэхэд бэрх л дээ. Их эсвэл маш бага кодын хувьд ойлгомжтой. Ихийг нь тусдаа файлд, багыг нь html дотроо байрлуулна. HTML дотор байрлуулахдаа тухайн элементүүддээ id эсвэл класс оноож өгөөд улмаар тэр id ба классаар нь дуудсан css-ийг head дотор бичнэ гээд тогтчихсон. Харин харьцангуйгаар их гэхэд бас бага гэхэд ч хэцүү хэмжээтэй кодыг хэрхэх нь эргэлзээтэй. Тэгэхээр тестерийн үнэлгээг харж байгаад уншигч та өөрөө шийднэ биз ээ.

CSS/JS

Optimize the order of styles and scripts Эхлээд JQuery дараа нь JQuery ашиглаж ажиллах javascriptээ гэх мэтээр дэс дараатайхан дуудахаар цувуулан байрлуулна. CSS ч мөн ялгаагүй, эхлээд агуулагч элементийнх дараа нь агуулагдагч элементийнх гэсэн дарааллаар байрлуулах нь оновчтой.

JS

Prefer asynchronous resources Дор дурдах Defer parsing of JavaScript-тэй зарим талаар холбогдож болох юм. Хамгийн ойрын жишээ гэвэл Google Analytics-ын шинэчлэгдсэн tracking code юм. Энэ нь тухайн хуудасны агуулгад нөлөөгүй. Тиймээс веб бровсерууд түүнийг уншиж дууссан эсэхээс үл хамааран веб хуудсыг боловсруулдаг. Тэгэхээр хэрвээ боломжтой бол asynchronous төрлийн ресурсүүдийг ашиглах нь зүйтэй.

Inline small JavaScript Энэ талаар дээр Inline small CSS хэсэгт дурдсан тул алгасъя.

Minify JavaScript Энэ мөн Minify HTML-тэй төстэй тул алгасъя.

Defer parsing of JavaScript Веб бровсерууд веб хуудсыг html, css бас js зэргийг бүрэн уншиж дуусч байж боловсруулж дууссан гэх мэдэгдэл өгөх буюу favicon-ы оронд эргэлдэх дугуй дүрс мэтийн зүйлсээ болиулдаг байхад харин <script async src="scripts.js"></script> гэвэл scripts.js файлыг уншиж дуусахыг хүлээхгүй. Ийнхүү async нэмэхдээ скриптүүд бүрэн гүйцэд ажиллаж байгаа эсэхийг анхаарах шаардлагатай.

Images

Combine images using CSS sprites Bootstrap зэрэг CSS framework-уудын icon дүрсүүд нэг файлаар байдгийг анзаарсан уу? Энэ нь олон жижиг файл дуудахаас арай томхон ганц файл дуудах нь хугацааны хувьд илүү хэмнэлттэй байдагтай холбоотой юм. Иймд хуудас бүрт байрлах зураг дүрсүүдийг нэг файл болгох нь зүйтэй.

Specify image dimensions Хэрвээ зургийн хэмжээг <img src="image.jpg" width="100" height="50" /> гээд зааж өгвөл тухайн хуудсыг дүрслэхэд илүү хялбар буюу веб хуудсын геометр хэмжээсүүд зургийн файлыг уншиж дуусахаас өмнө эцэслэн тогтоогдоно. Эс тэгвээс зургийн файлыг уншиж дуусахыг хүлээх болно.

Serve scaled images Заагдсан урт ба өргөний хэмжээгээ давсан зураг ашиглахгүй байхад л энэ үзүүлэлт хамгийн их утгандаа хүрэх болно. Энэ нь зөвхөн хугацаа төдийгүй bandwidth хэмнэх зэрэг өөр бусад талаараа ч ашигтай юм.

Optimize images Энэ үзүүлэлт бага гарах нь зургийнхаа чанар, хадгалах формат, горим зэргийг оновчгүй сонгосонтой холбогддог. Google-ийн тестер зөвхөн JPEG төдийгүй PNG форматтай зургийн оптимал байдлыг ч шалгадаг. Харин GTmetrix тестер оптимал болгож хувиргасан зургийн файлыг санал болгодог юм билээ.

За ингээд веб сайт тань хурдан байг!