Veb-Sayt Tezligini Oshirish Cheklisti: 8 Amaliy Qadam

Foydalanuvchilarning 53 foizi agar sahifa 3 soniyadan ko'proq vaqt ichida ochilmasa, uni darhol tark etadi. Veb-sayt tezligi nafaqat foydalanuvchi tajribasiga (UX), balki qidiruv tizimlaridagi SEO reytingiga va konversiya darajasiga bevosita ta'sir qiladi. Google algoritmlari Core Web Vitals ko'rsatkichlarini rasmiy reyting omili sifatida hisobga oladi.

Ushbu maqolada har qanday veb-loyihani tezlashtirish, server yuklamasini kamaytirish va yuklanish vaqtini sezilarli darajada qisqartirishga yordam beradigan 8 ta amaliy qadamdan iborat cheklistni ko'rib chiqamiz.

1. Rasmlarni WebP yoki AVIF Formatiga O'tkazish

Ko'pgina veb-saytlarda umumiy sahifa hajmining 60-70 foizini rasmlar tashkil qiladi. Eskirgan PNG va JPEG formatlari o'rniga zamonaviy WebP yoki AVIF formatlaridan foydalanish sifatni yo'qotmagan holda rasm hajmini 30 foizdan 70 foizgacha kamaytiradi.

HTML ichida zamonaviy brauzerlar uchun moslashuvchan rasmlarni yuklash usuli:

<picture>
  <source srcset="rasm.avif" type="image/avif">
  <source srcset="rasm.webp" type="image/webp">
  <img src="rasm.jpg" alt="Mahsulot rasmi" width="800" height="600" loading="lazy">
</picture>

Har doim rasmlarning aniq width va height o'lchamlarini ko'rsating. Bu Cumulative Layout Shift (CLS) muammosining oldini oladi.

2. Rasmlar va Iframelar Uchun Lazy Loading Qo'llash

Foydalanuvchi ekranni pastga surmaguncha (scroll qilmaguncha) ko'rinmaydigan bloklardagi rasmlarni oldindan yuklash tarmoq resurslarini behuda sarflaydi. Zamonaviy brauzerlar rasmlar uchun mahalliy (native) kechiktirib yuklashni qo'llab-quvvatlaydi:

<img src="hero-pastidagi-rasm.webp" alt="Tavsif" loading="lazy">
<iframe src="https://youtube.com/embed/video-id" loading="lazy"></iframe>

