Sayt tezligi uchun CSS-ni optimallashtirish - 9 usul

Ushbu maqolani tinglang

Sekin sayt har doim yomon! Menimcha, ibora saytni tezlashtirish uchun CSS kodini optimallashtirish, ko'pincha qidiruvlarda, shuningdek 301 yo'naltirish yoki robots.txt mavjud. Yoki siz veb-saytlarni optimal ishlash haqida qayg'urmasdan yuboradigan dasturchisiz?

Agar siz birinchi variantga tegishli bo'lsangiz, unda ushbu maqola siz uchun. Endi men sizga CSS-ni optimallashtirishga yordam beradigan 9 ta eng yaxshi usul haqida gapirib beraman. Ushbu maslahatlar saytingizni tezlashtiradi va SERPlarda ko'tariladi. Ushbu effekt saytingizga yangi tashrif buyuruvchilar oqimini sezilarli darajada oshiradi.

Maqolaning mazmuni:

• Veb-sayt tezligining ahamiyati
• Image Sprite-dan foydalaning
• CSS optimallashtirish
• Keraksiz kodni kamaytiring
• Jadvallarni boshga va JS skriptlarini pastki qismga qo'ying
• CSS fayllarini ajratish
• Kodingizdagi bo'shliqlar sonini kamaytiring
• Kodingizni hujjatlashtiring
• Kodingizni tartibga soling
• KISS texnikasi (Oddiy ahmoqlik)

Organik reyting uchun sayt tezligining ahamiyati

Tezroq veb-saytlarning ahamiyati sizni hayratda qoldiradi. Bir nechta asosiy sabablar mavjud, ammo ularning ta'siri saytning pozitsiyasiga sezilarli darajada ta'sir qiladi. Asosiy sabablar:

1. Veb-saytga tashrif buyuruvchilar sahifa to'liq yuklanishi uchun uzoq vaqt kutishni yoqtirmaydilar;
2. Agar u tez ishlasa, mijozlaringiz albatta saytga qaytadilar; Tezroq saytlar har doim qidiruv tizimlarida yuqori o'rinlarni egallaydi;
3. Shuningdek, sayt tezligi SEO strategiyangizga qiymat qo'shadi;

Bu manbalar shunchaki ajoyib va ajoyib taassurot qoldiradi. Endi saytingizni tezroq qilish uchun nima qilgan bo'lar edingiz? Albatta, bu vaziyatni yaxshilash sizdan ko'p harakatlarni talab qilishi mumkin.

Masalan, serverni, operativ xotirani, xotirani yoki umuman uskunani yangilash.Lekin saytning sekin ishlashining asosiy sababi manba kodingizda ekanligini bilasizmi? Optimallashtirilgan CSS-ning etishmasligi eng keng tarqalgan sababdir. Bu sizning uslublar jadvalingiz fayl hajmini hatto bir necha kilobaytga qisqartirish sahifangizni yuklash vaqtiga sezilarli ta'sir ko'rsatishini anglatadi.

Image Sprite-dan foydalaning

CSS Sprites - bu bir nechta tasvirlarni bitta rasm fayliga birlashtirish vositasi. Ishlashni yaxshilash uchun undan keyin veb-saytda foydalaning. Tasvir spritlaridan bunday foydalanish eski uslubdir. CSS fayl hajmini kamaytirish va sahifani yuklash vaqtini qisqartirish haqida gap ketganda, bu usul majburiydir.

Tasvir spritlari tasvirlarni bitta katta .png fayliga to'plash imkonini beradi. Bu usul HTTP so'rovlarini kamaytiradi va sahifani yuklash vaqtini tezlashtiradi. Agar siz saytingizda juda ko'p piktogramma va grafiklardan foydalansangiz, tasvir sprayti ajoyib tanlovdir. Ushbu parametr bir nechta tasvirlarni olish uchun qo'shimcha xarajatlarni sezilarli darajada kamaytiradi.

CSS optimallashtirish

CSS-ni qisqartirish shunchaki faylingizni iloji boricha kamroq bo'sh joy bilan yangi faylga siqib chiqaradi. Kod qanchalik kichik bo'lsa, u foydalanuvchi brauzeri tomonidan tezroq o'qiladi.

Albatta, buni qo'lda qilish shart emas, chunki internetda avtomatik kompressorlar mavjud. Faqatgina bunday oddiy onlayn vositalar tufayli siqishni bir necha daqiqada amalga oshirish mumkin. Mana shunday minifikatorlardan biri: http://www.cssminifier.com

Keraksiz kodni kamaytiring

Bizga takroriy kod kerak emas. Bunday kod elementlarning yuklanishini sezilarli darajada sekinlashtiradi. Brauzer ikki nusxadagi kodni qayta-qayta bosib o'tishi kerak, bunga soniyaning qo'shimcha qismini sarflaydi.Sahifani yuklash tezligini oshirishning yana bir hiylasi keraksiz kodni kamaytirishdir. Bunday yaxshilanishga ortiqcha yoki takroriy kodni tekshirish orqali erishish mumkin.

CSS jadvallarini boshga va JS skriptlarini pastki qismga qo'ying

Uslublar jadvalini tepaga (bosh teglar orasiga) va JavaScript kodini pastga qo'yish yaxshi amaliyotdir. Kodingiz sahifaning qolgan qismidan oldin yuklanganligiga ishonch hosil qiling. JavaScript-ni saytning pastki qismida joylashtirishning asosiy sababi uning katta hajmidir. Shuningdek, uning veb-sayt tezligiga ta'siri. Shuning uchun bunday skriptlar saytning pastki qismida joylashgan. Bu ularga sahifaning asosiy komponentlaridan keyin yuklash imkonini beradi.

