Ayusin ang Google PageSpeed ​​Tanggalin ang pag-block ng pag-block ng JavaScript at CSS sa nasa itaas na nilalaman

Ang Google PageSpeed ​​[1] na pagsubok Tanggalin ang pag-render ng pag-block ng JavaScript at CSS sa nasa itaas na nilalaman ipanukala sa iyo upang maihatid ang mga JS at CSS file ng iyong site pagkatapos na ma-load ang HTML - at, samakatuwid, huwag i-pause ang iyong HTML loading upang i-download ang mga ito.


Malutas ang pag-block sa Javascript at CSS

Ang  Google PageSpeed   ​​[1] na pagsubok Tanggalin ang pag-render ng pag-block ng JavaScript at CSS sa nasa itaas na nilalaman ipanukala sa iyo upang maihatid ang mga JS at CSS file ng iyong site pagkatapos na ma-load ang HTML - at, samakatuwid, huwag i-pause ang iyong HTML loading upang i-download ang mga ito.

[1] - Mga Pananaw ng PageSpeed ​​- developer.google.com
Pagtukoy sa iskrip ng pag-block ngender: Ang mga script na na-load bago ang buong HTML DOM ay na-parse. Halimbawa, kasama ang mga script sa header o sa loob ng nilalaman, nang walang anumang tukoy na tagubilin para sa mga browser na antalahin ang pag-load ng script hanggang matapos ang pinturang HTML.

Tanggalin ang pag-block ng render ng JavaScript at CSS sa nasa itaas na nilalaman: ipakita kung paano ito ayusin

  1. Magkaroon ng isang panlabas na system na i-optimize ang iyong website para sa iyo
  2. Gumamit ng isang CDN na magsasagawa ng lahat ng posibleng mga pag-optimize sa iyong ngalan, kasama ang tatlong sumusunod na pag-optimize na kinakailangan upang ayusin ang pag-aalis ng mga mapagkukunan ng pag-block sa pag-render:
  3. I-defer ang pag-load ng Javascript files
  4. Mag-load ng CSS pagkatapos ng pag-load ng HTML
  5. Gumamit ng isang WordPress plugin

Mayroong maraming mga pag-optimize na kinakailangan upang ayusin ang pag-aalis ng mga mapagkukunan ng pag-block ng pag-render at maaaring nakakapagod na ipatupad ang mga ito sa iyong sarili - kasama, kailangan mong patuloy na maghanap ng mga bagong pagsubok na kasama sa Chrome LightHouse at  Google PageSpeed   ​​kasama ng iba pang mga pagsubok sa bilis ng pahina.

Walang umiiral na solusyon upang maalis ang mga mapagkukunan ng pag-block ng pag-render sa htaccess code dahil ang isyu ay nauugnay sa DOM, nangangahulugang nilalaman ng website, at ang pagkakasunud-sunod na na-load ang mga kasamang mapagkukunan, tulad ng Javascript at CSS, ngunit hindi lamang. Ang mga ito ay hindi maaaring ma-trigger sa htaccess, ngunit sa nilalaman lamang ng HTML DOM.

Kung malulutas mo ang mga isyung ito para sa desktop, sabay mong aalisin ang mga mapagkukunan ng pag-block ng pag-render para sa mobile dahil pareho ang eksaktong pareho!

Did you know that you can even have all these steps executed automatically for you by using an external  Ang bilis ng bilis ng site   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!

I-load ang mga file na Javascript

Upang mabawasan ang pag-load ng iyong JS file, maaari mong idagdag ang async o ipagpaliban ang pagtuturo sa iyong mga link sa script. Hindi masisiguro ng Async na ang mga ito ay nai-load sa parehong pagkakasunod-sunod - kung mayroon kang ilang mga script na dapat tumakbo isa pagkatapos ng isa, ang tagapagpaliban ay lalong kanais-nais upang magarantiya ang pagkakasunud-sunod:

[2] - Alisin ang Render-Blocking JavaScript | Mga Pananaw ng PageSpeed ​​| Mahusay na Mga Nag-develop - developer.google.com

Mag-load ng CSS pagkatapos ng pag-load ng HTML

Para ma-load ang CSS pagkatapos na maipadala ang buong HTML, ipinapayo ng Google ang piraso ng code na idaragdag sa dulo ng iyong HTML, halimbawa pagkatapos ng tag ng closing footer at bago ang body tag ng pagsasara:

[3] - I-optimize ang Paghahatid ng CSS | Mga Pananaw ng PageSpeed ​​| Mahusay na Mga Nag-develop - developer.google.com

Upang ma-optimize ang iyong website, isang magandang ideya din na alisin ang hindi ginagamit na CSS code, isang operasyon na maaaring nakakapagod kung wala kang kaalaman sa disenyo ng web. Kung hindi mo nilikha ang iyong tema ng website, maaaring maging mas maalam na gumamit ng panlabas na sistema upang alisin ang hindi nagamit na CSS code sa iyong mga pahina sa iyong ngalan, tulad ng EZOIC LEAP halimbawa, ang bagong (at libre) na bersyon ng kanilang kamangha-manghang site Bilis ng accelerator.

Ipasa ang pagsusulit ng bilis ng site ng Google!

Pinahintulutan ako na ipasa ang  Google PageSpeed   ​​[1] pagsubok Tanggalin ang pag-block ng JavaScript at CSS sa nilalaman na nasa itaas na bahagi (kasama ang Pag-cache ng browser na magagamit) sa isang website, na bumabangon mula sa iskor na 51 sa mobile ( Guhit 1) hanggang 72 (Guhit 2), at mula 59 (Guhit 3) hanggang 79 sa desktop (Guhit 4).

[4] - Ayusin ang pag-cache ng browser ng leverage ng Google PageSpeed ​​sa htaccess - Yoann Bierling, International SAP / Web Consultant - www.ybierling.com

Paano upang maalis ang mga mapagkukunan ng pag-block ng pag-render sa WordPress

Upang maalis ang mga mapagkukunan ng pag-block ng pag-render sa WordPress, kinakailangan upang mag-install ng isang plugin tulad ng JetPack.

Pagkatapos, pumunta sa mga pagpipilian, kung saan dapat kang maging isang administrator, at pumunta sa mga pagpipilian sa JetPack> Pagsusulat> Pagganap at Bilis> suriin Paganahin ang site accelerator, mapabilis ang mga oras ng pag-load ng imahe, mapabilis ang mga oras ng pag-load ng static na file, at paganahin ang tamad na pag-load para sa mga larawan.

Master Website Paglikha: Mag -enrol Ngayon!

Ibahin ang anyo ng iyong digital na presensya sa aming komprehensibong kurso sa paglikha ng website - simulan ang iyong paglalakbay sa pagiging isang dalubhasa sa web ngayon!

Mag -enrol dito

Ibahin ang anyo ng iyong digital na presensya sa aming komprehensibong kurso sa paglikha ng website - simulan ang iyong paglalakbay sa pagiging isang dalubhasa sa web ngayon!

Aalisin nito ang mga mapagkukunan ng pag-block ng pag-render sa WordPress at mas mabilis ang mga pahina ng pag-load sa pamamagitan ng pagpapahintulot sa JetPack na i-optimize ang iyong mga imahe at mapagsilbihan ang iyong mga imahe at mga static na file (tulad ng CSS at JavaScript) mula sa kanilang global na network ng mga server.

Paano Alisin ang pag-block ng pag-block ng JavaScript at CSS sa WordPress

Gayundin, huwag kalimutang ipagpaliban ang paglo-load ng mga imahe off-screen sa pamamagitan ng paggamit ng isang tamad na pag-andar ng pag-load. Habang ito ay ginagamit upang maging mahirap at mangailangan ng isang panlabas na library upang ipagpaliban ang paglo-load ng mga imahe off-screen, posible na ngayon natively sa HTML5!