Muhim istisno: Sahifaning eng yuqori qismidagi (Above-the-fold yoki LCP elementi bo'lgan) birinchi asosiy rasmga hech qachon loading="lazy" bermang. Aksincha, uni tez yuklash uchun fetchpriority="high" atributidan foydalaning.

3. Statik Fayllarni Siqish (Gzip yoki Brotli)

HTML, CSS, JavaScript va JSON fayllarni siqmasdan uzatish internet trafigini sekinlashtiradi. Nginx yoki boshqa veb-serveringizda Brotli yoki Gzip siqish texnologiyasini yoqing. Brotli matnli fayllarni Gzip'ga nisbatan 15-20 foiz samaraliroq siqadi.

Nginx konfiguratsiyasi namunasi:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss text/javascript;
gzip_min_length 1024;
gzip_comp_level 6;

4. Brauzer Keshini (Cache-Control) To'g'ri Sozlash

Doimiy o'zgarmaydigan statik fayllarni (logotiplar, shriftlar, versiyalangan JS/CSS fayllar) har safar serverdan qayta yuklab olish shart emas. Brauzerga ushbu fayllarni keshda saqlashni buyurish orqali takroriy tashriflar vaqtini 90 foizgacha tezlashtirish mumkin.

location ~* \.(jpg|jpeg|png|webp|avif|css|js|woff2|woff)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

Fayl o'zgarganda foydalanuvchilar yangi versiyani olishlari uchun build vositalari (Vite, Webpack) orqali fayl nomiga hash qo'shish tavsiya etiladi (masalan: app.8f3b2a.js).

5. Shriftlarni Optimallashtirish (Web Fonts)

Noto'g'ri ulangan tashqi shriftlar matn paydo bo'lishini kechiktiradi (FOIT - Flash of Invisible Text). Shriftlarni yuklashda quyidagi qoidalarga amal qiling:

• Faqat .woff2 formatidan foydalaning, u eng ixcham hisoblanadi.
• Shrift CSS kodida font-display: swap; xususiyatini ko'rsating. Bu shrift yuklanguncha tizim shriftini ko'rsatib turadi.
• Shriftlarni uchinchi tomon serverlaridan (masalan, Google Fonts) emas, o'z hostingingizdan yoki CDN orqali yuklang.
• Asosiy shriftni <link rel="preload" href="shrift.woff2" as="font" type="font/woff2" crossorigin> orqali oldindan chaqiring.

6. JavaScript va CSS Fayllarni Minifikatsiya Qilish

Ishlab chiqish (development) jarayonida kod ichida bo'sh joylar, izohlar va uzun o'zgaruvchi nomlari bo'ladi. Production uchun ularni tozalash (minification) va birlashtirish (bundling) shart.

Shuningdek, foydalanilmayotgan CSS va JS kodlarini Tree Shaking orqali olib tashlang. Skriptlarni yuklashda sahifa renderingini to'sib qo'ymaslik uchun defer yoki async atributlaridan foydalaning:

<script src="bundle.js" defer></script>

7. CDN (Content Delivery Network) Xizmatini Ulash

Agar serveringiz Toshkentda, foydalanuvchi esa boshqa davlatda bo'lsa (yoki aksincha, server Yevropada, mijoz O'zbekistonda bo'lsa), jismoniy masofa sababli kechikish (latency) ortadi. Cloudflare yoki shunga o'xshash CDN xizmatlaridan foydalanish statik fayllarni foydalanuvchiga eng yaqin joylashgan server orqali uzatishga yordam beradi.

Cloudflare bepul tarifi ham DDOS himoyasi, avtomatik Brotli siqish va global kesh bilan ta'minlaydi.

8. Backend Javob Vaqti (TTFB) va DB So'rovlarini Tekshirish

Frontend qanchalik mukammal bo'lmasin, agar serverning birinchi baytni qaytarish vaqti (Time to First Byte - TTFB) sekin bo'lsa, butun sayt tormozlanadi. TTFB normada 200-500 ms oralig'ida bo'lishi lozim.

TTFB'ni qisqartirish choralari:

• Ma'lumotlar bazasi indekslari: Ko'p qidiriladigan va saralanadigan ustunlarga indeks qo'ying.
• ORM optimizatsiyasi: Django yoki boshqa freymvorklarda N+1 so'rovlar muammosini yo'qoting (select_related va prefetch_related ishlatish).
• Redis kesh: Tez-tez o'zgarmaydigan dinamik ma'lumotlarni Redis xotirasida keshlang.
• Gunicorn/Uvicorn sozlamalari: Serverdagi CPU yadrolari soniga qarab workerlar sonini to'g'ri taqsimlang.

Tezkor Tekshirish Cheklisti

1. Google PageSpeed Insights va Lighthouse orqali ballarni tekshirdingizmi?
2. Rasmlar WebP formatida va loading="lazy" atributi bormi?
3. Statik resurslar uchun Gzip/Brotli va kesh sarlavhalari yoqilganmi?
4. Keraksiz JavaScript kutubxonalari o'chirilganmi?
5. Backend bazadagi og'ir so'rovlar optimallashtirilganmi?

Ushbu qadamlarni birma-bir amalga oshirish orqali siz loyihangiz yuklanish tezligini kamida 2-3 barobar oshirishingiz va konversiyani sezilarli darajada ko'tarishingiz mumkin.