Google PageSpeed'ni tuzatish Yuqoridagi qatlamda renderlashni bloklash JavaScript-ni va CSS-ni o'chirib tashlash

Javascript va CSS-ni blokirovka qilishni hal qiling

Google PageSpeed ​​[1] testi Yuqori qatlamdagi renderni bloklash JavaScript-ni va CSSni yo'q qilish sizning saytingizning JS va CSS fayllarini HTML to'liq yuklanganidan keyin taqdim etishni taklif qiladi va shuning uchun HTML-ni yuklashni to'xtatib turmang ularni yuklab olish uchun.

Renderni blokirovka qiluvchi skript ta'rifi: to'liq HTML DOM-dan oldin yuklangan skriptlar. Masalan, sarlavhaga yoki tarkibga kiritilgan skriptlar, brauzerlar uchun skript yuklanishini HTML bo'yog'idan keyin kechiktirish uchun ko'rsatmalarsiz.

Renderni blokirovka qiluvchi JavaScript-ni va CSS-ni yuqoridagi kontentdan chiqarib tashlang: uni qanday tuzatishni ko'rsating

1. Tashqi tizim sizning veb-saytingizni siz uchun optimallashtiradi
   
2. Sizning nomingizdan barcha mumkin bo'lgan optimallashtirishlarni amalga oshiradigan CDN-dan foydalaning, shu jumladan render-blokirovka qiluvchi resurslarni bartaraf etish uchun zarur bo'lgan uchta optimallashtirish:
   
3. Javascript fayllarini yuklashni keyinga qoldiring
   
4. HTML yuklangandan keyin CSS-ni yuklang
   
5. WordPress plaginidan foydalaning
   

Renderni blokirovka qiluvchi resurslarni yo'q qilish uchun ularni tuzatish uchun juda ko'p optimallashtirishlar mavjud va ularni o'zingiz amalga oshirish qiyin bo'lishi mumkin - bundan tashqari siz doimiy ravishda Chrome LightHouse va Google PageSpeed-ga kiritilgan yangi testlarni boshqa sahifalar tezligi sinovlari bilan izlashingiz kerak bo'ladi.

Htaccess kodidagi renderlashni blokirovka qiluvchi resurslarni yo'q qilish uchun mavjud echim yo'q, chunki bu muammo veb-sayt mazmuni va Javascript va CSS kabi kiritilgan resurslarni yuklash tartibi degan ma'noni anglatuvchi DOM bilan bog'liq, lekin faqatgina emas. Bularni Htaccess-da ishga tushirish mumkin emas, faqat HTML DOM tarkibida.

Agar siz ushbu muammolarni ish stoli uchun hal qilsangiz, siz mobil qurilmalar uchun blokirovka qiluvchi resurslarni yo'q qilasiz, chunki ikkalasi ham bir xil!

Did you know that you can even have all these steps executed automatically for you by using an external  Sayt tezligini tezlatgich   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Javascript fayllarini yuklashni keyinga qoldiring

JS fayllaringizning yuklanishini uzaytirish uchun [2], skriptlaringizning bog'lanishlariga vaqtinchalik yoki vaqtincha ko'rsatmalar qo'shishingiz mumkin. Async bir xil ketma-ketlikda yuklanganligiga kafolat bermaydi - shuning uchun agar siz bir-birining ortidan ishlashi kerak bo'lgan bir nechta skriptga ega bo'lsangiz, uni ketma-ketligini kafolatlash afzalroq:

HTML yuklanishidan keyin CSS-ni yuklang

HTML to'liq nusxa ko'chirilgandan so'ng CSSni yuklab olish uchun Google ushbu kod qismini HTML oxirida kiritish uchun taklif qiladi, masalan, pastki qismni yopish yorlig'i va tanani yopish yorlig'i oldidan:

Veb-saytingizni optimallashtirish uchun foydalanilmagan CSS kodini, agar siz veb-dizaynda bilimga ega bo'lmasa, zeriktirmaydigan CSS kodini olib tashlash juda yaxshi fikr. Agar siz o'zingizning veb-saytingizni o'zingiz yaratmagan bo'lsangiz, sizning sahifangizdagi sahifalaringizda foydalanililmagan CSS kodini ishlatish uchun tashqi tizimni olib tashlash uchun tashqi tizimni olib tashlash uchun tashqi tizimni olib tashlash oqilona bo'lishi mumkin. Masalan, ularning ajoyib sayti Tezlik tezlatgich.

Google saytining tezligini sinab ko'ring!

Bu menga  Google PageSpeed   ​​[1] testidan o'tishni ruxsat berdi. Veb-saytga veb-saytga yuqorida ko'rsatilgan tarkibdagi (Leverage brauzerini keshlash bilan birga [4]) JavaScript-ni va CSS-ni bloklashni o'chirib qo'ying. 1-rasmda 72-rasmga (2-rasm) va stol ustidagi 59 (rasm 3) dan 79 gacha (4-rasm).

WordPress-da render-blokirovka qilish resurslarini qanday yo'q qilish kerak

WordPress-da render-blokirovkalash resurslarini yo'q qilish uchun JetPack kabi plaginni o'rnatish kerak.

Keyin, administrator bo'lishi kerak bo'lgan variantlarga o'ting va JetPack imkoniyatlari> Yozish> Ishlash va Tezlik-ga o'tish-sayt tezlashtiruvchisini yoqish-ni tekshirib ko'ring, rasm yuklanish vaqtlarini tezlashtiring, statik faylni yuklash vaqtlarini tezlashtiring va rasmlar.

