Kamakailan lamang, tinanong kami ng isa sa aming mga mambabasa kung paano nila mailipat ang mga JavaScript sa ibaba sa WordPress upang madagdagan ang kanilang iskor sa bilis ng pahina ng Google. Natutuwa kami na nagtanong sila, dahil tapat na nais naming isulat ang tungkol dito. Dati, usapan natin kung paano maayos na magdagdag ng mga estilo ng JavaScript at CSS sa WordPress. Sa artikulong ito, ipapakita namin sa iyo kung paano ililipat ang mga JavaScript sa ibaba sa WordPress, upang mapabuti mo ang iyong oras ng pag-load ng site at ang iyong iskor sa bilis ng iyong pahina ng Google.
Mga Pakinabang ng Paglilipat ng mga JavaScript sa Ika
Ang JavaScript ay isang programming language client side. Ito ay pinaandar at patakbuhin ng isang web browser ng user at hindi ng iyong web server. Kapag inilagay mo ang JavaScript sa itaas, maaaring mag-execute o magproseso ang mga browser ng JavaScript bago mai-load ang natitirang bahagi ng iyong pahina. Kapag ang mga JavaScript ay inilipat sa ibaba, ang iyong web server ay mabilis na magre-render ng pahina at pagkatapos ay mag-execute ng browser ng user ang mga JavaScript. Dahil ang lahat ng pag-render ng side ng server ay tapos na, ang JavaScript ay i-load sa background na ginagawa ang pangkalahatang pag-load nang mas mabilis.
Mapapabuti nito ang iyong bilis ng iskor kapag sinusubok sa bilis ng pahina ng Google o Yslow. Isinasasaalang-alang na ngayon ng Google at iba pang mga search engine ang bilis ng pahina bilang isa sa mga matruhan sa pagganap kapag nagpapakita ng mga resulta ng paghahanap. Nangangahulugan ito na ang mga website na nag-load nang mas mabilis ay lalabas nang higit pa sa mga resulta ng paghahanap.
Ang Wastong Daan ng Pagdaragdag ng Mga Script sa WordPress
Ang WordPress ay may isang malakas na enqueuing system na nagbibigay-daan sa mga developer ng tema at plugin na idagdag ang kanilang mga script sa queue at load ang mga ito kung kinakailangan. Ang maayos na mga script at estilo ay maaaring makabuluhang mapabuti ang iyong bilis ng pag-load ng pahina.
Upang ipakita sa iyo ang isang pangunahing halimbawa, magdaragdag kami ng isang maliit na JavaScript sa isang WordPress tema. I-save ang iyong JavaScript sa isang .js file at ilagay iyon .js file sa iyong tema js direktoryo. Kung ang iyong tema ay walang direktoryo para sa JavaScript, pagkatapos ay lumikha ng isa. Matapos ilagay ang iyong script file, i-edit ang iyong tema functions.php file at idagdag ang code na ito:
function wpb_adding_scripts () {
wp_register_script ('my-amazing-script', get_template_directory_uri (). '/js/my-amazing-script.js',''''1.1', true);
wp_enqueue_script ('my-amazing-script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');
Sa ganitong code, ginamit namin ang wp_register_script () function. Ang function na ito ay may mga sumusunod na parameter:
Upang idagdag ang script sa footer o ibaba ng isang pahina ng WordPress, ang kailangan mo lang gawin ay i-set ang $ in_footer parameter sa totoo .
Gumagamit din kami ng isa pang function get_template_directory_uri () na nagbabalik ng URL para sa direktoryo ng template. Ang function na ito ay dapat gamitin para sa enqueuing at pagrehistro ng mga script at estilo sa WordPress tema. Para sa mga plugin na gagamitin namin plugins_url () function.
Ang problema:
Ang problema ay na ang ilang mga beses WordPress plugins idagdag ang kanilang sariling JavaScript sa mga pahina sa loob
o sa loob ng katawan ng pahina. Upang ilipat ang mga script na iyon sa ibaba kailangan mong i-edit ang iyong mga file ng plugin at maayos na ilipat ang mga script sa ibaba.
Paghahanap ng Ang JavaScript Source
Buksan ang iyong site sa web browser at tingnan ang pinagmulan ng pahina. Makikita mo ang link sa file na JavaScript na nagpapahiwatig ng lokasyon at ang pinagmulan ng file. Halimbawa, ang screenshot sa ibaba ay nagsasabi sa amin na ang aming script ay kabilang sa isang plugin na tinatawag na ‘test-plugin101’. Ang script file ay matatagpuan sa js direktoryo.
Minsan makikita mo ang JavaScript idinagdag nang direkta sa pahina at hindi naka-link sa pamamagitan ng isang hiwalay na file na .js. Sa kasong iyon, kailangan mong i-deactivate ang lahat ng iyong mga plugin nang isa-isa. I-refresh ang pahina pagkatapos i-deactivate ang bawat plugin hanggang makita mo ang isa na nagdadagdag ng script sa iyong mga pahina. Kung ang JavaScript ay hindi nawawala kahit na pagkatapos i-deactivate ang lahat ng mga plugin, pagkatapos ay subukan upang lumipat sa isa pang tema upang makita kung ang JavaScript ay idinagdag ng iyong tema.
Lagyan ng Register at Enqueue Script
Sa sandaling natagpuan mo ang plugin o tema na nagdadagdag ng JavaScript sa seksyon ng header, ang susunod na hakbang ay upang malaman kung saan may isang tawag para sa file ang plugin. Sa isa sa iyong mga tema o PHP file ng plugin makikita mo ang isang tawag sa partikular na iyon .js file.
Kung ang plugin o tema ay gumagamit na ng enqueuing upang magdagdag ng JavaScript file, ang tanging kailangan mong gawin ay baguhin ang wp_register_script function sa iyong plugin o tema at idagdag ang totoo para sa parameter na $ in_footer. Ganito:
wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), '', '1.0', totoo);
Hinahayaan akong ipalagay na ang iyong plugin o tema ay pagdaragdag ng raw JavaScript sa header o sa pagitan ng nilalaman. Hanapin ang raw JavaScript code sa mga file ng plugin o tema, kopyahin ang JavaScript at i-save ito sa isang .js file. Pagkatapos ay gamitin wp_register_script () gumana tulad ng ipinakita sa itaas, upang ilipat ang JavaScript sa ibaba.
Tala ng editor: Mahalagang maunawaan na kapag gumawa ka ng mga pagbabago sa mga pangunahing file at i-update ang plugin, hindi na ma-override ang iyong mga pagbabago. Ang isang mas mahusay na paraan ng paggawa nito ay upang i-deregister ang script at muling irehistro ito mula sa mga function.php ng iyong tema. Tingnan ang tutorial na ito.
Bukod sa paglipat ng mga script sa footer, dapat mo ring isaalang-alang ang paggamit ng mas mabilis na social media plugin at mga tamad na imahe ng pag-load. Kasama na dapat mo ring gamitin ang W3 Total Cache at MaxCDN upang mapabuti ang bilis ng iyong site.
Inaasahan namin na ang artikulong ito ay nakatulong sa iyo na ilipat ang mga JavaScript sa ibaba sa WordPress at pagbutihin ang bilis ng iyong pahina. Para sa mga tanong at feedback mangyaring mag-iwan ng komento sa ibaba.