FEO nima? FEO - Front-end optimization. Qisqa qilib aytgan | Web Development

FEO nima?

FEO - Front-end optimization.
Qisqa qilib aytganda FEO yoki CO (Content Optimization) - veb-saytingizni brauzer uchun qulayroq va tezroq yuklanishi uchun nozik sozlash jarayonidir. Umuman olganda, FEO fayl o'lchamlarini kamaytirishga va ma'lum bir sahifani yuklash uchun zarur bo'lgan so'rovlar sonini kamaytirishga qaratilgan. Bu postda FEO ni yaxshilash uchun bir qancha usullarni ko'rib chiqamiz.

1. Resurslarni minimallashtirish - HTML, CSS, JS fayllardagi kodlaringizni minimallashtiring, ishlatmaydigan kodlaringizni, kommentlarni, bo'sh joylarni o'chirib tashlang. Fayllarni online compressor orqali minimallashtirib oling, bu faylning hajmini anchagina qisqartiradi, veb-sayt yuklanish jarayonida ham vaqt va resurs kamroq sarflanadi. Ko'p kutubxonalarda .min.css yoki .min.js fayllari bekordan bekorga turmaydi axir, endi bu usulni o'zingiz yozgan kodlarda ham ishlatishni boshlang.

2. Responsive rasm va WebP dan foydalaning - Ko'p veb-saytlar hajmining deyarli 50 foizi media fayl va rasmlarga to'g'ri keladi, rasmlar veb-sayt uchun moslashtirilmagan bo'lsa bu veb-saytingizni tezligiga yaxshigina tasir qiladi. Dasturlashni o'rganayotgan paytim background'ga 10MB atrofidagi rasmni qo'yganman, saytda rasm sifati muhim deb o'ylaganman , buni ko'rib ustozimni mazasi qochishiga sal qolgan.

Saytingizga rasmlarni qo'yishdan oldin online servislar orqali rasmni 70-80 foizgacha siqishga urinib ko'ring, keyin uni WebP formatga o'giring, bu saytingizni yuklanishini ancha tezlashtiradi. O'zimda tajribada bo'lgan holat 10-12 Megabaytlik rasmlarni 80 foizgacha siqib, WebP ko'rinishda qo'yganmiz, hajm 100-200 Kilobaytgacha qisqargan.

3. Lazy Loading - Lazy load veb-sayt ochilganda faqat kerakli resusrlarni yuklaydi, qolganini foydalanuvchiga kerak paytida yuklaydi. Masalan veb-saytni ochganingizda rasmlarning faqat bir qismi, ya'ni sizga ko'rinayotgan qismi yuklangan bo'ladi, qolgani esa scroll qilishingiz davomida yuklanib boradi. Misol uchun Google images ham shunaqa ishlaydi, siz rasm qidirsangiz sizga millionlab variantlarni taklif qiladi, lekin hammasi ham yuklanmaydi, rasmlar pastga tushishingiz davomida yuklanib boradi.

Agar hammasini birdan yuklaganida balki bir necha hafta kutardingiz yoki ram yetishmasligidan kompyuteringiz qotib qolgan bo'lardi .

4. CDN tanlang - CDN lar tarmoqning kechikishi (tarmoq orqali aloqada kechikishlar) bilan bog'liq muammolarni hal qilish uchun mo'ljallangan. Bunday kechikishlar asosan veb-sayt hosting serveri va foydalanuvchi orasidagi fizik masofa bilan bog'liq. Ushbu masofani kamaytirish uchun CDN kontentning versiyasini turli geografik joylarda saqlaydi.

Masalan siz saytingizga biror kutubxonani ulab qo'ydingiz, veb-sayt har safar serverning o'ziga murojaat qiladi, server USA da bo'lsa, masofa taxminan 11 km bo'lsa, javob qaytish vaqti esa taxminan 500-700 ms bo'ladi.

CDN orqali ulasangiz, eng yaqin CDN 200 km uzoqlikda bo'lsin, sizning saytingiz endi CDN ga murojaat qiladi, bu ma'lumot CDN da mavjud bo'lsa sizning so'rovingiz bajariladi, taxminan 50-100 ms.

CDN siz so'ragan ma'lumotni oldin o'zidan qidiradi, topa olmasa USA dagi serverga murojaat qiladi, ma'lumotni olgach sizga uzatadi, keyin uni o'zida ham saqlab qo'yadi. Keyingi safar siz so'rov yuborganingizda, endi u o'zidagi ma'lumotni sizga qaytaradi. Bunda faqat birinchi holatda ko'proq vaqt sarflanadi, keyingi safardan boshlab veb-sayt ma'lumotni CDN dan oladi.

5. Serverga so'rovlarni kamaytirish - Umuman olganda front-end dan serverga qanchalik ko'p so'rov yuborilsa, bu saytning yuklanishini shunchalik kechiktiradi. Serverga har qanday so'rovni yuborish, sayt yuklanishidan oldin to'liq aloqani talab qiladi. Buni oldini olish uchun bir qancha usullar mavjud.
- CSS Sprite-dan foydalanish.
- Ko'p tashqi so'rovlarni amalga oshiradigan third-party plugin'larni kamaytirish.
- Ishlatilmayotgan fayllarga bo'lgan link'larni olib tashlash.

Manba

@saidabdulla