CSS optimallashtirish - veb-saytingizni tezlashtirishning 21 usuli

Ushbu maqolani tinglang

css HTML va JavaScript kabi nisbatan murakkab quvur liniyasidan o'tishi kerak. Brauzer fayllarni serverdan yuklab olishi va keyin ularni tahlil qilish va DOMga qo'llashni davom ettirishi kerak. Optimallashtirishning haddan tashqari darajalari tufayli, bu jarayon odatda juda tez - ramkalarga asoslanmagan kichik veb-loyihalar uchun CSS odatda umumiy resurslar sarfining faqat kichik qismini tashkil qiladi.

Ramkalar bu muvozanatni buzadi. JQuery UI kabi JavaScript GUI stekini qo'shing va CSS, JS va HTML ning eksponent o'sishini kuzating. Ko'pincha ishlab chiquvchilar o'zlarini yomon his qilishmaydi - ular T3 Internetga ega sakkiz yadroli kuchli ish stantsiyasida o'tirganlarida, hech kim tezlikni qiziqtirmaydi. Bu kechikishlar yoki protsessor cheklovlari bo'lgan qurilmalar paydo bo'lishi bilan o'zgaradi.

CSS optimallashtirish ko‘p qirrali yondashuvni talab qiladi. Qo'lda yozilgan kodni turli usullar yordamida qisqartirish mumkin bo'lsa-da, ramka kodini qo'lda takrorlash samarasiz. Bunday hollarda avtomatik minimallashtiruvchidan foydalanish yaxshi natijalar beradi.

Quyidagi qadamlar CSS-ni optimallashtirishga yordam beradi. Ularning barchasi to'g'ridan-to'g'ri loyihangizga tegishli bo'lmasligi mumkin, buni yodda tuting.

Maqolaning mazmuni:

• Yorliq CSS takliflaridan foydalaning
• Ishlatilmagan CSS kodini olib tashlang
• CSS bilan yanada qulayroq usulda ishlang
• Har doim uslublaringiz bilan bog'liq muammolardan xabardor bo'ling
• Inline Critical CSS
• Antiparallel tahlil
• Rasmlaringizni CSS bilan almashtiring
• Rang kombinatsiyalaridan foydalaning
• Keraksiz nollarni va birlarni olib tashlang
• Qo'shimcha nuqta-vergulni olib tashlang
• Teksturali spritlardan foydalaning
• Keraksiz pikselni o'chirish
• Talab qilinadigan nisbatlardan saqlaning
• Keraksiz joylarni olib tashlang
• Keraksiz izohlarni olib tashlang
• Avtomatik siqishni foydalaning
• NPM dan ishga tushirish
• Sass va boshqalarni nazorat ostida saqlang
• Keshni sozlash
• keshni tozalash
• Asoslarni unutmang

Yorliq CSS takliflaridan foydalaning

Eng tezkor CSS jumlasi hech qachon tahlil qilinmaydigan jumladir. Quyida ko'rsatilgan maydon deklaratsiyasi kabi qisqartma takliflardan foydalanish CSS fayllaringiz hajmini keskin kamaytiradi. Ko'plab qo'shimcha qisqartmalarni "CSS Shorthand" googling orqali topish mumkin.

Mana bir misol:

p {chegara tepasi: 1px; chekka o'ng: 2px; pastki chet: 3px; chap chekka: 4px; } p {chegara: 1px 2px 3px 4px; }

Ishlatilmagan CSS kodini olib tashlang

Belgilashning keraksiz qismlarini yo'q qilish, shubhasiz, tezlikni sezilarli darajada oshiradi. Google Chrome brauzerida bu xususiyat qutidan tashqarida mavjud.

Shunchaki Ko‘rish > Tuzuvchi > Ishlab chiquvchi vositalariga o‘ting, so‘nggi versiyada Manbalar yorlig‘ini oching va buyruqlar menyusini oching. Shundan so'ng, "Qoplamani ko'rsatish" ni tanlang va joriy veb-sahifada foydalanilmagan kodni ta'kidlaydigan qamrovni tahlil qilish oynasiga qoyil qoling.

CSS bilan yanada qulayroq usulda ishlang

Satr bo'yicha tahlil orqali navigatsiya qilish har doim ham qulay emas. Chrome Web Performance Audit xuddi shunday ma'lumotlarni qaytaradi - shunchaki asboblar panelidan uni oching, Ko'rish > Tuzuvchi > Ishlab chiquvchi asboblari > Audit-ni tanlang va uni ishga tushiring. Bu bajarilgandan so'ng, muammoli narsalar ro'yxati paydo bo'ladi.

Har doim uslublaringiz bilan bog'liq muammolardan xabardor bo'ling

Yodda tutingki, avtomatlashtirilgan CSS tahlili har doim xatolarga olib kelishi mumkin. CSS fayllarini kichraytirilganlar bilan almashtirgandan so'ng butun veb-saytni sinchiklab tekshirib ko'ring - siz optimallashtiruvchi qanday xatolarga yo'l qo'yganini hech qachon bilmaysiz. Va oldinga qarab, munosib veb-xost saytingizdagi ajinlarni dazmollashga yordam beradi.

Inline Critical CSS

Tashqi uslublar jadvallarini yuklash kechikish tufayli vaqt talab etadi - kimdir "uslubsiz tarkibning chaqnashini" eslaydimi? Shunday qilib, eng muhim kod qismlari sarlavha tegiga joylashtirilishi mumkin.

Biroq, uni haddan tashqari oshirmaslikka harakat qiling. Shuni yodda tutingki, kodni texnik xizmat ko'rsatish vazifalarini bajaradigan odamlar ham o'qishi kerak.

Mana bir misol:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> Salom Dunyo! </div>

Antiparallel tahlil

@Import CSS kodingizga tuzilma qo'shadi. Afsuski, imtiyozlar bepul emas: importni joylashtirish mumkinligi sababli ularni parallel ravishda tahlil qilib bo'lmaydi. Ko'proq parallel usul brauzer bir vaqtning o'zida olishi mumkin bo'lgan bir qator teglardan foydalanadi.

Misol:

@import url("a.css"); @import url("b.css"); @import url("c.css");

Rasmlaringizni CSS bilan almashtiring

Bir necha yil oldin veb-saytlarda shaffof effektlarni yaratish uchun shaffof PNG fayllar to'plami odatiy hol edi. Hozirgi vaqtda CSS filtrlari resurslarni tejaydigan alternativ hisoblanadi. Misol uchun, ushbu qadam bilan birga keladigan parcha ko'rib chiqilayotgan tasvirning o'zining kulrang versiyasi sifatida ko'rsatilishini ta'minlaydi.

Misol:

img { -webkit-filtr: kulrang rang (100%); /* eski safari */ filtri: kulrang rang (100%); }

Rang kombinatsiyalaridan foydalaning

Sog'lom fikr olti xonali rang deskriptorlari ranglarni ifodalashning eng samarali usuli ekanligini ta'kidlaydi. Bu shunday emas - ba'zi hollarda qisqartirilgan tavsiflar yoki rang nomlari qisqaroq bo'lishi mumkin.

maqsad { fon rangi: #ffffff; } maqsad { fon: #fff; }

Keraksiz nollarni va birlarni olib tashlang

CSS keng doiradagi birliklar va raqamlar formatlarini qo'llab-quvvatlaydi. Ular optimallashtirish uchun yoqimli maqsaddir - quyida keltirilgan parchada ko'rsatilganidek, keyingi va keyingi nollarni olib tashlash mumkin. Shuni ham yodda tutingki, nol har doim nol bo'ladi va o'lcham qo'shilishi mavjud ma'lumotlarning qiymatini oshirmaydi.

to'ldirish: 0,2em chegara: 20,0em qiymat: 0px; to'ldirish: .2em; chegara: 20em qiymat: 0;

Qo'shimcha nuqta-vergulni olib tashlang

Ushbu optimallashtirish biroz muhim, chunki u kod o'zgarishlariga ta'sir qiladi. CSS spetsifikatsiyasi xususiyat guruhidagi oxirgi nuqta-vergulni qoldirish imkonini beradi. Ushbu optimallashtirish usuli bilan erishilgan tejash minimal bo'lgani uchun, biz buni asosan avtomatik optimallashtiruvchi bilan ishlaydiganlar uchun eslatib o'tamiz.

p {. . . shrift hajmi: 1.33em

Teksturali spritlardan foydalaning

Bir nechta kichik spritlarni yuklash protokolga ortiqcha yuk tufayli samarasiz. CSS spritlari bir qator kichik tasvirlarni bitta katta PNG fayliga birlashtiradi, keyin esa CSS qoidalaridan foydalanib bo'linadi. kabi dasturlar texturepacker , yaratish jarayonini juda osonlashtiradi.

.yuklab olish {kengligi: 80px; balandligi: 31px; fon pozitsiyasi: -160px -160px; } .yuklab olish: hover {kenglik: 80px; balandligi: 32px; fon holati: -80px -160px; }

Keraksiz pikselni o'chirish

Ishlashni yaxshilashning ajoyib usullaridan biri CSS standartining xususiyatidir. Birliksiz raqamli qiymatlar piksel sifatida qabul qilinadi - piksellarni olib tashlash har bir raqam uchun ikki baytni tejaydi.

h2 {to'ldirish: 0px; chegara: 0px;} h2 {to'ldirish: 0; chegara: 0}

Talab qilinadigan nisbatlardan saqlaning

Tahlil shuni ko'rsatdiki, ba'zi teglar boshqalarga qaraganda qimmatroq. Ushbu bosqichga hamroh bo'lgan ro'yxat, ayniqsa, ishlash uchun talabchan hisoblanadi - agar imkon bo'lsa, undan qoching.

border-radius box-shadow transform filter :nth-child position: fixed; va boshqalar.

Keraksiz joylarni olib tashlang

Bo'shliqlar - o'ylash yorliqlari, karetaning qaytishi va bo'shliqlar - kodni o'qishni osonlashtiradi, lekin tahlilchi nuqtai nazaridan ko'p narsa qilmaydi. Yuk tashishdan oldin ularni yo'q qiling. Yaxshisi, bu ishni qobiq skripti yoki shunga o'xshash qurilmaga topshiring.

Keraksiz izohlarni olib tashlang

Sharhlar kompilyator uchun ham foydasiz. Yetkazib berishdan oldin ularni olib tashlash uchun o'z tahlilchini yarating. Bu nafaqat tarmoqli kengligini tejash, balki tajovuzkorlar va klonchilar uchun kod ortida nima borligini aniqlashni qiyinlashtiradi.

Avtomatik siqishni foydalaning

Yahoo'ning UI jamoasi juda ko'p siqish ishlarini bajaradigan dastur yaratdi. U JAR fayli sifatida keladi va siz tanlagan JVM bilan ishga tushirilishi mumkin.

java -jar yuicompressor-xyzjar Foydalanish: java -jar yuicompressor-xyzjar [variantlar] [kiritish fayli] Global Options -h, --help Ushbu ma'lumotni ko'rsatadi --type Kirish faylining turini belgilaydi

NPM dan ishga tushirish

Agar siz mahsulotni Node.JS-ga integratsiya qilishni afzal ko'rsangiz, tashrif buyuring npmjs.com/package/yuicompressor . Yomon saqlangan omborda o'rash fayllari to'plami va JavaScript API mavjud.

var kompressor = talab ('yuicompressor'); kompressor.compress('/path/to/ fayl yoki JS satri', { //Kompressor parametrlari: charset: 'utf8', turi: 'js',

Sass va boshqalarni nazorat ostida saqlang

CSS selektorining ishlashi bir necha yil oldingidek muhim bo'lmasa-da (manbaga qarang), Sass kabi ramkalar ba'zan juda murakkab kod ishlab chiqaradi. Vaqti-vaqti bilan chiqish fayllarini ko'rib chiqing va natijalarni qanday optimallashtirish haqida o'ylang. Jamoa bilan baham ko'rish uchun natijalar bormi? Fayllarni ommaviy bulut xotirasida saqlang.

Keshni sozlash

Qadimgi maqolda aytilishicha, eng tezkor fayl hech qachon simdan o'tmaydigan fayldir. Brauzer keshini so'rash bunga samarali erishadi. Afsuski, keshlash sarlavhalarini sozlash serverda amalga oshirilishi kerak. Skrinshotlarda ko'rsatilgan ikkita vositadan unumli foydalaning, ular sizning o'zgarishlaringiz natijalarini tahlil qilishning tezkor usulini taqdim etadi.

keshni tozalash

Dizaynerlar tez-tez bo'lajak o'zgarishlar bilan bog'liq muammolardan qo'rqib, keshlashni yoqtirmaydilar. Ushbu muammoni hal qilishning aniq usuli fayl nomi bilan teglarni kiritishni o'z ichiga oladi. Afsuski, ushbu qadam bilan birga keladigan kodda tasvirlangan sxema hamma joyda ham ishlamaydi, chunki ba'zi proksi-serverlar "dinamik" yo'llar bilan fayllarni keshlashdan bosh tortadilar.

Asoslarni unutmang

CSS-ni optimallashtirish optimallashtirish harakatlarining faqat bir qismidir. Agar serveringiz HTTP/2 va gzip siqishni ishlatmasa, ma'lumotlarni uzatishda ko'p vaqt behuda ketadi. Yaxshiyamki, bu ikki muammoni hal qilish juda oddiy. Mening misolimda .htaccess fayli yordamida keng qo'llaniladigan Apache serveri uchun bir nechta sozlamalar ko'rsatilgan. Agar o'zingizni boshqa tizimda topsangiz, server hujjatlariga murojaat qiling.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE matn/html AddOutputFilterByType DEFLATE matn/css

Agar ushbu maqola siz uchun foydali bo'lsa, men juda xursand bo'laman. Xo'sh, men ushbu mavzu bo'yicha yangi tegishli materiallarni qo'shishni davom ettiraman.

Ushbu maqolani o'qish:

• .htaccess faylida 301 yo'naltirishni qanday qilish kerak - batafsil misollar
• Veb-sahifa ish faoliyatini optimallashtirish

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