Recent, unul dintre cititorii noștri ne-a întrebat cum pot muta JavaScript-urile în partea de jos în WordPress pentru a le crește scorul de viteză a paginii Google. Ne bucurăm că au întrebat, pentru că, sincer, voiam să scriem despre asta. Anterior, am discutat despre cum să adăugați corect JavaScript-uri și stiluri CSS în WordPress. În acest articol, vă vom arăta cum să mutați JavaScript-urile în partea de jos în WordPress, astfel încât să puteți îmbunătăți timpul de încărcare al site-ului dvs. și scorul de viteză a paginii Google.
Beneficiile mutării scripturilor JavaScript în partea de jos
JavaScript este un limbaj de programare pe partea clientului. Este executat și rulat de browserul web al utilizatorului și nu de serverul tău web. Când plasezi JavaScript în partea de sus, browserele pot executa sau procesa JavaScript înainte de a încărca restul paginii tale. Când JavaScript-urile sunt mutate în partea de jos, serverul tău web va reda rapid pagina, iar apoi browserul utilizatorului va executa JavaScript-urile. Deoarece toată redarea pe partea serverului este deja finalizată, JavaScript-ul se va încărca în fundal, făcând încărcarea generală mai rapidă.
Acest lucru va îmbunătăți scorul de viteză atunci când testați cu Google Page Speed sau Yslow. Google și alte motoare de căutare iau acum în considerare viteza paginii ca una dintre metricile de performanță atunci când afișează rezultatele căutării. Acest lucru înseamnă că site-urile web care se încarcă mai repede vor apărea mai proeminent în rezultatele căutării.
Modul corect de a adăuga scripturi în WordPress
WordPress are un sistem puternic de înregistrare (enqueuing) care permite dezvoltatorilor de teme și plugin-uri să adauge scripturile lor în coadă și să le încarce la nevoie. Înregistrarea corectă a scripturilor și stilurilor poate îmbunătăți semnificativ viteza de încărcare a paginii tale.
Pentru a vă arăta un exemplu de bază, vom adăuga un mic JavaScript într-o temă WordPress. Salvați JavaScript-ul într-un fișier .js și plasați acel fișier .js în directorul js al temei dvs. Dacă tema dvs. nu are un director pentru JavaScript-uri, creați unul. După ce ați plasat fișierul script, editați fișierul functions.php al temei dvs. și adăugați acest cod:
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' );
În acest cod, am folosit funcția wp_register_script(). Această funcție are următorii parametri:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Pentru a adăuga scriptul în subsol sau în partea de jos a unei pagini WordPress, tot ce trebuie să faceți este să setați parametrul $in_footer la true.
Am folosit, de asemenea, o altă funcție get_template_directory_uri() care returnează URL-ul directorului temei. Această funcție ar trebui utilizată pentru înregistrarea și înregistrarea scripturilor și stilurilor în temele WordPress. Pentru plugin-uri vom folosi funcția plugins_url().
Problema:
Problema este că uneori pluginurile WordPress adaugă propriul JavaScript pe pagini în interiorul <head> sau în interiorul corpului paginii. Pentru a muta aceste scripturi în partea de jos, trebuie să editați fișierele pluginului dvs. și să mutați corespunzător scripturile în partea de jos.
Găsirea sursei JavaScript
Deschideți site-ul în browserul web și vizualizați codul sursă al paginii. Veți vedea linkul către fișierul JavaScript indicând locația și originea fișierului. De exemplu, capturile de ecran de mai jos ne spun că scriptul nostru aparține unui plugin numit „test-plugin101”. Fișierul script este localizat în directorul js.
Uneori veți vedea JavaScript adăugat direct în pagină și nu legat printr-un fișier .js separat. În acest caz, ar trebui să dezactivați toate pluginurile unul câte unul. Reîmprospătați pagina după dezactivarea fiecărui plugin până când găsiți cel care adaugă scriptul pe paginile dvs. Dacă JavaScript-ul nu dispare nici după dezactivarea tuturor pluginurilor, atunci încercați să comutați la o altă temă pentru a vedea dacă JavaScript-ul este adăugat de tema dvs.
Înregistrarea și Coada Scripturilor
Odată ce ați găsit plugin-ul sau tema care adaugă JavaScript în secțiunea antet, următorul pas este să aflați unde are plugin-ul un apel pentru fișier. Într-unul dintre fișierele PHP ale temei sau plugin-ului dvs. veți vedea un apel către acel fișier .js particular.
Dacă pluginul sau tema folosește deja enqueuing pentru a adăuga fișierul JavaScript, atunci tot ce trebuie să faci este să schimbi funcția wp_register_script în pluginul sau tema ta și să adaugi true pentru parametrul $in_footer. Astfel:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Să presupunem că pluginul sau tema dvs. adaugă JavaScript brut în antet sau între conținut. Găsiți codul JavaScript brut în fișierele pluginului sau temei, copiați JavaScript-ul și salvați-l într-un fișier .js. Apoi utilizați funcția wp_register_script() așa cum este arătat mai sus, pentru a muta JavaScript-ul în partea de jos.
Notă editor: Este important să înțelegeți că atunci când faceți modificări la 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ă deregisterați scriptul și să îl reînregistrați din fișierul functions.php al temei dvs. Consultați acest tutorial.
Pe lângă mutarea scripturilor în subsol, ar trebui să luați în considerare și utilizarea unui plugin mai rapid pentru rețele sociale și încărcarea leneșă a imaginilor. Pe lângă acestea, ar trebui să utilizați și W3 Total Cache și MaxCDN pentru a îmbunătăți viteza site-ului dvs.
Sperăm că acest articol v-a ajutat să mutați JavaScript-urile în partea de jos în WordPress și să vă îmbunătățiți viteza paginii. Pentru întrebări și feedback, vă rugăm să lăsați un comentariu mai jos.
Ravi
Pluginurile mele se vor actualiza normal când mut js-ul lor într-un singur fișier? Sunt începător.
Echipa WPBeginner
Există mai multe moduri de a face acest lucru. Unul dintre cele mai comune este să lipiți fișierele JavaScript încărcate din diferite surse într-un singur fișier JS și apoi să îl înscrieți.
Catharine
Excelent, mulțumesc!
Catharine
Salut Syed, mulțumesc pentru tutorial. Cu toate acestea, sunt un începător complet și am o întrebare foarte de bază. Pentru acea bucată de cod pe care ai postat-o (întreaga funcție etc.), trebuie să o adăugăm în fișierul functions.php pentru fiecare bucată de javascript pe care dorim să o înrolăm? Cred că ceea ce întreb este, cum ai formata acel cod dacă ai avea mai mult de o bucată de javascript care ar fi încărcată în anteturi pe mai multe pagini?
Ajutorul tău ar fi foarte apreciat!
Marc Jacobs
Salut, tutorial grozav. Am o întrebare totuși. Am rulat site-ul meu prin Google Page Speed Insights și am primit avertismentul că trebuie să elimin Javascript-ul (și CSS-ul) care blochează redarea pentru a-mi crește viteza paginii. Am citit informațiile de pe acest site (lectură grozavă!), dar nu reușesc să găsesc fișierele php unde plugin-ul „apelează” fișierele js care cauzează lipsa de viteză a site-ului meu. Am identificat ce plugin cauzează cea mai mare întârziere (Google-maps-ready), dar nu am idee cum să procedez de acolo. Am căutat fiecare fișier php din folderul plugin-ului, dar nu pot găsi un fișier js numit similar cu fișierele menționate în testul de viteză Google:
...
Cum aflu ce fișier php să editez? Orice ajutor ar fi mult apreciat!
salutare,
Marc.
Suport WPBeginner
Un plugin de pe site-ul dvs., Google Maps Ready, adaugă acele fișiere.
Admin
Basavaraj Tonagatti
Salut, m-am mutat recent la Genesis Framework + Eleven 40 Child Theme. Mă confrunt și eu cu aceeași problemă când rulez testul Google Page Speed. Dar, deoarece nu știu exact cum să fac, îmi este greu să fac modificări. Poate cineva să mă ghideze care este cauza exactă pe site-ul meu și cum să elimin această problemă cu Javascript? (Nu știu limbaje de stilizare și sunt complet neștiutor despre aceste limbaje de cod.)
Joseph Stanley-Hunt
Mulțumesc mult, mă întrebam cum să fac asta și alte trucuri (pentru care am găsit și răspunsuri aici).
O întrebare totuși, văd că nu există în-head în parametri. înseamnă asta că dacă in_footer este setat la false, este înregistrat automat în head?
Suport WPBeginner
Da, valoarea implicită pentru in_footer este false. Deci, trebuie să adăugați explicit in_footer la true, altfel va apărea în antet.
Admin
Mike
Actualizarea pluginului mi-a venit imediat în minte și mie. Aștept cu nerăbdare mai multe sfaturi despre asta.
Jason
Articol grozav! Am pus aceste întrebări de mult timp, deoarece atât de multe teme sunt penalizate în testul de viteză Google din cauza scripturilor JavaScript care se încarcă mai întâi. Poate alții au știut cum să pună aceste scripturi în subsol.
Din nou, mulțumesc și voi încerca acest lucru și vă voi spune cum funcționează.
Jeremy Myers
Tutorial grozav.
Dar odată ce vom actualiza pluginul, va trebui să facem asta din nou, corect? Și de fiecare dată când pluginul se actualizează?
Este posibil să deregisterizez js-ul în functions.php și apoi să îl reînregistrez pur și simplu în footer cumva?
adam
Salut, mulțumesc pentru aceste sfaturi utile. Dar, cum să mut fișierele .js ale W3 Total Cache minify în head?
Aceasta este locația js în cache în wp content, nu în plugin-ul wp.
Lucca
Mulțumesc pentru cunoștințele valoroase – continuă munca excelentă.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Sfat bun. Mulțumesc pentru distribuire!