Gusto mo bang alisin ang pag-block ng pag-block ng JavaScript at CSS sa WordPress? Kung susubukan mo ang iyong website sa mga pag-uunawa ng Google PageSpeed, malamang na makikita mo ang isang mungkahi upang maalis ang mga pag-block ng pag-render ng pag-render at CSS. Sa artikulong ito, ipapakita namin sa iyo kung paano madaling ayusin ang pagharang ng JavaScript at CSS sa WordPress upang mapabuti ang iyong iskor sa Google PageSpeed.
Ano ang Pagharang-Pag-block ng JavaScript at CSS?
Ang bawat site ng WordPress ay may isang tema at mga plugin na nagdadagdag ng mga file ng JavaScript at CSS sa front-end ng iyong website. Maaaring dagdagan ng mga script na ito ang oras ng pagkarga ng pahina ng iyong site, at maaari rin nilang pigilan ang rendering ng pahina.
Ang browser ng isang user ay kailangang i-load ang mga script at CSS bago i-load ang natitirang bahagi ng HTML sa pahina. Nangangahulugan ito na ang mga gumagamit sa isang mas mabagal na koneksyon ay kailangang maghintay nang ilang milliseconds upang makita ang pahina.
Ang mga script at stylesheets ay tinutukoy bilang pag-block ng JavaScript at CSS.
Ang mga may-ari ng website na nagsisikap na makamit ang iskor sa Google PageSpeed ng 100 ay kailangang ayusin ang isyung ito upang makuha ang perpektong iskor.
Ano ang Google PageSpeed Score?
Ang Google PageSpeed Insights ay isang online na tool na nilikha ng Google upang tulungan ang mga may-ari ng website na i-optimize at subukan ang kanilang mga website. Sinusuri ng tool na ito ang iyong website laban sa mga alituntunin ng Google para sa bilis at nag-aalok ng mga mungkahi upang mapabuti ang oras ng pagkarga ng pahina ng iyong site.
Nagpapakita ito sa iyo ng iskor batay sa bilang ng mga patakaran na ipinasa ng iyong site. Karamihan sa mga website ay may isang lugar sa pagitan ng 50-70. Gayunpaman, ang ilang mga may-ari ng website ay napipilitang makamit ang 100 (ang pinakamataas na puntos ay maaaring puntos).
Kailangan Mo ba ang Perpektong “100” ng Kalidad ng Google PageSpeed?
Ang layunin ng mga pananaw ng Google PageSpeed ay magbigay sa iyo ng mga alituntunin upang mapabuti ang bilis at pagganap ng iyong website. Hindi mo kinakailangang sundin nang husto ang mga patakarang ito.
Tandaan na ang bilis ay isa lamang sa maraming mga sukatan ng SEO na makakatulong sa Google na matukoy kung paano i-ranggo ang iyong website. Ang bilis ng dahilan ay napakahalaga ay dahil ito ay nagpapabuti sa karanasan ng gumagamit sa iyong site.
Ang isang mas mahusay na karanasan ng user ay nangangailangan ng higit pa kaysa sa bilis lamang. Kailangan mo ring mag-alok ng kapaki-pakinabang na impormasyon, mas mahusay na interface ng gumagamit, at makatawag pansin na nilalaman sa teksto, mga imahe, at mga video.
Ang iyong layunin ay dapat na lumikha ng isang mabilis na website na nag-aalok ng mahusay na karanasan ng user.
lugar
Inirerekumenda namin na gamitin mo ang mga tuntunin ng Google Pagespeed bilang mga suhestiyon, at kung maaari mong ipatupad ang mga ito nang madali nang hindi giniba ang karanasan ng user, pagkatapos ay mahusay iyon. Kung hindi man, dapat mong sikaping gawin hangga’t kaya mo at pagkatapos ay huwag mag-alala tungkol sa iba.
Ang pagkakaroon ng sinabi na, tingnan natin kung ano ang maaari mong gawin upang ayusin ang pag-block sa pag-block ng JavaScript at CSS sa WordPress.
Sakop namin ang dalawang mga pamamaraan na ayusin ang pag-render sa pag-block ng JavaScript at CSS sa WordPress. Maaari mong piliin ang isa na pinakamahusay na gumagana para sa iyong website.
1. Ayusin ang I-render ang Pag-block ng Mga Script at CSS sa Autoptimize
Ang pamamaraan na ito ay mas simple at inirerekomenda para sa karamihan ng mga gumagamit.
Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang Autoptimize plugin. Para sa higit pang mga detalye
Sa pagsasaaktibo, kailangan mong bisitahin ang Mga Setting »Autoptimize pahina upang i-configure ang mga setting ng plugin.
Maaari mong simulan sa pamamagitan ng pagsuri sa kahon sa tabi ng Mga Pagpipilian sa JavaScript at Mga Pagpipilian sa CSS at pagkatapos ay mag-click sa pindutan ng save na pagbabago.
Maaari mo na ngayong subukan ang iyong website gamit ang tool na PageSpeed. Kung mayroon pa ring mag-render ng mga script ng pag-block, kailangan mong bumalik sa pahina ng mga setting ng plugin at mag-click sa pindutan ng ‘Ipakita ang Mga Advanced na Setting’ sa itaas.
Dito maaari mong payagan ang plugin na isama ang inline JS at alisin ang mga script na ibinukod bilang default tulad ng seal.js o jquery.js.
Susunod, mag-scroll pababa sa opsyon sa CSS at payagan ang plugin upang pagsama-sama ang inline na CSS.
Mag-click sa pindutan ng ‘I-save ang mga pagbabago at Empty Cache’ upang i-save ang iyong mga pagbabago at walang laman na cache ng plugin.
Sa sandaling tapos ka na, magpatuloy at suriin muli ang iyong website gamit ang tool na PageSpeed.
Tiyakin na lubusan mong susubukan ang iyong website upang makita na walang sira sa pamamagitan ng pag-optimize ng iyong mga JavaScript o CSS.
Paano ito gumagana?
Awtomatikong i-optimize ang lahat ng enqueued JavaScript at CSS. Pagkatapos nito, lumilikha ito ng mga minimong CSS at JavaScript na mga file at naghahain ng mga naka-cache na kopya sa iyong website bilang async o ipinagpaliban.
Pinapayagan ka nito na ayusin ang pag-block ng pag-block ng mga script at mga estilo ng isyu. Gayunpaman, mangyaring tandaan na maaaring makaapekto ito sa pagganap o hitsura ng iyong website.
2. Ayusin ang I-render ang Pag-block ng JavaScript gamit ang W3 Kabuuang Cache
Ang pamamaraang ito ay nangangailangan ng kaunting trabaho at inirerekomenda para sa mga gumagamit na gumagamit ng W3 Total Cache plugin sa kanilang website.
Una kailangan mong i-install at i-activate ang W3 Total Cache plugin. Kung kailangan mo ng tulong
Susunod, kailangan mong bisitahin Pagganap »Pangkalahatang Mga Setting pahina at mag-scroll pababa upang i-Minify ang seksyon.
Una kailangan mong suriin ang ‘Paganahin’ sa tabi ng pagpipiliang Minify at pagkatapos ay piliin ang ‘Mano-manong’ para sa minify mode option.
Mag-click sa pindutang i-save ang lahat ng mga setting upang i-imbak ang iyong mga setting.
Susunod, kailangan mong idagdag ang mga script at CSS na nais mong i-minify.
Maaari mong makuha ang mga URL ng lahat ng mga script at mga stylesheet na nagreretiro mula sa tool ng Google PageSpeed Insights.
Sa ilalim ng mga suhestiyon kung saan sinasabi nito: ‘Tanggalin ang pag-block ng JavaScript at CSS sa nasa itaas na nilalaman’, mag-click sa ‘Ipakita kung paano ayusin’. Ipapakita nito sa iyo ang listahan ng mga script at stylesheet.
Dalhin ang iyong mouse sa isang script at ipapakita nito sa iyo ang buong URL. Maaari mong piliin ang URL na ito at pagkatapos ay gamitin ang mga pindutan ng CTRL + C (Command + C sa Mac) ng iyong keyboard upang kopyahin ang URL.
Ngayon magtungo sa iyong WordPress admin area at pumunta sa Pagganap »Minify pahina.
Una kailangan mong magdagdag ng mga file ng JavaScript na gusto mong minimin. Mag-scroll pababa sa JS seksyon at pagkatapos ay sa ilalim ng ‘Operations sa mga lugar’ itakda ang uri ng embed sa ‘Non-blocking async’ para sa
seksyon.
Susunod, kailangan mong mag-click sa pindutang ‘Magdagdag ng script’ at pagkatapos ay magsimulang magdagdag ng mga URL ng script na kinopya mo mula sa tool ng Google PageSpeed.
Sa sandaling tapos ka na, mag-scroll pababa sa seksyon ng CSS at pagkatapos ay mag-click sa pindutang ‘Magdagdag ng isang stylesheet’. Magsimulang magdagdag ng mga URL ng stylesheet na kinopya mo mula sa tool ng Google PageSpeed.
Ngayon mag-click sa pindutan ng ‘I-save ang mga setting at linisin ang cache’ upang iimbak ang iyong mga setting.
Bisitahin ang tool ng Google PageSpeed at subukan muli ang iyong website.
Tiyakin na subukan mo rin ang iyong website nang lubusan upang makita na ang lahat ay gumagana nang maayos.
Pag-troubleshoot
Depende sa kung paano ang mga plugin at ang iyong mga tema ng WordPress ay gumagamit ng JavaScript at CSS, maaari itong maging lubos na mahirap na ganap na ayusin ang lahat ng pag-block sa pagharang ng mga isyu sa JavaScript at CSS.
Habang ang mga tool sa itaas ay makakatulong, maaaring kailanganin ng iyong mga plugin ang ilang mga script sa ibang antas ng priority upang gumana nang maayos. Sa kasong iyon, maaaring masira ng mga solusyon sa itaas ang iyong mga plugin o maaari silang kumilos nang hindi inaasahan.
Maaari pa ring ipakita sa iyo ng Google ang ilang mga isyu tulad ng pag-optimize ng paghahatid ng CSS para sa itaas ng fold na nilalaman. Ang autoptimize ay nagbibigay-daan sa iyo upang ayusin na sa pamamagitan ng manu-manong pagdaragdag ng inline CSS kinakailangan upang ipakita ang itaas na bahagi ng lugar ng iyong tema.
Gayunpaman, ito ay maaaring maging mahirap upang malaman kung ano ang CSS code na kailangan mong ipakita sa itaas ng fold nilalaman.
Iyon lang