Cum să amânați analizarea JavaScript în WordPress

Indiferent dacă rulați un site web WordPress sau orice alt site web, ar trebui să știți că o măsură critică a performanței site-ului dvs. este viteza paginii.

Dacă utilizați oricare dintre instrumentele de testare a performanței site-ului, cum ar fi GTmetrix sau Google PageSpeed ​​Insights, vă poate sugera să amânați analizarea JavaScript.

Acum, expresia poate fi confuză, dar joacă un rol semnificativ în creșterea timpului de încărcare a site-ului dvs.

Deci, ce înseamnă prin amânarea analizei JavaScript?

Ei bine, despre asta vom vorbi mai târziu în detaliu. Pe scurt, amânarea analizei JavaScript permite browserului să încarce mai întâi conținutul site-ului web, fără a aștepta ca scripturile să termine descărcarea.

Acest proces este esențial, deoarece browserele redă și descarcă JavaScript de pe server înainte de a încărca orice alt conținut de site. Acest lucru dăunează vitezei site-ului dvs. și vă întrerupe timpul de încărcare a paginii.

Din fericire, amânarea analizei JavaScript este cea mai bună modalitate de a atenua problema.

Am explicat cele cinci metode dovedite de a amâna analizarea JavaScript în WordPress în acest articol. Dar înainte de asta, să obținem mai multe informații despre ce înseamnă expresia și să știm dacă trebuie să amânăm analizarea Javascript.

Să începem!

Ce vrei să spui prin amânarea analizei JavaScript în WordPress?

Înainte de a înțelege tehnica de a amâna analiza JavaScript, ar trebui să știți cum redă un browser web o pagină web.

Pentru început, atunci când browserul dvs. trimite o solicitare către serverul dvs. web, acesta primește pagina, care este descărcată sub forma unui document HTML. Acest document HTML include text, cod care redă diferite elemente DOM și resurse diferite precum imagini, foi de stil și scripturi.

În mod implicit, browserul descarcă aceste resurse într-o secvență. Redarea paginii web se reia numai după ce toate resursele sunt descărcate. În plus, resursele mari afectează negativ timpul de încărcare a paginii dvs. web.

Ori de câte ori browserul dvs. parcurge codul pentru a reda site-ul dvs., acesta oprește redarea dacă găsește JavaScript. Procesul este oprit până când poate prelua și analiza fișierul JavaScript. Acest lucru afectează negativ viteza site-ului dvs.

Din fericire, procesul de amânare a analizei JavaScript notifică browserul să aștepte să descarce și să analizeze un fișier JavaScript până la finalizarea încărcării conținutului principal al site-ului dvs. Până în acest punct, vizitatorii dvs. pot interacționa cu site-ul dvs., astfel încât timpul necesar pentru descărcarea și analizarea JavaScript să nu mai pericliteze timpul de încărcare a site-ului dvs.

Cum să știți că trebuie să amânați analizarea JavaScript?

După cum am spus mai devreme, instrumentele de testare a performanței site-ului precum GTmetrix, Google PageSpeed ​​Insights sau WP Engine Speed ​​Tool sugerează adesea să amânați analizarea JavaScript atunci când vă analizează site-ul.

GTmetrix, în special, vă oferă o notă și enumeră anumite scripturi care trebuie amânate pentru a îmbunătăți viteza de încărcare a paginii.

Puteți doar să introduceți adresa URL a site-ului dvs. și să așteptați ca instrumentul să îl evalueze. Când se termină evaluarea, mergeți la fila PageSpeed ​​și extindeți secțiunea Amânați analizarea JavaScript.

Această secțiune vă oferă o listă de scripturi neesențiale care sunt încărcate în timpul procesului de randare, așa cum se arată în exemplul de mai jos:

Atribute asincrone vs. Amânare

Este vital să vă asigurați că descărcarea unui script nu interferează cu redarea paginii web. Există două moduri de a face acest lucru:

• Async
• Amâna

Puteți include atributul asincron în eticheta de script ca:

 <script src= “path/to/script” async> </script>

