CSS optimallashtirish

✔️ Teg: CSS-ni optimallashtirish

CSS-ni optimallashtirish - bu CSS fayllari hajmini kamaytirish va ularning tuzilishini soddalashtirish orqali veb-sahifalarning ishlashi va yuklash tezligini oshirish jarayoni. Bu foydalanuvchi tajribasini yaxshilash va qidiruv tizimining reytingini oshirish uchun muhimdir.

CSS-ni qanday optimallashtirish mumkin - CSS-ni qisqartirish

CSS-ni qisqartirish koddan bo'sh joylar, qatorlar va sharhlar kabi barcha keraksiz belgilarni olib tashlashni anglatadi. Bu CSS faylining hajmini kamaytiradi va uni tezroq yuklaydi.

CSS fayllarini birlashtirish

Bir nechta CSS fayllarini bitta faylga birlashtirish ham sahifa yuklanishini tezlashtirishi mumkin. Buning sababi, brauzer serverga kamroq so'rovlar yuborishi kerak.

Sinf va ID bo'yicha selektorlardan foydalanish

Teg selektorlari o'rniga sinf va identifikatorni tanlash CSS brauzerini qayta ishlashni tezlashtirishi mumkin. Sinf va ID selektorlari aniqroq va brauzerga sahifadagi mos elementlarni tezda topish imkonini beradi.

Uslublar tartibini optimallashtirish

CSS faylidagi uslublar tartibi renderlash tezligiga ham ta'sir qilishi mumkin. Sahifaning yuqori qismidagi elementlarga qo'llaniladigan uslublar CSS faylining yuqori qismiga joylashtirilishi kerak. Bu brauzerga sahifa mazmunini tezroq ko'rsatish imkonini beradi.

CSS-ni optimallashtirish veb-saytni rivojlantirishning muhim jihati hisoblanadi. Bu foydalanuvchi tajribasini yaxshilashga va qidiruv tizimining reytingini yaxshilashga yordam beradi. Kodni qisqartirish, fayllarni birlashtirish va sinf va ID selektorlaridan foydalanish kabi ko'plab CSS optimallashtirish usullari mavjud.

CSS-ni minimallashtirish

CSS-ni minimallashtirish - bu bo'shliqlar, qatorlar va sharhlar kabi barcha keraksiz belgilarni olib tashlash orqali CSS kodini siqish jarayoni. Bu CSS faylining hajmini kamaytiradi va uni tezroq yuklaydi. CSS Miniifier va CleanCSS kabi turli xil CSS minifikatsiya vositalari mavjud.

Tasvirni optimallashtirish

Tasvirni optimallashtirish sahifa ish faoliyatini ham yaxshilashi mumkin. Bu tasvirlarni sifatni yo'qotmasdan imkon qadar kichik hajmga siqish degan ma'noni anglatadi. TinyPNG va JPEGmini kabi turli xil tasvirni optimallashtirish vositalari mavjud.

CSS-ni optimallashtirish veb-saytni rivojlantirishning muhim jihati hisoblanadi. Bu foydalanuvchi tajribasini yaxshilashga va qidiruv tizimining reytingini yaxshilashga yordam beradi. Kodni qisqartirish, fayllarni birlashtirish va sinf va ID selektorlaridan foydalanish kabi ko'plab CSS optimallashtirish usullari mavjud. Sahifaning ishlashini yaxshilash uchun tasvirlarni optimallashtirishni ham unutmang.

CSS-ni optimallashtirishning to'rtta asosiy jihati mavjud:

1. Yuklab olish unumdorligi - asosan fayl hajmini kamaytirish, yuklab olishni bloklashni kamaytirish va parallellikni yaxshilash orqali.

2. Selektorning ishlashi.

3. Renderlash unumdorligi.

4. Saqlab turish, ishonchlilik.

CSS optimallashtirish - yuklash unumdorligi

1. CSS siqish: yozilgan CSS-ni qadoqlash va siqish uning hajmini sezilarli darajada kamaytirishi mumkin;

2. Yagona CSS uslubi: pastki va chap chekkalar kerak bo'lganda,

⟹ Ko'p marta tanlang:margin: tepadan 0 pastdan 0;

⟹ Lekin chekka-pastki: pastki; chekka-chap: chap; amalga oshirish samaraliroq;

3. @import dan foydalanishni kamaytiring va havoladan foydalaning, chunki ikkinchisi sahifa yuklanganda birga yuklanadi va birinchisi yuklashdan oldin sahifa yuklanishini kutishi kerak;

