Ayusin ang Google PageSpeed Tanggalin ang pag-block ng pag-block ng JavaScript at CSS sa nasa itaas na nilalaman
- Malutas ang pag-block sa Javascript at CSS
- Tanggalin ang pag-block ng render ng JavaScript at CSS sa nasa itaas na nilalaman: ipakita kung paano ito ayusin
- I-load ang mga file na Javascript
- Mag-load ng CSS pagkatapos ng pag-load ng HTML
- Ipasa ang pagsusulit ng bilis ng site ng Google!
- Paano upang maalis ang mga mapagkukunan ng pag-block ng pag-render sa WordPress
- Magkaroon ng isang panlabas na system na-optimize ang iyong website para sa iyo
- Madalas Na Nagtanong
- Perpektong Chrome Lighthouse Score: Ano ang mangyayari? - video
- Mga komento (8)
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.comPagtukoy 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
- Magkaroon ng isang panlabas na system na i-optimize ang iyong website para sa iyo
- 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:
- I-defer ang pag-load ng Javascript files
- Mag-load ng CSS pagkatapos ng pag-load ng HTML
- 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.comMag-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.comUpang 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.comPaano 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 ditoAalisin 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 WordPressGayundin, 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!
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.
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?
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