Sahifaning yuqori qismidagi tarkibni uslublash uchun zarur bo'lgan asosiy uslublar qatorga kiritilgan va darhol hujjatga qo'llaniladi. To'liq small.css fayli sahifaning dastlabki ko'rsatilishidan keyin yuklanadi. Uning uslublari sahifaga yuklangandan so'ng, muhim kontentning dastlabki ko'rsatilishini bloklamasdan qo'llaniladi.

Katta maʼlumotlar URIʼlarini joylashtirmang

Ma'lumotlar URI'larini uslublar fayllariga joylashtirishda ehtiyot bo'ling. CSS-da kichik ma'lumotlar URI-larini tanlab ishlatish mantiqiy bo'lishi mumkin bo'lsa-da, katta ma'lumotlar URI-larini joylashtirish sizning CSS-ni katlamaning yuqori qismida kattaroq bo'lishiga olib keladi va sahifani ko'rsatish vaqtini sekinlashtiradi.

CSS atributlarini joylashtirmang

CSS atributlarini HTML elementlariga (masalan, ) joylashtirishdan iloji boricha qochish kerak, chunki bu ko'pincha kodning keraksiz takrorlanishiga olib keladi. Bundan tashqari, HTML elementlaridagi inline CSS sukut bo'yicha Content Security Policy (CSP) tomonidan bloklanadi.

CSS fayllarini ajratish

Shuningdek, siz CSS fayllarini, ya'ni turli uslublar jadvallarini ajratishingiz mumkin. Misol uchun, agar siz IE, Chrome yoki Firefox kabi bir nechta brauzerlarni maqsad qilgan bo'lsangiz. Masalan, bitta uslublar jadvalida CSS xacklarini tekshirish o‘rniga, boshqa uslublar jadvalini yuklash uchun IE shartli bayonotlaridan foydalanishingiz mumkin (masalan, IE6 uchun) Shunday qilib, Chrome brauzeridan foydalanganda IE kodini yuklamaysiz. Bu fayl hajmini sezilarli darajada kamaytiradi.

Kodingizdagi bo'shliqlar sonini kamaytiring

Siz har doim uslublar jadvalingizdagi bo'shliqlar sonini kamaytirishga harakat qilishingiz kerak. Oq bo'shliqni oshirish bo'sh baytlarni egallaydi. Bu juda katta loyihalarda tezroq va sekinroq sayt o'rtasida farq qilishi mumkin.Oq bo'shliqlar sonini kamaytirish orqali fayl hajmi kamayadi. Shunday qilib, biz og'irligi pastligi sababli faylni yuklab olishni tezlashtiramiz.

Kodingizni hujjatlashtiring

Iloji boricha kodingizni hujjatlashtirishingiz kerak. /* Bu yerda izoh qoldiring */ kabi izohlardan foydalanish foydasiz kodni aniqlashga yordam beradi. Sharh qo'shish juda ko'p joy egallasa-da, ularni e'tiborsiz qoldirish oson.Ba'zi hollarda foydasiz izohlar shunchaki o'chiriladi. Ushbu uslub sizga CSS-ning ortiqcha vaznidan juda samarali tarzda xalos bo'lishga imkon beradi.

Kodingizni tartibga soling

CSS kodini optimallashtirish ko'pchilik gapirishni xayoliga ham keltirmaydigan texnikadir. Aslida, ko'p darajalarda kodingizni tartibga solish sizga fayl hajmini sezilarli darajada kamaytirishga yordam beradi. Natijada saytingiz tezligini oshiring Qiziq, qanday qilib? Bu juda oddiy.

CSS sinflaringizni to'g'ri filiallar to'plamiga qo'ying. Bu usul minimal takrorlashni kafolatlaydi. Tashkil qilinmagan kod zamonaviy veb-dizayndagi keng tarqalgan muammodir. Ba'zi stsenariylarda, tartibsiz kodingizni ierarxik bo'limlarga ajratish saytingizni yuklash uchun kerak bo'lgan yagona narsadir.Birgina uslublar jadvalida CSS-ni buzishdan qochishga harakat qiling. Buning o'rniga 5 va 8-bandlarda ko'rsatilgan usullardan foydalaning.

KISS texnikasi (Oddiy ahmoqlik)

Oxirgi so'z, qilayotgan barcha ishlaringiz KISS texnikasiga mos kelishiga ishonch hosil qilishdir. KISS qisqartmasi Keep it Simple Stupid degan ma'noni anglatadi. Agar siz yana fayl yaratsangiz! Shunda siz, albatta, tashkillashtirilgan, yaxshi yozilgan, kamroq ortiqcha va toza kod uchun to'g'ri yo'lda bo'lishingiz kerak. Ko'rib turganingizdek, CSS-ni optimallashtirish qiyin emas. Ayniqsa, ba'zi hollarda, siz ushbu maqolaning bir nechta paragraflari bilan shug'ullanishingiz mumkin. Ushbu usullar ba'zida saytni tezlashtirishga yordam beradi.

Ushbu maqolani o'qish:

• JS va CSS sayt kodlarini onlayn optimallashtirish - batafsil qo'llanma
• Veb-saytni texnik optimallashtirish - eng muhim harakatlar

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