JS va CSS sayt kodlarini onlayn optimallashtirish - batafsil qo'llanma

Ushbu maqolani tinglang

Veb-sayt JS va CSS kodini optimallashtirish, texnik veb-sayt optimallashtirishning eng muhim jihatlaridan biridir. Buning sababi, ma'lumotlar bazasi qo'ng'iroqlarining kamayishi va kod tuzilmasining o'qilishining yaxshilanishi tufayli ko'proq sayt resurslarining chiqarilishidir.

Qoida tariqasida, JavaScript va CSS kodini optimallashtirish saytning javob tezligini sezilarli darajada oshiradi. Shunday qilib, sayt tezroq ishlaydi va server qismini kamroq yuklaydi.

Maqolaning mazmuni:

• JS va CSS kodi - bu nima?
• JS va CSS kodlarini optimallashtirish - nima uchun skriptlar va uslublarni optimallashtirish kerak?
• Apache, Nginx va Node.js uchun Gzip moduli
• Javascriptni minimallashtirish bilan optimallashtiring
• Veb shriftdan foydalanish uchun CSS optimallashtirish
• Tegishli shriftni yuklab olish opsiyasidan foydalanish
• Kodni optimallashtirish onlayn
• CMS Wordpress plaginlari yordamida JS va CSS-ni kichiklashtiring

JS va CSS sayt kodi - bu nima?

JavaScript va CSS umumiy dasturlash tillari boʻlib, ularning har biri saytga maʼlum funksiyalarni olib keladi. HTML, JS, CSS asosiy veb-dasturlash tillaridan foydalanish tufayli foydalanuvchining sayt bilan ideal aloqasiga erishiladi.

JavaScript umumiy dasturlash tilidir. Turli xil skriptlarni yaratishga imkon beradi. Ushbu skriptlarning aksariyati foydalanuvchi brauzerida bajariladi. JavaScript foydalanuvchining sayt bilan aloqasini yaxshilaydi. Saytdagi mini-ilovalar (skriptlar) yordamida ma'lum ma'lumotlar to'plamini chiqarish. JS skriptlarining vizualizatsiyasi va chiqarilishi ikkinchisini sahifaning HTML kodiga ulash orqali amalga oshiriladi. Deyarli barcha saytlar o'z tarkibida JS (JavaScript) dan foydalanadi.

css - saytning asosiy dasturlash tillaridan biriga ishora qiladi. CSS (uslub fayli) - saytning deyarli har qanday elementining ko'rinishi haqida ma'lumotni olib yuradi. Rang va joylashuvdan ma'lum bir sahifa elementining mashhur animatsiyasigacha.

JS va CSS kodini optimallashtirish - bu nima uchun kerak?

JS va CSS - o'z-o'zidan, ular juda ko'p ortiqcha narsalarga ega bo'lgan juda katta vaznli kodga ega. Brauzer uchun kodlarning katta tuvalini soniyaning bir qismida o'qish qiyin. Shunday qilib, sahifaning va butun saytning yuklanishi sekinlashadi. Ushbu fayllarni optimallashtirish kod hajmini kamaytirishga, ortiqcha narsalarni kesib tashlashga qaratilgan. U bilan bog'liq:

• Ishlatilmagan va qo'shimcha belgilar;
• bo'shliqlar;
• Tugallanmagan va ishlamaydigan kod satrlari.

Jarayonning o'zi oddiy faylni siqishga o'xshaydi. Ikkinchisining og'irligi va hajmi ancha kichik bo'ladi. Ammo, shunga qaramay, kod odamlar uchun butunlay o'qib bo'lmaydigan holga keladi. Ammo qidiruv robotlari va brauzerlari faylning butun tuzilishini mukammal ravishda chetlab o'tadi va tushunadi. Turga sarflangan vaqt bir necha marta qisqartiriladi. Ushbu siqish tufayli yuklab olish tezligi oshadi va umumiy javob yaxshilanadi.

Apache, Nginx va Node.js uchun Gzip moduli

Gzip - Internet bugungidek tez bo'lmagan bir paytda yaratilgan ajoyib texnologiya. Arxivlovchilar ommabop texnologiya edi (oʻshandan beri ular mashhurligi pasayib ketdi, chunki USB flesh-disklar 1TB hajmgacha saqlash imkoniyatini beradi).

G'oya internetdagi veb-trafik uchun arxivatorlardan foydalanish edi (veb-sayt fayllarini yaratishga o'xshash), shuning uchun gzip veb-serverlardagi fayllarni statik (matn) fayllarni 99% asl hajmiga siqish orqali siqish uchun mo'ljallangan. JavaScript matn fayli boʻlgani uchun gzip JavaScript fayllarini siqish hamda sahifa yuklanish vaqtini qisqartirish uchun ishlatilishi mumkin.

Javascriptni minimallashtirish bilan optimallashtiring