Seo asoslarini o'rganing: bugun ro'yxatdan o'ting!

O'zingizning veb-sayt asoslari va trafik asoslarini, bizdagi asosiy asoslar kursi bilan o'zlashtirishimiz bilan o'zlashtirish.

Seo-ni o'rganishni boshlang

Bu JetPack'ning rasmingizni optimallashtirishga va tasvirlaringiz va statik fayllaringizga (CSS va JavaScript kabi) xizmat ko'rsatuvchi global serverlardan xizmat qilishiga imkon berib, WordPress-da renderlashni bloklash manbalarini yo'q qiladi va sahifalarni tezroq yuklab qo'yadi.

Bundan tashqari, dangasa yuklash funktsiyasi yordamida ekranni yuklash tugmalarini yuklashni kechiktirishni unutmang. Bu qiyin bo'lib, tashqi kutubxonani talab qiladi, u ekranni o'chirishni qoldirib, hozirda HTML5-da mumkin!

Veb-saytlaringizga dangasa rasmlarni amalga oshirish uchun, shunchaki veb-saytingizdagi rasmlarni yuklash uchun laroq qiymatlarni qo'shing va agar ular ko'rsatilmagan bo'lsa, bu rasmlarni faqat talab qilinsa, shuni anglatadiki, agar foydalanuvchi pastga tushsa Tasvir pochkri.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Buning ustiga, dangasa yuklash, shuningdek iframmlar bilan ishlaydi va veb-sahifalaringizda ko'rsatilgan to'siqlarni bartaraf etish uchun muhim amalga oshirish.

Agar blokirovka qilingan resurslar HTML MBni anglatsa HTML MOM sinovidan so'ng, siz allaqachon Google Lighthouse testida juda ko'p ball to'playsiz, yoki Google Core Veb qiymatiga ega bo'lasiz.

O'zingizning veb-saytingizni optimallashtirish uchun tashqi tizimga ega bo'ling

Siz bilasizmi, barcha  Google PageSpeed   ​​muammolarini sizning nomingizdan saytingizdan ko'p kuch sarf qilmasdan hal qilishingiz mumkin - bepul sinov uchun ro'yxatdan o'tish va DNS-ni o'zgartirish bundan mustasno?

Ezoic platformasi Site Speed ​​Accelerator texnologiyasidan foydalangan holda, odatdagi Google PageSpeed-ning barcha muammolari ularning tizimi orqali hal qilinadi, bu sizning veb-saytingiz va tashrif buyuruvchilar o'rtasida vositachi bo'ladi. Ular sizning veb-sahifangizni tashrif buyuruvchingizga ko'rsatmasdan oldin uni optimallashtiradi.

Ezoic platformasida bepul sinov uchun ro'yxatdan o'ting va o'zingizni sinab ko'ring - yashil rangga aylaning - ular sizning veb-saytingizni bir necha kun ichida sahifa tezligini optimallashtirishning eng yuqori standartlariga erishishiga imkon beradi: keyingi avlod veb-sahifalarida rasmlarni taqdim etish, foydalanilmagan CSS-ni o'chirib CSS va JavaScript-ni optimallashtirish. va JS, dangasa rasmlarni yuklash, rasmlarning hajmini o'zgartirish, sayt sahifalarini keshlash, shriftlarni optimallashtirish, kiritilgan barcha saytlarga oldindan ulanish va boshqalar.

Kredit karta talab qilinmaydi - siz ro'yxatdan o'tishingiz va uni sinab ko'rishingiz shart. Bundan tashqari, agar sizning veb-saytingiz reklama reklamalaridan pul ishlayotgan bo'lsa, veb-saytingizni tezroq qilishdan tashqari, ular sizning reklamalaringizni mashina o'rganish va ilg'or sun'iy intellekt yordamida optimallashtirish orqali Google AdSense-ga qaraganda bir necha baravar ko'proq pul ishlashga imkon beradi.

Tez-Tez Beriladigan Savollar

Yuqoridagi tarkibdagi JavaScript va CSS-ni qanday bartaraf etish kerak?

Yuqoridagi katlama tarkibidagi JavaScript va CSS-ni o'chirish uchun siz saytingizning JS va CSS fayllari to'liq yuklanganidan keyin yuklanganligini ta'minlashingiz kerak. Bu fayllarni yuklab olish uchun HTML yuklash jarayonini to'xtatib qo'ymaslik degani emas. Siz Async yoki deflatsiya atributi bilan JavaScript fayllarini kechiktirishingiz mumkin va CSS uchun uni HTML-dan keyin yuklash uchun maxsus koddan foydalanishingiz mumkin. Ezoic kabi tashqi optimiyalashtirish tizimi buni avtomatik ravishda ham bajarishi mumkin.

Qanday qilib veb-dasturchilar JavaScript va CSS-ni bartaraf etish uchun GooglePeeeedning tavsiyalarini qanday yuborishlari mumkin?

Veb dasturchilar Javascript va CSS-ni to'g'ridan-to'g'ri HTML-ga yo'naltirish va kridment bo'lmagan CSS va JavaScript fayllarini yuklash orqali o'z saytlarini optimallashtirishlari mumkin. Ushbu strategiyalarni amalga oshirish yuklarni yuklash va jadvallar sonini sezilarli darajada yaxshilaydi.

Maksimal Chrome Lighthouse ball: Nima bo'ladi?