Aceasta îi spune browserului să încarce scriptul asincron. Pentru a fi precis, browserul descarcă resursa de îndată ce o întâlnește în cod, dar continuă să analizeze HTML-ul în timp ce resursa este încă în curs de descărcare.

Pe de altă parte, puteți adăuga atributul defer la eticheta de script ca:

 <script src= “path/to/script” defer> </script>

Acest lucru îi spune browserului să nu descarce resursele până când nu încheie analiza paginii web. Odată ce termină analizarea și randarea, descarcă lista de scripturi amânate pe care le-a întâlnit mai devreme.

Diferența majoră dintre atributele async și defer este atunci când resursele sunt descărcate.

Dacă aveți o aplicație web compactă, este recomandat să utilizați defer pentru a vă asigura că interdependențele sunt satisfăcute. În plus, dacă aveți doar câteva scripturi în calea de randare, nu v-ar deranja nicio diferență între utilizarea ambelor atribute.

Iată un exemplu pentru a înțelege atributele asincrone și amânate:

Să presupunem că aveți două scripturi JS1 și JS2.

Condiția este ca JS2 să apară în cod după JS1, JS2 are o dependență de JS1, dar JS1 este mai mare decât JS2.

Acum, dacă utilizați async , este posibil ca JS2 să termine descărcarea înainte ca JS1 să fie descărcat complet. Acest lucru duce la o eroare, deoarece JS2 este executat în absența lui JS1.

Pe de altă parte, dacă utilizați defer , JS1 și JS2 sunt descărcate secvenţial, asigurându-vă că nu există nicio eroare.

De ce trebuie să amânați analizarea JavaScript?

Am menționat mai devreme că viteza paginii este cel mai critic aspect care face sau reduce performanța site-ului dvs. Deoarece fișierele JavaScript sunt destul de mari și durează mai mult să se încarce, amânarea execuției lor pentru o perioadă se dovedește utilă pentru a crește viteza site-ului dvs.

Următoarele sunt câteva dintre motivele pentru care trebuie să amânați analizarea JavaScript în WordPress:

1. Pentru a crește clasamentul în căutare:

Atunci când Google sau orice alte motoare de căutare vă evaluează site-ul web pentru o clasare în motorul de căutare, ei iau viteza paginii drept punct critic de măsură. Dacă site-ul dvs. se încarcă mai repede, este obligatoriu să apară pe prima pagină a rezultatelor motorului de căutare.

Conform cercetării, 1 din 2 persoane se așteaptă ca o pagină să se încarce în mai puțin de 2 secunde. Dacă site-ul dvs. nu se poate încărca corespunzător în 2 secunde, Google vă va favoriza concurentul în locul dvs. Prin urmare, poate avea un impact negativ asupra clasamentului dvs. de căutare.

Prin urmare, este necesar să amânați analizarea JavaScript, astfel încât să existe o creștere semnificativă a timpului de încărcare a site-ului dvs.

Dacă sunteți în căutarea mai multor opțiuni pentru a vă accelera site-ul WordPress, consultați aceste 7 tehnici SEO pe pagină care vă vor dubla traficul de căutare.

2. Pentru a crește rata de conversie:

Dacă site-ul tău se încarcă mai lent, vizitatorii tăi sunt obligați să-l părăsească și să caute alte opțiuni mai bune. Deoarece utilizatorii dvs. caută adesea informații rapide și de încredere pe site-ul dvs. web, o pagină cu încărcare lentă poate fi un ucigaș de dispoziție.

În mod similar, dacă rulați un site afiliat și vindeți produse prin site-ul dvs. web, vă așteptați ca utilizatorii să ia mai multe măsuri în privința acestuia. Cu toate acestea, o pagină web mai lentă poate descuraja vizitatorii dvs. să ia vreo măsură.

Cercetarea prezentată pe HubSpot arată că o întârziere de chiar și o secundă în timpul de încărcare a site-ului scade rata de conversie cu 7% . Acesta este cât de crucial este să creșteți timpul de încărcare a site-ului dvs. și să creșteți rata de conversie.

Tehnica de amânare a analizei JavaScript vă ajută să creșteți viteza site-ului dvs. și să îmbunătățiți rata de conversie a acestuia.

