Veb-sahifa ish faoliyatini optimallashtirish

chop etish · Vremya na chtenie: 4min · tomonidan · Chop etilgan · Yangilangan

o'ynashUshbu maqolani tinglang

Veb-sayt sahifasini optimallashtirish - veb-sayt ishlashi.Veb-saytlar odatda ikki qismga bo'linadi: front-end va back-end. Biz fon veb-saytning funktsiyalarini amalga oshirish uchun ishlatilishini tushunishimiz mumkin, masalan: foydalanuvchini ro'yxatdan o'tkazish, parollarni o'zgartirish, maqolalarga sharh berish va hokazo. Ammo frontend haqida nima deyish mumkin? Aslida, bu ishlash funktsiyasi bo'lishi kerak. Foydalanuvchining kirish imkoniyatiga ta'sir qiluvchi omillarning aksariyati saytning tashqi sahifalarini optimallashtirish bilan bog'liq. Sahifani optimallashtirish - ushbu maqola ushbu jarayon haqida umumiy ma'lumot beradi.

Maqolaning mazmuni:

1. Sahifani yuklash vaqtini optimallashtirish

Sahifani yaxshiroq optimallashtirish - bu resurslar umuman yuklanmaganda. Shuning uchun, yuklab olingan keraksiz resurslar sonini kamaytirishga harakat qiling.

  1. Saytingizning ba'zi bog'liqliklari kerak yoki yo'qligini baholang va ijobiy va salbiy tomonlarini torting.
  2. Bog'liq yuklanish yo'li ishonchlimi va u mavjud bo'lmaganda butun sahifani bloklaydi.

2. Barcha siqiladigan resurslarni siqish

Barcha siqiladigan resurslarni siqish - saytdagi resurslarni yuklab olish misoli.

  1. Kod hammasi siqilgan bo'lishi kerak.
  2. Keraksiz rasmlarni o'chiring.
  3. Rasmlar o'rniga css3 dan foydalaning.
  4. Siqish nisbati yuqori bo'lgan rasmlardan foydalaning. Ayniqsa, GIF-lar, ba'zi video formatlari (H.264 yoki WebM) GIF-larga qaraganda ancha kichik.
  5. Rasmlardan emas, WordArt shriftlaridan foydalaning.
  6. Yangiroq brauzerlarga ega foydalanuvchilar uchun zamonaviyroq tasvir formatlarini taqdim eting (masalan: WebP).
  7. Turli sahifa o'lchamlari uchun bir nechta o'lchamdagi bitmaplar.
  8. Rasm uchun kenglik va balandlikni belgilang, aks holda kesish mumkin.
  9. HTTP/2 dan foydalaning. Misol uchun, sprite - bu HTTP so'rovlari sonini kamaytirishi mumkin bo'lgan ko'plab kichik tasvirlardan tashkil topgan katta tasvir. Biroq, keshlash qiyin va kichik tasvirni o'zgartirish barcha kichik tasvirlarning keshini bekor qiladi. HTTP/2, bir nechta so'rovlar havoladan boshlanishi mumkin, bu spritlarga bo'lgan ehtiyojni yo'q qiladi.

3. Veb-sayt keshini optimallashtirish

Brauzerni keshlash mexanizmi:

  1. Sahifaga tashrif buyuring, turli resurslarni so'rang va brauzer mahalliy kesh mavjudligini tekshiradi.
  2. Agar shunday bo'lsa, resurs muddati tugaganligini tekshiring. Muddati tugamagan, to'g'ridan-to'g'ri keshdan foydalaning. Muddati tugagach, serverga so'rov yuboriladi.
  3. Etag va oxirgi oʻzgartirilgan sarlavha maydonlari yuborilgan soʻrovga kiritiladi.
  4. Brauzer tomonidan keshlangan resurs mavjud emasligini aniqlash uchun server Etag va oxirgi o'zgartirilganidan foydalanadi.
  5. Agar resurs hali ham haqiqiy bo'lsa, brauzerga keshdan foydalanishni aytish uchun 304 javob kodini qaytaring. Aks holda, yangilangan resursni qaytaring.

Ushbu mantiq to'plamiga ko'ra, veb-saytingiz keshini rejalashtirishingiz mumkin.

Resurs muddati erta tugasa, resursni yangilash uchun brauzerni qanday xabardor qilishim mumkin?

Bu odatda mumkin emas, chunki brauzer resurs muddati tugamaganini ko'radi va umuman so'rov yubormaydi. Ammo bunga resursning URL manzilini o'zgartirish orqali erishish mumkin. Shuning uchun, resurs fayl nomiga versiya raqami yoki tasodifiy teg qo'shishingiz kerak. Masalan style.12.css. Ya'ni, brauzer html faylni keshlashiga yo'l qo'ymang, aks holda brauzer muddati tugamaguncha serverni so'ramaydi.

4. Critical Render Path

Brauzer veb-sahifani quyidagi bosqichlar bilan ko'rsatadi:

  1. HTML belgilarini qayta ishlang va DOM daraxtini yarating.
  2. CSS belgilarini qayta ishlang va CSSOM daraxtini yarating.
  3. DOM va CSSOM ni render daraxtiga birlashtiring.
  4. Har bir tugunning geometriya ma'lumotlarini hisoblash uchun ko'rsatish daraxti bo'yicha tartib.
  5. Ekrandagi har bir tugunni chizing.

Kritik ko'rsatish yo'lini optimallashtirish veb-sahifani iloji boricha tezroq ko'rsatish uchun renderlash jarayonini optimallashtirishni anglatadi.

css

CSS fayllari renderlashni bloklaydi. Brauzer DOM daraxtini qurgandan so'ng, u CSSOM daraxtining tugashini kutishi kerak. Nostandart CSS-ni oldini olish va brauzerga CSS faylini iloji boricha tezroq so'rashga ruxsat berish uchun hujjatning yuqori qismidagi teg.

CSS fayllarida @import dan foydalanmang, chunki brauzer import qilingan CSS-ni faqat importni o'z ichiga olgan fayl yuklangan va kompilyatsiya qilingandan keyin topadi va yuklaydi. Qo'shimcha so'rovlarni talab qilmaydigan va asosiy tarkibni ko'rsatishni bloklamaydigan inline CSS-dan foydalanishni o'ylab ko'ring.

js

Java skripti CSSOM qurilmaguncha ishga tushmaydi. js, shuningdek, DOM daraxtini qurishga to'sqinlik qiladi. Tegda async belgilanmagan bo'lsa.

Endi siz sahifani optimallashtirish nima ekanligini va u qanday tuzilganligini tushunasiz. Ushbu jarayonlarni tushunish saytingiz sahifalarini tezda optimallashtirish, so'rovlarni kamaytirish va yuklashni tezlashtirishga yordam beradi.

Ushbu maqolani o'qish:

O'qiganingiz uchun tashakkur: SEO HELPER | NICOLA.TOP

Bu post qanchalik foydali bo'ldi?

Baholash uchun yulduzcha ustiga bosing!

O'rtacha reyting 5 / 5. Ovozlar soni: 229

Hozircha ovoz yo'q! Ushbu xabarni birinchi bo'lib baholang.

Sizga ham yoqishi mumkin...

Fikr bildirish

Email manzilingiz chop etilmaydi. Majburiy bandlar * bilan belgilangan

to'rtta × 5 =