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 өөр түүх болох байхаа. 🤷🏻‍♂️