Cum să amânați analizarea JavaScript în WordPress
Publicat: 2021-07-22Încărcarea site-ului dvs. durează prea mult? Nu contează dacă utilizați un site WordPress sau altul, timpul mare de încărcare este o problemă critică care trebuie rezolvată în curând.
Deci, rătăciți la fel? Ei bine, dacă vă verificați personal site-ul, este posibil să primiți mesajul „Amânați analizarea JavaScript în WordPress”. Acest lucru pare complicat și, uneori, nu este de înțeles, deoarece nu ești expert în tehnologie.
Dacă urmați mesajul, veți vedea o creștere a vitezei de încărcare a paginii și joacă un rol semnificativ în îmbunătățirea conversiilor și a veniturilor site-ului.
Acum întrebarea este ce înseamnă Defer Parsing of JavaScript în WordPress?
Deci, iată un răspuns rapid și scurt. Amânarea analizei JavaScript în WordPress permite browserului să încarce mai întâi conținutul site-ului web fără a citi scripturile pentru a finaliza descărcarea și pentru a îmbunătăți timpul de încărcare.
Acest proces ușor este important deoarece browserele redă și descarcă JavaScript de pe server înainte de a încărca conținutul site-ului. Acest lucru îngreunează în mod natural viteza site-ului web și întrerupe timpul de încărcare.
Dar Defer Parsing of JavaScript in WordPress este cheia pentru a debloca problema și vă puteți bucura de performanța site-ului web fără a aștepta câteva minute.
Această postare va împărtăși cele cinci tehnici dovedite pentru amânarea JavaScript. Dar înainte de a trece la soluții, trebuie să înțelegeți sensul real al acestui mesaj pop-up.
Așadar, fără alte prelungiri, să începem!
Ce înseamnă Defer Parsing of JavaScript în WordPress?
Știți cum redau browserele pagina web? Dacă nu, mai întâi trebuie să înțelegeți acest lucru.
Când browserul dvs. primește o solicitare de la utilizator, o trimite pe serverul web și pagina începe să se descarce în format HTML. Acest document HTML include text și cod care redă elemente DOM și diferite resurse, cum ar fi imagini, scripturi și foi de stil.
Cu toate acestea, browserul descarcă resursele în secvență. Dar redarea paginii reia din nou toate procesele și oferă efecte adverse asupra timpului de încărcare. Chiar și acest lucru împiedică uneori procesul și arată mesajul - Pagina nu poate fi descărcată sau arată o eroare de server.
Ori de câte ori browserul parcurge codul pentru a reda site-ul sau paginile, se oprește redarea dacă JavaScript este găsit acolo. Acest proces este oprit până când nu poate prelua și analiza scriptul. În plus, are un impact negativ asupra vitezei site-ului dvs.
Dar cu ajutorul Defer Parsing of JavaScript în WordPress ajută la notificarea browserului pentru a descărca pagina sau conținutul principal al site-ului dvs. și oferă încărcare rapidă. La aceasta, utilizatorii pot găsi site-ul web.
De ce trebuie să amânați analizarea JavaScript în WordPress?
Dacă site-ul dvs. are nevoie de prea mult timp pentru încărcare, ar trebui să-i creșteți performanța prin cârlig și escroc. Dacă nu cunoașteți performanța site-ului, rulați testul pe site folosind cele mai bune instrumente precum GT Metrix, Google Pagespeed Insights sau WPEngine.
Acestea sunt teste de viteză care sugerează și vă oferă adesea amânarea analizei JavaScript atunci când analizați site-ul. De exemplu, să încercăm cu GT Metrix.
În GTMetrix veți găsi nota site-ului dvs. pe fiecare pagină și scripturi specifice care trebuie îmbunătățite cât mai curând posibil. Pentru a utiliza acest instrument, puteți introduce adresa URL a site-ului web și puteți aștepta minutele, astfel încât să poată prelua toate datele.
Odată ce este finalizat, treceți la fila Viteza paginii și vă îmbunătățește viteza de încărcare și extinde secțiunea Defer Parsing of JavaScript.
Aici veți găsi o listă de scripturi de încărcare care se încarcă în timpul procesului de randare. Așa că citește totul cu atenție.
Atribute Async VS Defer
Acest lucru este important pentru a vă asigura că descărcarea unui script nu interacționează cu redarea paginii web. Deci, cele două metode pentru a face acest lucru sunt Async și Defer.
Dacă doriți să începeți cu Async, trebuie să adăugați următoarea etichetă de script.
Cu aceasta, browserul dvs. primește o actualizare prin care browserul ar trebui să încarce scriptul în mod asincron. Pentru a fi precis, browserul își descarcă resursele de îndată ce se lovește de cod, dar analizează HTML-ul în timp ce resursa încă se descarcă.
În timp ce, pe de altă parte, puteți alege a doua metodă Atributul Amânare. Deci, adăugați scriptul dat.
Cu această etichetă, veți spune browserului dvs. să nu descarce resursele până când nu a finalizat analiza paginii web. Odată ce procesul este finalizat, descarcă scripturile amânate pe care le-am întâlnit mai devreme.
Diferența majoră pe care urmează să o verificați când ambele resurse sunt descărcate. Pentru o utilizare mai bună a ambelor ar trebui să verificați aplicația web.
Dacă aplicația dvs. web este compactă, ar trebui să optați pentru amânare, în timp ce dacă aveți puține scripturi, Async este cel mai bun. Ei bine, nu ați găsi nicio diferență în ambele, dar adevărul este că defer este pentru fișiere mari și Async este pentru mici.
Pentru a cunoaște mai bine diferența dintre Async și defer, am împărtășit un exemplu. Citiți mai departe.
Să presupunem că aveți două scripturi java JS1 și JS2. Și există o condiție ca JS2 să apară în cod după JS1, ceea ce înseamnă că JS2 depinde de JS1, dar este mai mare decât JS2.
Dacă utilizați Async, există posibilitatea ca JS2 să își termine descărcarea înainte de JS1. Acest lucru poate duce la o eroare, deoarece JS2 este executat în absența JS1
Și dacă utilizați, amânați descărcarea cu succes a scripturilor JS1 și JS2 și nu provoacă nicio eroare.
Astfel, amânarea este cel mai bine să încărcați scripturile și să îmbunătățiți viteza site-ului sau timpul de încărcare.
Motive pentru care trebuie să amânați analizarea JavaScript
După cum am spus mai devreme, dacă doriți să vă clasați pe prima pagină a Google, ar trebui să aveți o viteză mare de încărcare a paginii web. Aproximativ, o pagină ar trebui să fie încărcată în 2-3 secunde. Din păcate, JavaScript redă calitatea paginii și pierzi mult trafic.
Întârzierea încărcării unei pagini poate afecta site-ul dvs. în mai multe moduri. Din fericire, amânarea analizei JavaScript vă poate ajuta să rezolvați această problemă. Aruncă o privire și verifică motivele pentru care te poate ajuta.
- Creșteți clasamentul de căutare
Ori de câte ori Google evaluează performanța site-ului dvs. pentru clasarea căutării, cel mai important factor pe care Google îl verifică este timpul de încărcare a site-ului. Dacă site-ul dvs. se încarcă mai repede, acesta apare în mod natural pe prima pagină a rezultatelor căutării.
Conform cercetării, am constatat că atunci când 1 din 2 persoane așteaptă să se încarce site-ul web, altfel se mută la a doua sursă. De asemenea, Google va favoriza doar acele site-uri web care nu-și vor deranja cititorii și le vor oferi cea mai bună experiență de utilizare.
Și dacă site-ul dvs. durează mai mult de 4 secunde pentru a se încărca, acesta va avea un impact negativ asupra performanței site-ului dvs. Prin urmare, este important să lucrați cu JavaScript. Și amânarea este doar modalitatea inteligentă de a crește viteza site-ului de la normal la super.
Pentru cele mai bune rezultate, ar trebui să urmați tehnicile SEO pentru a vă îmbunătăți conținutul și a optimiza viteza paginii.
- Creșteți rata de conversie
Un alt motiv principal pentru care site-ul dvs. trebuie să amâne dacă doriți să îmbunătățiți rata de conversie. Dacă site-ul se încarcă lent, există șanse ca clienții tăi să iasă la alte surse și să pierzi trafic și vânzări.
Utilizatorii se grăbesc, de multe ori le place să urmărească site-ul care le arată rapid informații. Și dacă site-ul funcționează lent, acest lucru va fi frustrant pentru ei și s-ar putea să nu vă mai viziteze pagina. Nu contează pe ce site sau blog lucrați.
Sarcina ta este să oferi cele mai bune utilizatorilor tăi. Cercetarea pe Hubspot arată că timpul de încărcare a site-ului scade adesea cu 7% rata de conversie. Cu tehnica Defer Parsing of JavaScript în WordPress, puteți crește viteza site-ului dvs. mai rapid, ceea ce îmbunătățește și mai mult rata de conversie.
- Giveaway Cea mai bună experiență de utilizator
Nu credem că aveți nevoie de o explicație a acestui motiv. Este destul de natural dacă viteza site-ului dvs. este bună și utilizatorii se bucură de conținutul de pe site, vă puteți aștepta ca vizitatorii dvs. să fie mulțumiți de site.
Și dacă site-ul dvs. durează mai mult timp la încărcare decât de obicei, utilizatorii vă vor renunța la site și crește rata de respingere.
Cu Defer Parsing of JavaScript în WordPress, puteți actualiza fișierele Java care vă ajută cu ușurință să încărcați rapid conținutul principal al site-ului. Această schemă de încărcare rapidă vă ajută să accelerați site-ul web, ceea ce îmbunătățește experiența utilizatorului.
Cele cinci metode diferite de a amâna analizarea JavaScript în WordPress
Acum am ajuns la secțiunea noastră principală a articolului. Aici vei învăța cele cinci tehnici geniale care te ajută să accelerezi site-ul, să ofere cea mai bună experiență de utilizator și să-ți ofere un traseu pentru a te clasa pe primul loc.
Deci, să cunoaștem metodele.
Pentru a amâna analizarea JavaScript, cele trei rute importante pe care le puteți alege sunt pluginul, metoda varvy și fișierul functions.php. Cu aceste rute, puteți aplica cele cinci metode date.
Metoda 1- Utilizarea pluginului JavaScript Async gratuit
În WordPress, Async JavaScript este un plugin gratuit care ajută la eradicarea JavaScript care blochează randarea în încărcarea conținutului.
Cu acest plugin, vă puteți bucura de controlul deplin asupra scripturilor java și asincronizării sau amânarea poate contribui cu ușurință la creșterea vitezei site-ului și la îmbunătățirea performanței acestuia în paginile de căutare. Cu toate acestea, există câteva sugestii pe care va trebui să le urmați atunci când alegeți Async și amânați.
- Async poate descărca JavaScript în timp ce analizează fișierele HTML, dar apoi întrerupe analiza HTML pentru a efectua fișierele JavaScript.
- Defer poate descărca fișierele JavaScript în timp ce parsează fișierele HTML, dar așteaptă să execute fișierele după finalizarea analizei HTML.
Acum să trecem la un ghid pas cu pas pentru amânarea analizei JavaScript în WordPress folosind pluginul Async.
- Deschideți tabloul de bord WordPress și accesați fila de pluginuri.
- În fila plugin, faceți clic pe butonul Adăugare nou și căutați pluginul Async JavaScript.
- Când găsiți pluginul, faceți clic pe butonul de instalare și activați-l.
- Deci, când instalarea este finalizată, mergeți la setări și faceți modificările necesare.
- Bifați opțiunea de activare JavaScript asincron și alegeți amânare ca JavaScript asincron.
- Pentru funcțiile avansate, bifați și alegeți din scriptul pe care doriți să îl aplicați - Etichete asincrone și amânate.
- Aici puteți alege scripturile pe care doriți să le includeți și să le excludeți. În plus, puteți alege și pluginurile și temele pe care doriți să le excludeți din orice modificări efectuate de Async JavaScript Plugin.
- Odată ce modificările sunt finalizate, salvați modificările
Metoda 2: Utilizarea pluginului WP Rocket
Dacă nu ați auzit de pluginul rachetă WP înainte, atunci prindeți asta acum. WP Rocket este unul dintre cele mai la modă plugin-uri care vă pot ajuta site-ul dvs. să se încarce rapid în câteva secunde.
Mai mult, cu acest plugin puteți primi stocarea în cache a paginii, preîncărcarea cache-ului, compresie și multe alte funcții interesante.
Pe de altă parte, pluginul vă ajută și să amânați analizarea JavaScript în fila de optimizare a fișierelor.
Iată cum puteți instala și utiliza pluginul.
- Deschideți tabloul de bord WordPress și redirecționați către fila plugin
- Acum faceți clic pe butonul Adăugare nou și căutați pluginul WP rocket.
- Atingeți instalarea și activați pluginul.
- Apoi mergeți la setări și deschideți optimizarea fișierelor din meniu pentru a începe.
- Acum derulați în jos fișierele JavaScript și bifați opțiunea de încărcare amânată JavaScript și activați modul sigur pentru Interogare.
- Când întregul proces este finalizat, mergeți la sfârșitul paginii și faceți clic pe opțiunea de salvare a modificărilor.
Metoda 3: Utilizarea pluginului W3 Total Cache
W3 Total Cache este un alt plugin bun pe care îl puteți utiliza pentru a amâna analizarea JavaScript în WordPress. Acest plugin WordPress este pur și simplu util pentru a îmbunătăți experiența utilizatorului și SEO a site-ului dvs. În plus, îmbunătățește performanța site-ului web și reduce timpul de încărcare prin valorificarea CDN-ului (Content delivery integration).