3. Pentru a oferi utilizatorilor o experiență mai bună:

La mintea cocosului! Site-urile web mai lente creează o experiență de utilizator teribilă. Dacă site-ul dvs. durează mai mult decât de obicei pentru a se încărca, vă puteți aștepta ca vizitatorii să părăsească site-ul dvs. și, astfel, crește rata de respingere.

Ar trebui să luați în considerare amânarea analizei JavaScript, astfel încât fișierele JS să fie executate numai după ce conținutul paginii dvs. web se încarcă. Această tehnică vă ajută să vă accelerați site-ul WordPress și să oferiți utilizatorilor o experiență excelentă.

Cinci metode diferite de a amâna analizarea JavaScript în WordPress

Pentru a amâna analizarea JavaScript, puteți alege oricare dintre cele trei rute principale, inclusiv:

• Conecteaza
• Metoda Varvy
• Fișierul Functions.php

Folosind aceste rute, am creat cinci metode diferite pentru a amâna analizarea JavaScript în WordPress.

Metoda 1: Utilizarea pluginului JavaScript Async gratuit

Async JavaScript este un plugin WordPress gratuit care ajută la eliminarea JavaScript care blochează randarea în conținutul de deasupra paginii.

Plugin-ul vă oferă control deplin asupra ce scripturi să adăugați sau să excludeți un atribut asincron sau amânat pentru a crește performanța site-ului dvs. WordPress. Lucrul pe care ar trebui să-l rețineți înainte de a alege între asincron și amânare este:

• Async descarcă JavaScript în timp ce analizează fișierele HTML, dar apoi întrerupe analiza HTML pentru a executa fișierele JavaScript.
• Amână descărcarea JavaScript în timp ce analizează fișierele HTML și așteaptă să-l execute după ce analiza HTML este finalizată.

Iată fiecare pas pentru a amâna analizarea JavaScript în WordPress folosind pluginul Async JavaScript:

Mai întâi, redirecționați către Pluginuri -> Adăugați nou din tabloul de bord WordPress.

Acum căutați pluginul JavaScript Async în bara de căutare și apoi Instalați și activați -l.

După ce finalizați instalarea și activarea pluginului, accesați pagina Setări pentru a face modificările necesare.

Acum, bifați opțiunea Activare JavaScript asincron și selectați Amânare ca metodă JavaScript asincronă, așa cum se arată în imaginea de mai jos:

Pentru opțiuni mai avansate, puteți derula în jos până la pagină. Aici, puteți include scripturile la care doriți să aplicați etichetele asincrone și amânate și, de asemenea, puteți adăuga o listă de scripturi de exclus.

De asemenea, puteți enumera pluginurile și temele pe care le puteți exclude din orice modificări pe care le face pluginul Async JavaScript.

Odată ce faceți modificările necesare, derulați în jos până în partea de jos a paginii și apăsați butonul Salvare setări .

Metoda 2: Utilizarea pluginului WP Rocket

WP Rocket este numit unul dintre cele mai puternice pluginuri de cache WordPress care face ca site-ul dvs. să se încarce rapid în câteva clicuri. Pluginul oferă stocarea în cache a paginii, preîncărcarea cache-ului, compresia statică a fișierelor și multe alte funcții interesante.

În afară de asta, WP Rocket vă ajută, de asemenea, să amânați analizarea JavaScript în fila Optimizare fișiere din tabloul de bord WP Rocket.

Odată ce achiziționați, instalați și activați pluginul WP Rocket, redirecționați la opțiunea Setări și faceți clic pe fila Optimizare fișiere din meniu pentru a începe.

După aceea, derulați în jos la secțiunea Fișiere JavaScript, bifați opțiunea Încărcare amânată JavaScript și activați Modul sigur pentru jQuery .

Când finalizați întregul proces, derulați în jos până la sfârșitul paginii și faceți clic pe butonul Salvare modificări .

Metoda 3: Utilizarea pluginului W3 Total Cache