Optimallashtirish JavaScript-ni kichiklashtirishning maxsus turidir. Bunday minimallashtiruvchilar nafaqat keraksiz bo'shliqlar, vergullar, sharhlar va boshqalarni olib tashlamaydi, balki "o'lik kod" dan qochishga yordam beradi:

• Google yopilish kompilyatori
• UglifyJS
• Microsoft AJAX minifikatori

Veb shriftdan foydalanish uchun CSS optimallashtirish

Google Fonts va shunga o'xshash shrift ishlab chiqaruvchilari veb-shriftlarni inqilob qildilar, biroq bir necha qator shrift kodlari yuzlab kilobayt o'tkazish qobiliyatini iste'mol qilishi mumkin.

1. Faqat kerakli shriftlarni yuklab oling: foydalanilmagan shriftlarni olib tashlang va yangi shriftlar kerakligini tekshiring.
2. Faqat sizga kerak bo'lgan vazn va uslublarni yuklab oling: Ko'pgina shrift ishlab chiqaruvchilari yuklab olishni ma'lum belgilar to'plami (masalan, faqat lotin), og'irliklar (qalinlik) va kursiv (qiyalik) bilan cheklashi mumkin. Natijalar yomon bo'lishi mumkin bo'lsa-da, brauzerlar etishmayotgan uslublarni avtomatik ravishda ko'rsatishi mumkin.
3. Sizga kerak bo'lgan belgilar sonini cheklang: kamdan-kam ishlatiladigan shriftlar ma'lum belgilar bilan cheklanishi mumkin. Masalan, Open Sans-dagi "CSS Tutorial" sarlavhasini Google Fonts so'rovlar qatoriga & text= parametrini qo'shish orqali aniqlash mumkin: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. O'zgaruvchan shriftlarni ko'rib chiqing: O'zgaruvchan shriftlar vektor interpolyatsiyasidan foydalangan holda turli xil uslublar, og'irliklar va kursivlarni belgilaydi. Shrift fayli biroz kattaroq, lekin sizga faqat bitta kerak, bir nechta emas. Rekursiv shrift o'zgaruvchan shriftlarning moslashuvchanligini ko'rsatadi.
5. Shriftlarni mahalliy serveringizdan yuklab oling. Self-hosting shriftlari samaraliroq. Kamroq DNS qidirish talab qilinadi va siz barcha zamonaviy brauzerlar qo'llab-quvvatlaydigan WOFF2-ni yuklashni cheklashingiz mumkin. Eski brauzerlar (IE) OS shriftiga qaytishi mumkin.
6. OS shriftlarini ko'rib chiqing: Ushbu 500K veb shrifti ajoyib ko'rinishi mumkin, ammo agar siz Helvetica, Arial, Georgia yoki Verdana jamoat domeniga o'tsangiz, kimdir buni sezadimi? OS uchun xavfsiz yoki veb-xavfsiz shriftlar unumdorlikni oshirishning oson yo'lidir.

Tegishli shriftni yuklab olish opsiyasidan foydalanish

Veb-shriftlarni yuklash va qayta ishlash bir necha soniya vaqt olishi mumkin. Senga kerak:

1. Stilsiz matnni ko'rsatish (FOUT): Birinchi mavjud zaxira shrift birinchi bo'lib ishlatiladi, lekin veb shrifti tayyor bo'lganda almashtiriladi.
2. Ko'rinmas matnni ko'rsatish (FOIT): Veb shrifti tayyor bo'lmaguncha matn ko'rsatilmaydi. Bu zamonaviy brauzerlarda standart jarayon bo'lib, odatda zaxira shriftga qaytishdan oldin uch soniya kutadi.
   Ikkalasi ham mukammal emas.

Font-display CSS xususiyati va Google Font & display= sozlamasi muqobilni tanlashi mumkin:

• auto: Standart brauzer harakati (odatda FOIT).
• blok: samarali FOIT. Matn uch soniyagacha ko'rinmaydi. Shriftni almashtirish yo'q, lekin matn birozdan keyin paydo bo'lishi mumkin.
• almashtirish: samarali FOUT. Birinchi zaxira veb-shrift mavjud bo'lgunga qadar ishlatiladi. Matn darhol o'qilishi mumkin, ammo shriftni almashtirish effekti zerikarli bo'lishi mumkin. Shrift uslubi moslamasi xuddi shunday o'lchamdagi zaxirani aniqlash uchun ishlatilishi mumkin.
• Qayta tiklash: FOIT va FOUT o'rtasidagi kelishuv. Matn qisqa vaqt davomida (odatda 100ms) ko'rinmas bo'lib qoladi, so'ngra veb-shrift mavjud bo'lgunga qadar birinchi zaxira ishlatiladi.
• ixtiyoriy: Qayta tiklashga o'xshaydi, faqat shrift almashtirish mavjud emas. Veb shrifti faqat dastlabki davrda mavjud bo'lsa ishlatiladi. Birinchi sahifa ko'rinishida zaxira shrift ko'rsatiladi, keyingi sahifa ko'rinishlarida esa yuklab olingan va keshlangan veb shrift ishlatiladi.