Lazy Loading of Images: Ang mga imahe ng website ay hinihiling lamang sa server kapag nag-scroll ang user sa webpage at maaaring ipakita ang mga ito

Upang ipatupad ang tamad na paglo-load ng mga larawan sa iyong mga website, idagdag lamang ang mga halagang tamad sa mga katangian na naglo-load ng iyong mga larawan sa website, at ang mga kamakailang browser ay mauunawaan na ang mga imaheng ito ay dapat lamang hilingin at i-load ang mga ito ang mga placeholder ng imahe.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - Web Performance - Mozilla Developer Network.

Sa itaas ng na, ang tamad na paglo-load ay gumagana din sa iframes, at isang mahalagang pagpapatupad upang maalis ang mga mapagkukunan ng pag-block ng render mula sa iyong mga webpage.

Sa sandaling ang pag-render ng mga mapagkukunan ng pag-block ay magkakaroon ng mga tagubilin upang i-load pagkatapos ng pangunahing nilalaman, ibig sabihin ang HTML DOM, makakakuha ka ng maraming mga puntos sa pagsubok ng Google Lighthouse, ang pagsubok ng bilis ng mga pananaw ng pahina, o ang Google Core web vitals.

Magkaroon ng isang panlabas na system na-optimize ang iyong website para sa iyo

Alam mo ba na maaari mong talagang magkaroon ng lahat ng mga isyu sa  Google PageSpeed   ​​na nalutas sa iyong ngalan, nang walang labis na pagsisikap mula sa iyong site - maliban sa pagrehistro para sa isang libreng pagsubok at pagbabago ng iyong DNS?

Gamit ang teknolohiya ng Ezoic platform Speed ​​Speed ​​Accelerator, lahat ng karaniwang mga isyu sa  Google PageSpeed   ​​ay malulutas ng kanilang system, na magiging tagapamagitan sa pagitan ng iyong website at ng mga bisita. Susuriin nila ang web page para sa iyo bago ipakita ito sa iyong bisita.

Noong Abril 2021, ang Ezoic Paid Site Speed ​​Accelerator ay magiging libreng ezoic leap, at tulungan ang mga website na umaabot sa Core Web Vitals Green Scores nang walang bayad!

Maging berde sa pamamagitan lamang ng pagrehistro para sa isang libreng pagsubok sa Ezoic platform at subukan ito para sa iyong sarili - gagawin nila ang iyong website na maabot ang pinakamataas na pamantayan ng pag-optimize ng bilis ng pahina sa loob ng ilang araw: i-render ang susunod na henerasyon ng mga imahe ng webp, i-optimize ang CSS at JavaScript sa pamamagitan ng pag-alis ng hindi nagamit na CSS at JS, tamad na mga imahe ng pag-load, baguhin ang laki ng mga imahe, cache ang iyong mga pahina ng site, i-optimize ang mga font, pre-kumonekta sa lahat ng iyong mga kasama na site, at marami pa.

Walang kinakailangang credit card - ang kailangan mo lang gawin ay magparehistro nang libre at subukang subukan ito. Dagdag pa, kung ang iyong website ay kumita ng pera mula sa mga ad sa pagpapakita, sa tuktok ng paggawa ng iyong website nang mas mabilis, maaari ka ring makagawa mong kumita ng maraming beses nang mas maraming pera kaysa sa ginagawa mo sa Google AdSense sa pamamagitan ng pag-optimize sa iyong mga ad sa pag-aaral ng makina at advanced na intelektuwal na pag-intindi.

Madalas Na Nagtanong