W3 Total Cache este un alt plugin WordPress esențial care îmbunătățește SEO și experiența utilizatorului site-ului dvs. Îmbunătățește performanța site-ului dvs. și reduce timpul de încărcare prin valorificarea integrării Content Delivery Network (CDN).

W3 Total Cache este gratuit și foarte eficient. Puteți utiliza acest plugin pentru a amâna analizarea JavaScript pe site-ul dvs. WordPress.

Iată fiecare pas pentru a amâna analizarea JavaScript în WordPress folosind pluginul W3 Total Cache:

Mai întâi, redirecționați către Pluginuri -> Adăugați nou din tabloul de bord WordPress.

Acum căutați pluginul W3 Total Cache în bara de căutare și apoi Instalați și activați -l.

După ce finalizați instalarea și activarea pluginului, mergeți la Performanță -> Setări generale din bara laterală din stânga WordPress pentru a face modificările necesare.

După aceea, derulați în jos la secțiunea Minimizare și bifați opțiunea Activare . În plus, selectați opțiunea Manual din modul Minify și faceți clic pe butonul Salvare toate setările pentru a continua.

Acum, redirecționați la fila Performanță -> Minimizare din bara laterală din stânga și derulați în jos la antetul JS , unde puteți vedea secțiunea Operațiuni în zone cu două etichete HTML.

Selectați Neblocare folosind opțiunea „amână” din tipul de încorporare a etichetei Înainte </head> .

În aceeași secțiune, puteți vedea antetul de gestionare a fișierelor JS unde trebuie să selectați tema WordPress activă și să faceți clic pe butonul Adăugați un script pentru a include URI-ul JavaScript pe care doriți să îl analizați.

Puteți adăuga câte URI doriți făcând clic pe butonul Adăugați un script .

După ce ați finalizat modificările, faceți clic pe butonul Salvare setări și ștergere cache pentru a continua.

După aceea, derulați în jos la secțiunea CSS . Puteți apoi să faceți clic pe butonul Adăugați o foaie de stil de sub antetul de gestionare a fișierelor CSS pentru a insera URI-uri ale foii de stil CSS. Puteți adăuga mai multe pe baza sugestiilor oferite de instrumentele de monitorizare a vitezei online.

După ce ați finalizat modificările, faceți clic pe butonul Salvare setări și ștergere cache pentru a continua.

Metoda 4: Folosind metoda recomandată de Varvy

O altă metodă, recomandată de Patrick Sexton de la Varvy, utilizează un script pentru a apela un fișier JavaScript extern odată ce încărcarea inițială a paginii este finalizată. Aceasta înseamnă că browserul nu va descărca și nu va executa JavaScript până când pagina web nu se termină de încărcat.

Puteți utiliza această metodă modificând fragmentul de cod pe care îl furnizează Varvy și apoi adăugând scriptul în fișierul dvs. temă imediat înainte de eticheta de închidere </body> .

Iată codul de adăugat în partea de corp a temei pentru a amâna analizarea JavaScript în WordPress:

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Notă: asigurați-vă că modificați defer.js cu numele fișierului JavaScript extern. După aceea, puteți utiliza cârligul wp_footer pentru a injecta codul prin fișierul functions.php al temei copilului.

Cu această abordare, puteți încheia codul lui Varvy astfel:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

Iată fiecare pas al acestei metode explicat cu imagini clare:

Conectați-vă la tabloul de bord WordPress și navigați la Aspect -> Editor de teme

Acum, faceți clic pe fișierul header.php din partea dreaptă a ecranului și apoi lipiți codul menționat mai sus înainte de a închide </body tag>.

După aceea, faceți clic pe butonul Actualizare fișier .

Metoda 5: Utilizarea fișierului functions.php

Dacă aveți o idee despre dezvoltarea WordPress, ar trebui să fiți familiarizat cu faptul că nu ar trebui să adăugați scripturi direct prin marcajul HTML. În schimb, trebuie să utilizați funcțiile WordPress încorporate pentru a solicita resurse și, de asemenea, să faceți backup pentru site-ul dvs., dacă este necesar.

