HUGO-р хийсэн сайтын хайлтын системийн оновч сайжруулах(SEO)
Сүүлд өөрийн сайтаа [source] netflify-уу шилжүүлсний дараа [part 1, part 2] google chrome-н audit (google-н сайтын хурд ашиглалтын шалгалт хийдэг tool)-г ажиллуулж үзэхэд Performance
нь 57/100 гарсан 😱. Тухайн үр дүнг доош гүйлгээд оноо хассан хэсгүүдэд зөвлөгөө байна. Уншаад байсан дунд нь хэд хэдэн заавал хийх зүйлс сонирхол татав. Үүний хамгийн түрүүнд audit-г incognito mode-д дуудаж ажиллуулах нь вэб хөтчийн extension-үүд performance-д нөлөөлөхөөс сэргийлдэг юм байна. Incognito mode (mac: cmd+shift+n, windows: ctrl+shift+n) дээр сайт маань 80 хүрэхгүй оноо авсан. Ингээд сайт маань асуудалтай байгаа нь тодорхой болж бусад зөвлөгөөг нь дагах шаардлагатай болов 😂.
CSS файлуудыг SASS-р нэгтгэх
Хамгийн түрүүнд анзаарагдсан асуудал бол нэлээд олон css файлууд байна. Hugo ашигласны нэг давуу тал энэ дээр гарч файлуудаа нэгтгэлээ.
Hugo pipes гээд assets файлууд дээр processing хийх боломж байгаа. Үүнийг ашиглаад assets файлууд(css, js, image)-г нэгтгэх, шахах зэрэг зүйлс хийх боломжтой.
Прожектын үндсэн(root) хавтсанд assets/style
гэсэн хавтас үүсгээд түүн дотор static/assets/css
дотор байсан файлуудаа зөөж өгсөн. Бүх css файлуудаа _old_css_name.scss
гэсэн форматад оруулж нэрлээд (энд нэрийн өмнө байгаа доогуур зураас чухал)main.scss
гэсэн файл дотор дараах байдлаар import хийж оруулсан.(SASS ашиглахгүй хийх боломжтой ч ашиглах юм бол дараа сайжруулалт хийхэд амар болно гэж бодлоо)
layouts/partials/head.html
дотор css дуудаж байсан кодыг дараах байдлаар мөн сольсон. :=
нь оноох үйлдэл харин resources.Get
гээд байгаа нь assets
хавтаснаас файлыг маань дуудаж toCSS
-р css-үү хөрвүүлэлт хийж байгаа. $style.Permalink
гэснээр хөрвүүлэгдсэн css файлын линк-г гаргаж авна.
JS файлуудыг нэгтгэх
CSS-н адил бүх js файлыг тус тусад нь дуудаж байсныг нэгтгэх хэрэгтэй. Энэ удаад SASS ашиглаж болохгүй боловч hugo pipes текст файл нэгтгэх resources.Concat
гэсэн боломж бий.
assets/script
гэсэн хавтас үүсгээд static/assets/js
доторх файлуудыг хуулж өгнө. Үндсэн script файлууд буюу bootstrap, modernizr, jquery
сангуудыг assets/script/lib
дотор. Нэмэлт болгож оруулсан jquery plugins, wow гэсэн сангуудыг assets/script/plugins
гэсэн хавтсанд хуулаад script.js
-г assets/script
дотор нь хуулж өгсөн байгаа.
(Файлуудаа цэгцэлсний ачаар огт хэрэглээгүй хэдэн сан файлуудыг олж устгасан 🤣). Үүний дараа layouts/partials/script.html
дотор дараах кодоор js-үүдээ нэгтгэж дуудна.
Файлуудыг дуудахдаа өмнөхтэй ижилхэн resources.Get
гэж аваад хувьсагчид оноож өгнө. Үүний дараа resources.Concat
ашиглаж шинэ js файл generate хийж гаргаж байгаад түүнийгээ мөн css-н адил var_name.Permalink
гэж линк-г нь авах замаар дуудаж байна.
CSS, JS файлуудаа minify хийх
Нэгтгэсэн файлуудаа minify хийж хоосон зай(whitespace)-с салгах нь төсөөлснөөс илүү үр ашигтай юм байна.
minify
нь css-г багасгах ба fingerprint
нь файлын нэрэн дээр дахин давтагдахгүй hash залгаж өгдөг болохоор дараа css дээр өөрчлөлт гарахад caching-н асуудлаас ангижрахад туслах юм.
JS файлуудаа мөн адил resources.Minify
гэж багасгаад resources.Fingerprint
гэж hash залгаад оруулчхаж болж байна. 🎉
Эцсийн үр дүн
Ямартай ч тодорхой үр дүнд хүрсэн. Үндсэн зорилго маань Performance оноо байсан ба 95 хүргэсэн. Яг одоо https://batbayar.ml гэж ороод шалгаад үзэж болно (Incognito mode илүү оноо авна бас илүү оновчтой 😉). PWA, Accessibility 2 өөр түүх болох байхаа. 🤷🏻♂️