Paano maalis ang render-blocking JavaScript at CSS sa itaas-ang-tiklop na nilalaman?
Upang maalis ang render-blocking JavaScript at CSS para sa itaas-ang-tiklop na nilalaman, dapat mong tiyakin na ang mga file ng JS at CSS ng iyong site ay na-load pagkatapos na ganap na mai-load ang HTML. Nangangahulugan ito na hindi pag -pause ang proseso ng pag -load ng HTML upang i -download ang mga file na ito. Maaari mong ipagpaliban ang mga file ng JavaScript na may async o defer na katangian, at para sa CSS, maaari kang gumamit ng tukoy na code upang mai -load ito pagkatapos ng HTML. Ang isang panlabas na sistema ng pag -optimize tulad ng Ezoic ay maaari ring awtomatikong hawakan ito.
Paano matatalakay ng mga web developer ang rekomendasyon ng Google Pagespeed upang maalis ang render-blocking JavaScript at CSS?
Maaaring ma-optimize ng mga web developer ang kanilang site sa pamamagitan ng pag-minify ng mga file ng JavaScript at CSS, gamit ang asynchronous loading para sa JavaScript, inlining ang mga kritikal na CSS nang direkta sa HTML, at ipinagpaliban ang paglo-load ng mga di-kritikal na CSS at mga file ng Javascript. Ang pagpapatupad ng mga diskarte na ito ay maaaring makabuluhang mapabuti ang mga oras ng pag -load at mga marka ng pahina.

Perpektong Chrome Lighthouse Score: Ano ang mangyayari?


Yoann Bierling
Tungkol sa may-akda - Yoann Bierling
Ang Yoann Bierling ay isang Web Publishing & Digital Consulting Professional, na gumagawa ng isang pandaigdigang epekto sa pamamagitan ng kadalubhasaan at pagbabago sa mga teknolohiya. Masigasig tungkol sa pagbibigay kapangyarihan sa mga indibidwal at organisasyon na umunlad sa digital na edad, hinihimok siya upang maihatid ang mga pambihirang resulta at magmaneho ng paglago sa pamamagitan ng paglikha ng nilalaman ng edukasyon.

Master Website Paglikha: Mag -enrol Ngayon!

Ibahin ang anyo ng iyong digital na presensya sa aming komprehensibong kurso sa paglikha ng website - simulan ang iyong paglalakbay sa pagiging isang dalubhasa sa web ngayon!

Mag -enrol dito

Ibahin ang anyo ng iyong digital na presensya sa aming komprehensibong kurso sa paglikha ng website - simulan ang iyong paglalakbay sa pagiging isang dalubhasa sa web ngayon!




Mga komento (8)

 2018-08-19 -  quranapk
Gustung-gusto ang pagbabasa ng iyong nilalaman na patuloy na mag-post - nakatulong ito sa akin na ayusin ang pag-aayos ng pag-block sa pag-render ng CSS
 2018-09-23 -  Monica
Kaya't ganito namin ito ginagawa, mahusay na malaman kung paano malutas ang pag-aalis ng mga mapagkukunan ng pag-block sa pag-render
 2018-09-25 -  Van
Mahusay, iyon talaga ang hinahanap ko, handa na akong alisin ang mga mapagkukunan ng pag-block ng rendering sa mobile
 2018-11-03 -  utumikaji0
Kamangha-mangha, oras na para sa akin upang subukan ito at ayusin ang alisin ang mga mapagkukunan ng pag-block sa pag-render!
 2019-01-12 -  Leo
Hindi alam kung paano salamat, ngunit iyon ay purong henyo, salamat - gumana ito sa WordPress upang alisin ang mga mapagkukunan ng pag-block sa pag-render
 2019-04-21 -  Ludanulema
Kumusta, nakita ko ang iyong artikulo at nakatulong ito sa akin na malutas ang problema sa pag-aalis ng mga mapagkukunang render-block sa PHP, salamat
 2019-06-12 -  animeg2Q
Susubukan ko ito ngayon, salamat sa pagbabahagi ng pag-aalis ng pag-aayos ng mga mapagkukunan sa pag-block
 2019-07-02 -  Gasfackele
Gumana ito ng maayos para sa akin, hindi na kailangan pang maghanap pa upang matanggal ang mga mapagkukunan ng pag-block sa pag-render sa HTML website

Mag-iwan ng komento