Almashtirish, zaxiralash yoki ixtiyoriy foydalanish unumdorlikni sezilarli darajada oshirishi mumkin.

JS va CSS kodlarini onlayn optimallashtirish

Internetda juda ko'p onlayn xizmatlar mavjud. Bu bir necha daqiqada JavaScript va uslublar fayllarini siqish bo'yicha barcha muntazam ishlarni bajarishga qodir. Ularning barchasi kod bilan ishlash uchun o'z algoritmlariga ega. Bunday xilma-xillik fonida ikkita eng muhim xizmatlarni ajratib ko'rsatish mumkin. Ularning samarali siqish chegarasi shunga o'xshash raqobatdosh onlayn vositalardan ancha yuqori. Keling, ushbu ikkita veb-vositani batafsil ko'rib chiqaylik:

cssresizer.com
84% ning siqish samaradorligi yaqin raqobatchilarga nisbatan. Kodning amal qilish muddati sezilarli siqilish bilan ham saqlanib qoladi. Shunday qilib, siz ajoyib optimallashtirilgan kodni olishingiz mumkin. Ushbu vosita bilan ishlash intuitiv va bir nechta siqish usullari mavjud:

• Maksimal;
• tez;
• Dekompressiya;

Siz quyidagi yo'llar bilan siqishingiz mumkin:

• URL - manzil;
• Fayl yuklash;
• To'g'ridan-to'g'ri kod kiritish;

Refresh-sf.com

JavaScript, CSS va HTMLni kichiklashtirish uchun yana bir, ammo teng darajada kuchli veb-interfeys. Asbob ishlash uchun UglifyJS 2, Clean-CSS va HTML Minifier-dan foydalanadi. Bu holda siqishni samaradorligi 85% ga etadi, kodning amal qilish muddatini ko'rinadigan buzilishlarsiz. Siqish asbob oynasiga to'g'ridan-to'g'ri kodni kiritish orqali amalga oshirilishi mumkin.

CMS Wordpress plaginlari yordamida JS va CSS-ni kichiklashtiring

Hammamizga ma'lumki, u butun dunyo bo'ylab sezilarli taqsimotga ega. 2018 yilgi ma'lumotlarga ko'ra, bu sms etakchi o'rinni egallaydi. WordPress uchun maxsus optimallashtirish uchun bir nechta mashhur plaginlarni ko'rib chiqing:

Plaginni avtomatik optimallashtirish

HTML, JS va CSS optimallashtirish plaginlari. Bu CMS Wordpress-da saytlarni tezlashtirish uchun eng mashhur plaginlardan biridir. U oddiy va funktsional konfiguratsiya interfeysiga ega. Siqish jarayoni tezda sodir bo'ladi.

• Optimallashtirish (HTML, JS, CSS) va CDN sozlamalari.
• Statik resurslardan kulgichlarni, Google shriftlarini, so'rovlar qatorlarini olib tashlash.
• Tasvirlarni optimallashtirish qobiliyati.

Webcraftic Clearfy plagini

Oldingi plagin kabi eski emas. Lekin shunga o'xshash raqobatchilar orasida ham talab va mashhurdir. Webcraftic Clearfy - ancha murakkab konfiguratsiya interfeysiga ega. Eng yaxshi natijaga erishish uchun plaginlarning birlashtirilgan kombinatsiyasidan iborat.

Sozlamalar sahifalari menyu bo'limlariga bo'lingan. Shunday qilib, saytning muayyan qismlarini optimallashtirish mumkin, masalan, HTML. Ushbu plagin nima qilishi mumkin?

• Optimallashtirish (tasvirlar, JS, CSS, HTML va skriptlar);
• Kirillcha transliteratsiya va dublikatlarni olib tashlash. Alt atributlar bilan ishlash va mos robots.txt yaratish. Server sarlavhalari va ularning javoblari bilan ishlash.
• Talab qilinmagan WordPress vidjetlarini olib tashlash.
• WordPress versiyasini yashirish va statik so'rovlardan so'rov o'zgaruvchilarini olib tashlash. Muallif logini va administratorga kirish sahifasini yashirish.
• Sharhlarni global olib tashlash yoki tozalash. Izohlarda nazoratni saqlang.
• WordPress puls va yuqori boshqaruv panelini sozlash.
• Plagin komponentlarini boshqarish.

Xulosa qilib aytganda, ma'lum bir xulosaga kelish mumkin. Yuqoridagilarga asoslanib, js va css-ni siqish unchalik qiyin narsa emas. Ushbu harakatlar tufayli loyihangizning javob tezligi sezilarli darajada oshadi.

Ushbu maqolani o'qish:

• Veb-sahifa ish faoliyatini optimallashtirish
• Sayt tezligi uchun CSS-ni optimallashtirish - 9 usul

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