CSS optimallashtirish - veb-saytingizni tezlashtirishning 21 usuli

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

ko'paytirishMaqolani tinglang

Ishlash uchun CSS-ni qanday optimallashtirish mumkin.

css kabi nisbatan murakkab quvur liniyasidan o'tishi kerak HTML va JavaScript. Brauzer kerak serverdan fayllarni yuklab olish, va keyin ularni tahlil qilishni davom eting va ularni DOMga qo'llang. 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 tezlik haqida qayg'urmaydi. Bu kechikishlar yoki protsessor cheklovlari bo'lgan qurilmalar ishga tushganda 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.

Yorliq CSS takliflaridan foydalaning

Tez sahifalarni yuklash uchun CSS-ni optimallashtirish.

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 { chekka tepa: 1px;
    chekka o'ng: 2px;
    chekka-pastki:  3px;
    chekka-chap: 4px; }

p { marja: 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>
  <bosh>
    <uslub>
      .ko'k{rang:ko'k;}
    </uslub>
    </bosh>
  <tanasi>
    <div sinf="ko'k">
      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);
v <link rel="uslublar jadvali" href="a.css"> <link rel="uslublar jadvali" href="b.css"> <link rel="uslublar jadvali" href=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;
marja: 20,0em;
qiymat: 0px;
to'ldirish: .2em;
marja: 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 o'lchami: 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.

.download {
  kengligi:80px; 
  balandligi:31px; 
  fon holati: -160px -160px
}
.download: hover {
  kengligi: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; marja:0px;}
h2 {to'ldirish:0; marja: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.

chegara-radius qutisi-soya konvertatsiyasi
    filtr
    :n-chi bola
    pozitsiya: belgilangan;
    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 qiladi("yuikompressor");
 kompressor.siqish('/path/to/ fayli yoki JS satri', {
    //Kompressor imkoniyatlari:
    belgilar to'plami: '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.

<havola rel="uslublar jadvali" href="style.css?v=1.2.3">

 

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.

Nikola Topni o'qiganingiz uchun tashakkur

Post qanchalik foydali?

Baholash uchun tabassum ustiga bosing!

o'rtacha reyting 4.9 / 5. Baholar soni: 8

Hozircha reytinglar yo‘q. Avval baho bering.

Sizga ham yoqishi mumkin...

1 Javob

  1. Илья izohi:

    Loyihangizni anchadan beri kuzatib kelaman. Men tiklanishga qarayman, yaxshi tomonga o'zgarishlarni ko'rish juda yoqimli. Menga sizning dizayningiz va joylashuvingiz yoqadi. Sifat ustida ishlayotganingizni ko'rish mumkin.Sa’y-harakatlaringiz uchun rahmat.

Fikr bildirish

Email manzilingiz chop etilmaydi. Majburiy bandlar * bilan belgilangan

to'qqiz − 2 =