Cache-ul total W3 este foarte eficient și sigur de utilizat. În plus, puteți utiliza acest plugin pentru a amâna analizarea JavaScript în WordPress. Iată cum puteți utiliza acest plugin.
- Mai întâi vizitați tabloul de bord WordPress și accesați pagina de pluginuri.
- Apoi adăugați un nou buton și căutați pluginul W3 total cache plugin.
- Odată ce pluginul este găsit, faceți clic pe butonul de instalare și activare.
- Acum pluginul este instalat. Accesați setările de performanță și generale din WordPress.
- Apoi derulați în jos tabloul de bord și treceți la secțiunea de minimizare și bifați opțiunea de activare.
- În plus, puteți verifica opțiunea manuală din modul minify și faceți clic pe opțiunea de salvare pentru a continua.
Reduceți codul
Mergeți la fila de performanță și alegeți fila minify din bara laterală din stânga și derulați în jos la antetul JS, acolo puteți căuta secțiunea operațiuni și zonă cu Două etichete HTML.
Reduceți opțiunile de setări
Alegeți neblocarea folosind opțiunea de amânare și încorporați tipul codului înainte etichetă.
Setări JS Minify
- În setări, puteți vedea gestionarea fișierelor JS unde trebuie să selectați tema WordPress.
- Apoi faceți clic pe opțiunea Adăugați un script pentru a include adresa URL a JavaScript pe care doriți să o analizați.
- Puteți adăuga oricâte adrese URL doriți atingând butonul adăugați un script.
- Când modificările sunt finalizate, faceți clic pe butonul de salvare a setărilor și pe butonul cache pur pentru a continua.
- După ce ați terminat, derulați în jos secțiunea CSS.
- Acum faceți clic pe butonul Adăugați o foaie de stil.
- Apoi, în gestionarea fișierelor CSS, inserați adresele URL ale foii de stil.
- Puteți adăuga mai multe pe baza sugestiilor care vi se oferă de instrumentele de monitorizare.
- Acum, ați finalizat modificările, așa că salvați setările și butonul de cache pur.
Metoda 4: Folosind metoda recomandată de Vary
O altă metodă bună pe care o puteți opta pentru Defer Parsing of JavaScript în WordPress este alegerea Varie, aceasta folosește un script pentru a apela fișierul JavaScript extern odată ce pagina inițială este încărcată.
Aceasta înseamnă că browserele nu descarcă și nu execută JavaScript până când pagina web nu este încărcată. Cu toate acestea, această metodă este sugerată de Patrick Sexton.
Pentru a utiliza această metodă, puteți modifica fragmentul de cod pe care îl furnizează varvy și apoi îl puteți adăuga la editorul de teme din secțiunea de corp.
Deci, iată codul pe care îl puteți adăuga în partea de corp a temei dvs. pentru a amâna analizarea JavaScript în WordPress.
<Tipul script= „text/javascript”> Funcția downloadSAtOnload() { var element = document.createElement („Script”); element.src = „amână .js” ; document.body.appendChild (element); } Dacă (window.addEventListener) window.addEventListener („încărcare”, downloadJSAtOnload , false); altfel dacă (window.attachEvent) Window.attachEvent („încărcare”, descărcare JSAtonlaod; </script>
În timp ce faceți acest lucru, asigurați-vă că ați schimbat defer.Js cu numele fișierului JavaScript extern. Apoi, după folosirea Wp_footer pentru a injecta codul prin fișierul functions.php al copilului.
Iată codul pe care trebuie să-l folosești.
/** Amânați analizarea JavaScript cu fragmentul de cod de la Varvy */ Add_action ('wp_footer' , 'my_footer_scripts'); Funcţie My_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }
Acum trecem la ghidul nostru pas cu pas pentru simțul clar.
- Accesați tabloul de bord WordPress și mergeți la apariție, apoi la editorul de teme.
- Navigați în fișierul header.php și apoi lipiți codul menționat mai sus după și înainte de secțiunea body.
- Apoi faceți clic pe opțiunea de actualizare a fișierului.
Metoda 5- Utilizarea fișierului functions.php
Dacă uitați, permiteți-ne să vă reamintim că nu puteți adăuga scripturi direct la WordPress prin HTML. În schimb, trebuie să utilizați funcțiile WordPress încorporate pentru a solicita resursele și, de asemenea, pentru a face backup pentru site-ul dvs.
Ar trebui să utilizați atributul defer la fișierele JavaScript adăugând fragmentul de cod în fișierul functions.php.
Pentru a finaliza procesul, deschideți editorul de teme și accesați fișierul functions.php pentru a adăuga codul dat.
Funcţie Defer_parsing_of_js ( $url ) { Dacă ( User_ is_ logged_in() ) Returnează $url; //nu rupe WP Admin Dacă (FALSE === Strops($url, '.js')) Returnează $url; Dacă ( strops ($url, 'jquery.js' ) ) returnează $url; Returnează str_replace( 'src', 'defer src', $url); } Adaugă_filtru ( 'script_loader_tag', 'defer_parsing_of_js', 10 );
Acest cod ajută WordPress să adauge atributul defer la fișierele JavaScript, cu excepția JQuery.
Iată codul pe care îl puteți utiliza pentru a sincroniza atributele amânate cu fișierele JavaScript prin fișierul functions.php.
Add_filter („script _loader_tag”, „add_defer_tags_to_scripts”); Funcţie add_defer_tags_to_scripts ($tyag) { #list scripturi de adăugat atribuite la $scripts_to_defer = array ('script_a', script_b'); $scripts_to_async = array ('script _c', 'script_d'); #adăugați etichetele defer la matricea scripts_to_defer Foreach ( $scripts_to_defer ca $current_script) { Dacă (adevărat == strops ($tag, $current_script) ) Retun Str_replace ('src,'defer=”defer” src','$tag); } #adăugați etichetele asincrone în matricea scripts_to_async Foreach ( $scripts_to_async ca $current_script) { Dacă (adevărat == strops ($tag, $current_script) ) Întoarcere Str_replace ('src,'defer=" Async=" async" src', $tag); } Returnează $tag; )
Nu uitați că trebuie să puneți în coadă fiecare cod, astfel încât trebuie să adăugați următorul cod.
Add_action ('wp_enqueue_scripts', 'enqueue_custom_js'); Funcţie Pune în coadă_ 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_ds", Get_stylesheet_directory_uri (), '/script_d.js') ; }
Când ați actualizat toate codurile din fișierul functions.php, actualizați fișierul și vedeți modificările. Iată un ghid pas cu pas pentru a actualiza fișierul.
- Deschideți tabloul de bord WordPress și înainte la apariție, apoi editorul de teme.
- Navigați în fișierul functions.php și apoi lipiți codurile menționate mai sus.
- Apoi faceți clic pe opțiunea de actualizare a fișierului.
Pluginurile alternative la Defer Parsing of JavaScript în WordPress
În afară de Async și defer, mai aveți două opțiuni de plugin-uri Defer Parsing of JavaScript în WordPress.
- Pachet de amplificare a vitezei
- Este simplu și ușor de utilizat de către oricine datorită interfeței de utilizator interactive.
- Acest lucru ajută la optimizarea JavaScript, la încărcare slabă și la integrarea CDN.
- Acest lucru va fi actualizat în mod regulat și va elimina amenințarea cu erori
- Acest lucru ar putea crea probleme în utilizarea altor plugin-uri.
- JavaScript asincron
- Este foarte ușor de utilizat pluginul
- Este cel mai popular pe piața pluginurilor
- Proiectat pentru amânarea analizei JavaScript în WordPress
- Actualizări neregulate
- Poate incompatibil cu versiunile mai noi de WordPress
- Poate cauza probleme altor plugin-uri
- Informații Google PageSpeed: acest lucru vă va ajuta să identificați principalele puncte de lipsă ale vitezei și performanței site-ului dvs. În plus, acest instrument oferă și câteva sugestii pentru a îmbunătăți performanța site-ului și timpul de încărcare.
- Cu aceasta site-ul dvs. va primi scoruri în diferite culori, cum ar fi roșu, portocaliu și verde. Roșul va arăta performanțe scăzute, de asemenea, portocaliul va dezvălui mediu și verde pentru totdeauna.
- Test de viteză a site-ului Pingdom: este încă un alt instrument popular pentru a urmări și monitoriza performanța. Cu acest instrument, puteți testa performanța site-ului dvs. în șapte locații diferite.
- Mai mult, acest instrument oferă și sugestii pentru îmbunătățirea vitezei paginii, astfel încât să vă puteți bucura de viteza și performanța mai bună a site-ului
Acesta este încă un alt plugin WordPress cel mai bun pe care îl puteți folosi pentru a îmbunătăți cu ușurință viteza site-ului și pentru a optimiza pentru utilizatori. Spuneți-ne argumentele pro și contra.
Pro:
Contra:
Acest plugin permite încărcarea ușoară a tuturor scripturilor java care sunt adăugate ca wp_enqueue_script() folosind LABJS. Spuneți-ne argumentele pro și contra.
Pro:
Contra:
Întrebări frecvente
Ce vrei să spui prin amânarea analizei?
Amânarea analizei este starea în care fișierele dvs. JavaScript se încarcă după conținutul site-ului web din browser. Aceasta înseamnă că defer nu va lua parte la încărcare și redare.
Deci, atunci când un utilizator solicită site-ul dvs. în browser, amânarea analizei JavaScript nu așteaptă să încarce JavaScript în browser și afișează imediat conținutul. Cu cuvinte simple, conținutul tău se afișează mai întâi și apoi se încarcă.
Cum să eliminați blocarea randării de pe site-ul WordPress?
Una dintre abordările de succes pentru a elimina blocarea randării de pe site este amânarea analizei înaintea celorlalte elemente ale site-ului. O altă metodă de a minimiza redarea este concatenarea ambelor JS și CSS împreună.
Ce instrumente pot folosi pentru a identifica JS non-critice pe site-ul meu?
Pentru a identifica dacă JavaScript este critic pentru site-ul dvs. web sau nu, puteți accesa următoarele instrumente.
Puteți amâna analizarea JavaScript în WordPress prin intermediul pluginului Auto Optimize?
Cu instrumentul de optimizare automată, puteți amâna cu ușurință analizarea JavaScript. Pentru a asigura procesul, trebuie să instalați și să activați pluginul ca de obicei. Odată ce pluginul este instalat și activat, vizitați setările și optați pentru opțiunea JS, CSS și HTML.
Acum optimizați opțiunea de cod JavaScript și veți debloca opțiunile. Acum bifați marcați fișierele JS agregate și lăsați altele.
În plus, pluginul vă permite să excludeți JavaScript pe care nu doriți să îl redați. Odată ce modificările sunt făcute, faceți clic pe butonul de salvare.
Încheierea
Pentru a vă optimiza site-ul și a reduce timpul de încărcare, este important să amânați analizarea JavaScript în WordPress.
Sperăm că cu acest articol ați înțeles sensul analizei cerbului și cum vă poate ajuta site-ul să se claseze în partea de sus a paginilor de căutare. Noroc!