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.

[1] - PageSpeed ​​Insights - developers.google.com
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:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Renderni blokirovka qiluvchi JavaScript-ni o'chirish | PageSpeed ​​Insights | Yaxshi ishlab chiquvchilar - developers.google.com

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:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[3] - CSS-ni etkazib berishni optimallashtirish | PageSpeed ​​Insights | Yaxshi ishlab chiquvchilar - developers.google.com

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).

[4] - Google PageSpeed ​​brauzerini htaccess-da keshlashni tuzatish - Yoann Bierling, xalqaro SAP / veb-maslahatchi - www.ybierling.com

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.

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.

WordPress-da renderlashni bloklash JavaScript-ni va CSS-ni qanday yo'q qilish kerak

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!

Rasmlarning dangasa yuklanishi: veb-sayt rasmlari faqat veb-sahifada aylantirganda serverga so'rov o'tkaziladi va ularni namoyish qilishi 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>
Dangasa yuklash - Veb-chiqish - Mozilla ishlab chiquvchi tarmog'i

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.

2021 yil aprel oyida Ezoik pullik Saytning tezlatuvchisi Ezoic Leap bo'ladi va yadro veb-o'yiniga etib boradigan veb-saytlarga Green Cents-ga kirishga yordam beradi!

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.

Maksimal Chrome Lighthouse ball: Nima bo'ladi?





Izohlar (8)

 2018-08-19 -  quranapk
O'zingizning kontentingizni o'qishni yaxshi ko'raman, xabar yuborishni davom eting - bu menga CSS-ni blokirovka qilishni tuzatishga yordam berdi
 2018-09-23 -  Monica
Shunday qilib, biz buni qanday amalga oshirmoqdamiz, blokirovka qiluvchi resurslarni yo'q qilishni qanday hal qilishni bilish juda yaxshi
 2018-09-25 -  Van
Ajoyib, men aynan shu narsani qidirgan edim, endi mobil qurilmada blokirovka qiluvchi resurslarni yo'q qilishga tayyorman
 2018-11-03 -  utumikaji0
Ajablanarlisi, endi men uni sinab ko'rish va blokirovka qiluvchi resurslarni yo'q qilish uchun vaqt keldi!
 2019-01-12 -  Leo
Sizga qanday minnatdorchilik bildirishni bilmayman, lekin bu sof daho, rahmat - u WordPress-da render blokirovka qiluvchi resurslarni olib tashlash uchun ishladi
 2019-04-21 -  Ludanulema
Salom, men sizning maqolangizni ko'rdim va bu menga PHP-dagi blokirovka qiluvchi resurslarni yo'q qilish muammosini hal qilishga yordam berdi, rahmat
 2019-06-12 -  animeg2Q
Men hozir sinab ko'raman, bu o'chirib tashlangan render-blokirovka qiluvchi resurslarni baham ko'rganingiz uchun tashakkur
 2019-07-02 -  Gasfackele
Bu men uchun yaxshi ishladi, HTML veb-saytida blokirovka qiluvchi resurslarni yo'q qilish uchun boshqa qarashga hojat yo'q

Fikr qoldiring