4. CSS tartibini oqilona loyihalashtiring, uslubni qayta ishlatishga e'tibor bering va renderlash vaqtini qisqartiring. Sinf va identifikatorni tanlash uchun * kabi kamroq global mos keluvchidan foydalaning va qayta foydalanishni yaxshilash uchun asosiy uslublarni oqilona o'rnating (masalan, jadval o'rnatish{}).

CSS optimallashtirish - Selektorning ishlashi

1. CSS selektorlari o'ngdan chapga moslashtirilgan. Bola tanlagichlardan foydalanganda, brauzer belgilangan element ekanligini aniqlash uchun barcha yordamchi elementlarni ko'rib chiqadi va hokazo;

2. Joker belgilardan foydalanishdan saqlaning. Masalan, *{} hisob-kitoblar soni ajoyib! Faqat kerakli narsalarni tanlang.

3. Iloji boricha kamroq teglarni tanlang, lekin sinfdan foydalaning. Masalan: #nav li{}, siz nav_item sinf nomini li ga qo'shishingiz mumkin, .nav_item{} ni quyidagi tarzda tanlang.

4. Identifikatorlar yoki sinf selektorlarini aniqlash uchun teglardan foydalanmang. Masalan: ul#nav #nav ga soddalashtirilishi kerak.

5. Bolalar tanlagichidan imkon qadar kamroq foydalaning va selektorning og'irligini kamaytiring. Nasl selektorlari eng yuqori bo'ladi, selektorlar chuqurligini minimal darajada saqlashga harakat qiling, eng yuqori daraja uchta qatlamdan oshmaydi va har bir yorliq elementini ulash uchun ko'proq sinflardan foydalaning.

6. Meros haqida o'ylab ko'ring. Qaysi xususiyatlar meros qilib olinishi mumkinligini bilib oling va bu xususiyatlar uchun qoidalarni takrorlashdan saqlaning.

CSS optimallashtirish - renderlash unumdorligi

1. Yuqori ishlash atributlaridan ehtiyotkorlik bilan foydalaning: suzuvchi, joylashishni aniqlash;

2. Sahifani almashtirish va qayta chizishni minimallashtirish;

3. Css yozish tartibiga muvofiq qayta tartiblang:

⟹ Joylashuv: joylashuv, yuqori, chap, z-indeks, float, displey.

⟹ Hajmi: kenglik, balandlik, chekkalar, to'ldirish.

⟹ Matn seriyasi: shrift, satr balandligi, rang, harflar oralig'i.

⟹ Fon chegarasi: fon, chegara.

⟹ Boshqalar: animatsiya, o'tish.

4. Qayta chizish: hoshiya, kontur, fon, quti-soya, agar fon-rangdan foydalana olsangiz, fonni ishlatmaslikka harakat qiling;

5. Bo'sh qoidalarni olib tashlang: {};

6. Atribut qiymati 0 ga teng bo'lsa, birliklar qo'shilmaydi;

7. Atribut qiymati suzuvchi oʻnlik soni 0.** va kasrdan oldingi 0ni oʻtkazib yuborish mumkin;

8. Turli xil brauzer prefikslarini standartlashtiring: brauzer prefikslari bo'lganlar birinchi o'rinda turadi. Standart atributlar quyidagilardan iborat;

9. @import prefiksidan foydalanmang, bu CSS yuklash tezligiga ta'sir qiladi;

10. Kod miqdorini kamaytirish uchun CSS meros xususiyatlaridan to'liq foydalaning;

11. Ommaviy uslublarni mavhum chiqarib oling va kod miqdorini kamaytiring;

12. Selektor ichki joylashtirishni optimallashtiradi va juda chuqur darajalardan qochishga harakat qiladi;

13. css sprite tasviri, xuddi shu sahifaning bir qismining kichik belgisi, foydalanish uchun qulay va sahifadagi so'rovlar sonini kamaytiradi, lekin rasmning o'zi kattalashadi, undan foydalanganda afzallik va kamchiliklarni aniq ko'rib chiqing, va undan keyin foydalaning;

14. CSS faylini sahifaning yuqori qismiga joylashtiring.

Saqlash va ishonchlilik

1. Bir xil atributlarga ega uslublarni ajratib oling, ularni birlashtiring va CSS-ning barqarorligini yaxshilash uchun sinflar orqali sahifalarda foydalaning;

2.Avvalgisidan so'ng, oocss ham CSS ish faoliyatini yaxshilashning bir usuli hisoblanadi. Qayta foydalanish mumkin bo'lgan va semantik jihatdan yaxshi tayanch sinflarni aniqlash va keyin ularni html ga qo'shish orqali bu uslub ko'plab UI ramkalari tomonidan ham qo'llaniladi, masalan:class=”btn btn-active btn-blue”;

3. Uslub va tarkibni ajratish: css kodi tashqi CSSda aniqlanadi;

4. Idish va uslubni ajratish;

⟹ Quyida ushbu mavzu bo'yicha materiallar keltirilgan: