Cum să mutați JavaScript în partea de jos sau subsol în WordPress

Recent, unul dintre cititorii noștri ne-a întrebat cum pot muta JavaScript-urile în partea de jos în WordPress pentru a-și crește scorul de viteză al paginii Google. Suntem bucuroși că au cerut, pentru că sincer am vrut să scriem despre asta. Anterior, am vorbit despre cum să adăugăm corect JavaScript și stilurile CSS în WordPress. În acest articol, vă vom arăta cum să mutați JavaScript în partea de jos în WordPress, astfel încât să puteți îmbunătăți timpul de încărcare a site-ului dvs. și scorul de viteză al paginii Google.

Beneficii ale deplasării JavaScript în partea de jos

JavaScript este un limbaj de programare pentru client. Acesta este executat și rulat de browser-ul web al unui utilizator și nu de serverul dvs. web. Când puneți JavaScript în partea superioară, browserele pot executa sau procesa JavaScript înainte de încărcarea restului paginii. Când JavaScript-urile sunt mutate în partea de jos, serverul dvs. Web va repeta rapid pagina și apoi browser-ul utilizatorului va executa JavaScript. Deoarece toate redarea pe server a fost deja făcută, JavaScript se va încărca în fundal, făcând sarcina globală mai rapidă.

Acest lucru va îmbunătăți scorul de viteză atunci când testează cu viteza de pagină Google sau Yslow. Google și alte motoare de căutare iau în considerare acum viteza paginii ca una dintre matricile de performanță atunci când afișează rezultatele căutării. Aceasta înseamnă că site-urile care se încarcă mai repede vor apărea mai vizibil în rezultatele căutării.

Modul corect de adăugare de script-uri în WordPress

WordPress are un sistem puternic de enqueuing care permite dezvoltatorilor de tematici și plugin-uri să adauge scripturile lor în coadă și să le încarce după cum este necesar. Încadrarea corectă a scripturilor și stilurilor poate îmbunătăți în mod semnificativ viteza de încărcare a paginii.

Pentru a vă arăta un exemplu de bază, vom adăuga un pic JavaScript într-o temă WordPress. Salvați JavaScript într-o .js fișier și locul asta .js fișier în tema ta js director. Dacă tema dvs. nu are un director pentru JavaScript, creați unul. După plasarea fișierului de script, modificați temele functions.php fișier și adăugați acest cod:

 (wap_adding_scripts) wp_register_script ('my-uimazing-script', get_template_directory_uri (). '/js/my-amazing-script.js',",'1', true); wp_enqueue_script ); add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); 

În acest cod, am folosit funcția wp_register_script (). Această funcție are următorii parametri:

Pentru a adăuga scriptul în subsolul sau în partea de jos a paginii WordPress, trebuie doar să setați $ in_footer parametru pentru Adevărat.

Am folosit și o altă funcție get_template_directory_uri () care returnează adresa URL pentru directorul șablon. Această funcție ar trebui utilizată pentru înscrierea și înregistrarea de scripturi și stiluri în teme WordPress. Pentru pluginurile pe care le vom folosi plugins_url () funcţie.

Problema:

Problema este că uneori pluginurile WordPress își adaugă propriul JavaScript spre paginile din interiorul sau în interiorul corpului paginii. Pentru a muta aceste scripturi în partea de jos, trebuie să editați fișierele plugin și să mutați scripturile în partea de jos.

Găsirea sursei JavaScript

Deschideți site-ul în browserul web și vizualizați sursa paginii. Veți vedea legătura la fișierul JavaScript care indică locația și originea fișierului. De exemplu, captura de ecran de mai jos ne spune că scriptul nostru aparține unui plugin numit "test-plugin101". Fișierul script este situat în js director.

Uneori veți vedea că JavaScript este adăugat direct în pagină și nu este conectat printr-un fișier .js separat. În acest caz, va trebui să dezactivați toate pluginurile unul câte unul. Actualizați pagina după dezactivarea fiecărui plugin până când găsiți cel care adaugă scriptul în paginile dvs. Dacă JavaScript nu dispare chiar după dezactivarea tuturor pluginurilor, încercați să treceți la o altă temă pentru a vedea dacă JavaScript este adăugat de tema dvs..

Înregistrați și încorporați scripturile

Odată ce ați găsit pluginul sau tema care adaugă JavaScript în secțiunea antet, următorul pas este să aflați unde pluginul are un apel pentru fișier. Într-una dintre fișierele temei sau plugin-ului dvs. PHP veți vedea un apel către acel particular .js fişier.

Dacă pluginul sau tema utilizează deja enqueuing pentru a adăuga fișierul JavaScript, atunci tot ce trebuie să faceți este să modificați funcția wp_register_script în plugin sau temă și să adăugați adevărat pentru parametrul $ in_footer. Asa:

 wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), ',' 1.0 ', true); 

Să presupunem că pluginul sau tema dvs. adaugă JavaScript în antet sau între conținut. Găsiți codul JavaScript în fișierul plugin sau tema, copiați JavaScript și salvați-l într-un .js fişier. Apoi folosiți wp_register_script () cum se arată mai sus, pentru a muta JavaScript în partea de jos.

Nota editorului: Este important să înțelegeți că atunci când faceți modificări în fișierele de bază și actualizați pluginul, modificările dvs. nu vor fi suprascrise. O modalitate mai bună de a face acest lucru ar fi să dezarhivați scriptul și să îl reînregistrați din fișierul functions.php al temei. Vedeți acest tutorial.

În afară de mutarea scripturilor în subsol, ar trebui să luați în considerare și utilizarea unui plug-in social media mai rapid și a imaginilor încărcate leneș. În același timp, ar trebui să utilizați și W3 Total Cache și MaxCDN pentru a îmbunătăți viteza site-ului.

Sperăm că acest articol v-a ajutat să mutați JavaScript în partea de jos în WordPress și să vă îmbunătățiți viteza paginii. Pentru întrebări și feedback, lăsați un comentariu mai jos.