Puteți utiliza atributul defer la fișierele dvs. Javascript adăugând fragmentul de cod în fișierul functions.php .
Pentru asta, trebuie să accesați Editorul de teme din tabloul de bord WordPress. După aceea, faceți clic pe functions.php și adăugați următorul cod la acesta:

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Acest fragment îi spune WordPress să adauge atributul defer la toate fișierele JavaScript, cu excepția JQuery.
De asemenea, puteți adăuga cu ușurință următorul cod pentru a utiliza atributul async sau defer la fișierele JavaScript prin fișierul functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Ei bine, nu uitați că înainte de a adăuga atributele async și amânați etichetelor de script, trebuie să puneți în coadă fiecare script, astfel încât WordPress să îl poată accesa. Iată codul pentru el:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Când ați terminat de adăugat cod în fișierul functions.php, faceți clic pe butonul Actualizare fișier .

Iată fiecare pas al acestei metode explicat cu imagini clare:

Conectați-vă la tabloul de bord WordPress și navigați la Aspect -> Editor de teme

Acum, faceți clic pe fișierul functions.php situat în partea dreaptă a ecranului. Puteți apoi să lipiți codul menționat mai sus și să faceți clic pe butonul Actualizare fișier pentru a salva modificările necesare.

Pluginuri alternative pentru a amâna analizarea JavaScript în WordPress

Dacă căutați alte opțiuni decât pluginurile Async JavaScript și WP Rocket pentru a amâna analizarea JavaScript în WordPress, aveți o mulțime de ele. Unele dintre ele includ:

1. Pachet de amplificare a vitezei:

Acesta este un plugin WordPress gratuit cu o interfață ușor de utilizat pentru a vă ajuta cu optimizarea JavaScript și cu multe alte tehnici de optimizare a vitezei.

Avantajele pachetului Speed ​​Booster:

• Foarte simplu și ușor de utilizat și vine cu o interfață de utilizator interactivă
• Ajută la optimizarea JavaScript, optimizarea CSS, încărcarea leneră și integrarea rețelei de livrare a conținutului (CDN)
• Actualizat regulat pentru performanțe excepționale și îmbunătățiri ale erorilor

Dezavantajele pachetului Speed ​​Booster:

• Există riscul ca activarea acestui plugin sau a oricărei caracteristici ale acestuia să intre în conflict cu alte plugin-uri de pe site-ul dvs. web

2. JavaScript amânate WP:

Acest plugin WordPress amână încărcarea tuturor JavaScript-urilor adăugate prin intermediul wp_enqueue_script(), folosind LABJS. Rezultatul este optimizarea corectă a timpului de încărcare.

Avantajele JavaScript-urilor amânate WP:

• Foarte ușor de utilizat și este una dintre cele mai populare soluții de pe piață
• Proiectat explicit pentru a amâna analizarea JavaScript în WordPress, nu doar ca o funcție suplimentară

Dezavantajele JavaScript-urilor amânate WP:

• Actualizări rare și poate incompatibile cu versiunile mai noi de WordPress
• Poate cauza ruperea altor plugin-uri de pe site-ul dvs. web

Întrebări frecvente (Întrebări frecvente)

Concluzie

Este foarte important să amânați analizarea JavaScript în WordPress pentru a îmbunătăți viteza și performanța site-ului dvs. Sperăm că veți găsi acest articol perspicace, deoarece am prezentat diferitele modalități de a realiza această tehnică, care implică utilizarea pluginurilor și adăugarea de coduri la fișierele teme.

În cazul în care vi se pare dificil să adăugați coduri la fișierele teme, vă recomandăm insistent să utilizați pluginurile menționate mai sus pentru a amâna analizarea JavaScript. Pluginurile sunt ușor de utilizat și puteți finaliza întregul proces în câteva clicuri.

După ce finalizați procesul, asigurați-vă că rulați site-ul dvs. prin intermediul instrumentelor de testare a performanței site-ului, cum ar fi GTmetrix, pentru a vă asigura că site-ul dvs. amână cât mai multe scripturi posibil.

Aveți întrebări și întrebări despre cum să amânați analizarea JavaScript în WordPress? Trage-le în secțiunea de comentarii de mai jos!