Amânați analizarea Javascript - 5 moduri de a o remedia și de a crește viteza (2024)

Ca cineva care încearcă să înțeleagă cum să amâne analiza Javascript, credem că aveți o problemă. Dețineți sau ați vizitat un site web al unei persoane pe care o cunoașteți (poate un client?) Și este necesară încărcarea pentru totdeauna. Și când l-ați rulat prin instrumentele de testare a vitezei site-ului, ați primit o recomandare pe care nu sunteți sigur cum să o implementați.

În acest articol, vom împărtăși mai multe moduri de a amâna Javascript și de a remedia acest avertisment și, în cele din urmă, de a încărca site-ul web mai repede, fără a arunca această eroare!

Dacă nu ai timp, iată câteva acțiuni rapide pe care le poți face:

Instrucțiuni pentru modul de amânare a analizei JavaScript

1. Descărcați pluginul Async aici.
2. Faceţi clic pe Pluginuri> Adăugare nouă> Încărcați pluginul și selectați fișierul pe care tocmai l-ați descărcat.
3. Faceţi clic pe Activati a pluginului instalat.
4. Accesați Plugins și faceți clic pe Setări cont pentru pluginul Async pe care tocmai l-ați instalat.
5. Clic pe Activați Async Javascript, Sau Aplicați Async ca două dintre cele mai frecvente modalități de a aplica remedierea.
6. Testați-vă site-ul web, pentru a vedea că totul funcționează în continuare bine.

De ce este importantă procedura de implementare a amânării analizei Javascript? Dacă nu amânați analiza Javascript, site-ul dvs. va părea că se încarcă încet. Javascript este în esență un element important în limba web, permite dezvoltatorilor web să creeze funcționalități „dinamice”.

Cu toate acestea, în majoritatea cazurilor, fișierele Javascript tind să devină destul de mari. De asemenea, s-ar putea să treacă de pe servere terțe. Acest lucru face descărcarea lentă. Dar aceasta este doar jumătate din problemă.

Cea mai mare problemă este că, dacă nu există o amânare a analizei Javascript, browserul este BLOCAT de la afișarea conținutului. Site-ul web NU RENDEȘTE. Și cum arată acest lucru pentru un utilizator? Se pare că site-ul este fie lent, rupt sau complet mort. 

Problema se agravează pe dispozitivele mobile, unde puterea de procesare disponibilă, împreună cu lățimea de bandă disponibilă fac experiența să se simtă și mai rău.

Și ce vor face utilizatorii care au o astfel de experiență? Vor sări de pe site-ul dvs. web, să nu se mai întoarcă niciodată!

Dacă ați vizitat industria web de ceva timp și încercați să îmbunătățiți SEO-ul site-ului dvs. web, știți deja că performanța site-ului web este crucial în îmbunătățirea vizibilității motorului dvs. de căutare.

Și dacă ați folosit Google PageSpeed ​​Insights pentru a vă verifica site-ul, pe lângă „amânarea analizei Javascript”, există și mai multe avertismente criptice, cum ar fi cel care spune „Eliminați resursele de blocare a redării”.

Aceste lucruri tehnice par să aibă cel mai mare impact asupra vitezei de încărcare! 

Înlătura?! Dar cum ar trebui să elimin aceste fișiere cruciale de pe site-ul meu web?

Nu vă faceți griji, suntem aici pentru a vă ajuta să remediați aceste avertismente, să rezolvați aceste probleme și, în cele din urmă, să vă încărcați paginile mai repede!

Pentru ca tu nu trebuie să le eliminați. Tot ce trebuie să faceți este să amânați analiza JavaScript.

Aruncați o privire la acest scurt videoclip de mai jos pentru a vedea cât de simplu este să amânați analiza Javascript folosind una dintre metodele de mai jos:

În cazul non-geekspeak, ceea ce înseamnă acest lucru este că trebuie să modificați câteva lucruri în WordPress, pentru a permite paginii să vă lase conținutul să se încarce mai întâi înainte de a încărca sau analiza fișierele JavaScript. 

Acest lucru se datorează faptului că, dacă nu amânați analiza Javascript, redarea site-ului devine o operațiune foarte grea și, așa cum am spus mai sus, site-ul va arăta ca fiind defect.

Pentru a ne asigura că utilizatorul rămâne pe site, am dori să îi anunțăm că se întâmplă ceva și să arătăm conținut utilizatorului, în loc să așteptăm ca browserul să facă tot ce se întâmplă înainte de a-i arăta ceva utilizatorului. . 

De altfel, dacă doriți să vă faceți WordPress rapid, există câteva plugin-uri, cum ar fi acesta care poate face o diferență reală în performanță în câteva minute (cu un efort mic până la zero).

Daca esti interesat, WP Rocket poate configura amânarea analizei Javascript și a multor alte modificări pentru a vă face site-ul mai rapid, trebuie doar să faceți clic pe bannerul de mai jos pentru a-l verifica. 

Nu sunteți gata să utilizați un plugin pentru moment? Citiți mai departe... 

Ce este amânarea analizei JavaScript?

Amânarea analizei Javascript înseamnă utilizarea „defer"Sau"async„pentru a evita blocarea randării unei pagini. Această comandă HTML instruiește browserul să execute / analiza scripturile după (amânare) sau asincron (în paralel) la încărcarea paginii. Aceasta permite conținutul să se afișeze fără a aștepta ca scripturile să fie încărcate. .

Configurând amânarea analizei JavaScript, veți putea lăsa conținutul să se încarce mai repede și cu prioritate ridicată.

De ce este asta?

Vedeți mai jos acest explicator excelent care demonstrează modul în care sunt încărcate paginile web și modul în care fișierele JavaScript împiedică foarte mult timpul de încărcare al site-ului dvs. web.

Continuând cu videoclipul de mai sus, să aruncăm o scurtă privire la ce se întâmplă atunci când cineva vă vizitează site-ul: 

1. Când un utilizator face clic pe un link care indică site-ul dvs. web, browserul utilizatorului îl va solicita de la serverul dvs., pe care serverul dvs. îl va „servi” apoi în browserul utilizatorului.
2. Browserul utilizatorului primește și vede conținutul HTML al paginii dvs. web și va începe redarea acestuia. Va începe să vă construiți pagina web de sus în jos.
3. Dacă găsește fișiere JavaScript pe parcurs, browserul se va opri și îl va prelua (dacă este un fișier extern), apoi îl va analiza
4. Numai după preluarea și analizarea completă a fiecărui script, acesta va continua să încarce restul de conținut.

Probabil că ați început deja să vedeți unde se află problema.

Atunci când paginile dvs. au o mulțime de fișiere JavaScript, acestea pot avea un impact masiv asupra timpului de încărcare al site-ului dvs. - negativ.

Browserul utilizatorului dvs. va afișa continuu pictograma de încărcare sau roata rotativă în timp ce analizați și încărcați scripturile înainte de a vă arăta conținutul real - acest lucru este vizibil în special pe browserele mobile sau utilizatorii cu conexiuni de date de viteză redusă.

Dacă durează mai mult de câteva secunde, mai ales dacă vă serviți scripturile de pe un server extern (iar serverul respectiv se întâmplă să aibă probleme în acest moment) - vizitatorii dvs. vor începe să devină nebuni.

În acest timp, utilizatorul dvs. nu vede decât o pagină albă albă. Nu este unul dintre cele mai frustrante lucruri de pe internet? Se presupune că totul este instantaneu pe web, de ce trebuie să aștepte încărcarea paginii dvs.?

Dacă un utilizator așteaptă mai mult de 4 secunde, va începe să devină nervos. Dincolo de 8 secunde și site-ul dvs. este la fel de bun ca mort - utilizatorul va sări de pe un alt site web.

Ați pierdut un vizitator și probabil afacerea lor. 

Complicația suplimentară este că de multe ori, aceste fișiere JS sunt adăugate pe site-ul dvs. web prin pluginuri și teme esențiale pe care le-ați instalat, astfel încât nu puteți scăpa cu ușurință de ele cu ușurință.

Deci ce faci?

Pentru a rezolva acest lucru, trebuie să amânați analiza JavaScript. Acest lucru funcționează analizând scripturile după ce conținutul principal a fost încărcat. Consultați imaginea de mai jos pentru a vedea exact impactul în timpul de încărcare. După cum putem vedea, comanda de amânare forțează browserul să execute Javascript ulterior, în timp ce asincronizarea permite ca lucrurile să se întâmple în paralel cu descărcarea.

Prin urmare, atunci când un utilizator vă vizitează site-ul, browserul dvs. va continua să analizeze totul de sus în jos, dar sări peste fișierele dvs. JavaScript pentru mai târziu. În acest fel, utilizatorii dvs. vor putea să vă vadă conținutul imediat fără a fi nevoie să așteptați. 

Dacă ați urmărit videoclipul de mai sus, ați văzut că atributele „asincronizare” și „amânare” ajută foarte mult.

Dar cum ai face asta în WordPress? De asemenea, când este momentul potrivit pentru a le folosi? Să vedem și să începem!

Analizați-vă site-ul web

Înainte de a începe, trebuie să știți dacă trebuie să implementați remedierea Javascript de amânare pe site-ul dvs. sau nu. Pentru a afla dacă aveți nevoie, puteți utiliza mai multe instrumente care sunt disponibile online.

Câteva exemple sunt următoarele:

1. GTMetrix

Acesta funcționează verificând atât valorile PageSpeed, cât și valorile Yslow și vă oferă un scor de la F la A. Ele vă oferă, de asemenea, recomandări, precum și sfaturi despre cum să vă îmbunătățiți site-ul web dacă se găsesc probleme. Vă va spune în mod specific dacă trebuie să amânați analiza JavaScript. 

În general, scorul ar trebui să fie de cel puțin 71.

Imaginea de mai jos prezintă un site web care nu necesită amânare. 

2. Instrumente PageSpeed

un instrument dezvoltat de Google, PageSpeed ​​Insights este un alt instrument cuprinzător care vă oferă informații cuprinzătoare despre problemele de performanță ale site-ului dvs., împreună cu sfaturi pentru a le remedia la fel ca GTMetrix.

Unul dintre cele mai bune lucruri despre acest instrument este că include linkuri către ghiduri și resurse detaliate pentru a vă ajuta să remediați toate problemele de performanță. Imaginea de mai jos prezintă un site web care trebuie să implementeze amânarea analizei JavaScript.

3. Pingdom Tools 

Un alt instrument popular de testare a performanței site-ului web, disponibil gratuit pentru toată lumea.

Deși nu pare să vă spună în mod explicit dacă trebuie să amânați analiza JavaScript, puteți verifica cât a durat încărcarea scripturilor dvs. datorită paginii lor complete de rezultate.

Imaginea de mai jos prezintă un site web care are aproape jumătate din pagina sa constând din JavaScript - un indicator excelent că ați putea dori să vă amânați scripturile. 

4.  Varvy PageSpeed 

Un alt instrument excelent care vă va spune dacă site-ul dvs. are scripturi de blocare a redării.

Cel mai bine este că vă permite să știți exact ce sunt, la fel ca în imaginea de mai jos: 

Bine in regula!

Acum aveți acces la instrumente care vă pot ajuta să determinați dacă trebuie să implementați amânarea analizei fișierelor JavaScript.

Dar s-ar putea să vă întrebați de ce nu doar să îl implementați și să îl lăsați în pace? Dacă amânați analiza incorectă a JavaScript-ului, puteți rupe lucrurile și poate fi frustrant să remediați dacă nu sunteți expert în tehnologie.

Simpla activare a modului de amânare nu înseamnă că totul este setat să fie uitat și va funcționa bine. Va trebui să verificați dacă ați făcut-o corect și să vă asigurați că totul funcționează în continuare conform intenției. 

De exemplu, dacă utilizați jQuery, trebuie să alegeți cu atenție care dintre scripturile dvs. ar trebui să le amânați, deoarece pare să existe o problemă cu amânare și jQuery.

În plus, veți găsi că există o mulțime de întrebări pe Stack Overflow despre jQuery, async și amânare, care este adesea despre modul în care ar trebui să implementați amânarea și asincronizarea, dacă ar trebui, la scripturile dvs. care se bazează pe jQuery. 

Deci, care sunt rezultatele? Trebuie să vă amânați scripturile?

Dacă da, atunci să aflăm acum cum să amânăm JavaScript în WordPress!

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

Amânarea analizei JavaScript în WordPress poate fi destul de simplă.

Puteți instala unul dintre miile de pluginuri în depozitul WordPress și sunteți bine să mergeți. Dar există și modalități avansate de a face acest lucru dacă aveți nevoie de mai mult control, mai ales dacă utilizați scripturi complexe pentru a vă face site-ul mai atractiv și mai interactiv. 

În această secțiune, vom verifica cinci moduri diferite de a efectua amânarea analizei JavaScript în WordPress: prin pluginuri, prin functions.php și editarea manuală a codului. 

Există atât de multe pluginuri în depozitul WordPress care vă pot ajuta să vă îmbunătățiți performanța site-ului.

Există unele care sunt dedicate unei anumite sarcini, cum ar fi reducerea codului HTML și există pluginuri care încearcă să încorporeze toate modificările legate de performanță într-un singur plugin, cum ar fi capacitatea de a minimiza și amâna fișierele CSS și JavaScript, de a implementa și de a utiliza cache-ul browserului. (pe care le-am tratat pe larg în acest articol) și altele. 

Cu toate acestea, nu toate pluginurile sunt create egal. Unele funcționează excelent, altele funcționează ok, iar altele nu funcționează deloc și ar putea chiar să rupă unele sau toate funcționalitățile site-ului dvs. 

(Dacă preferați ca cineva să experimenteze acest lucru pentru dvs., puteți face acest lucru folosind un concert Fiverr ieftin, făcând clic pe butonul de mai jos.)

1. Amânați analiza Javascript folosind Async Plugin

Sincer vorbind, vă recomandăm să optați pentru un plugin premium (care este foarte ieftin), dar sunteți siguri că remediați nu doar acest avertisment, ci o gamă întreagă de probleme de viteză de încărcare a site-ului web.

Vom începe cu unul dintre cele mai populare care sunt menite să facă o singură treabă definită de acest articol.

Una dintre cele mai populare alegeri pentru a efectua acest job este Async Javascript. Acest plugin se concentrează pe îmbunătățirea performanței site-ului dvs. prin modificarea modului în care sunt încărcate scripturile și, ca WP Rocket de mai jos, vine, de asemenea, cu funcții avansate suplimentare care vă permit să excludeți anumite scripturi de la amânare.

Iată pașii pe care trebuie să îi efectuați pentru a utiliza acest plugin.

1. Descărcați pluginul Async aici.
2. Faceţi clic pe Pluginuri> Adăugare nouă în backend-ul WP.
3. Faceţi clic pe Încărcați pluginul și selectați fișierul pe care tocmai l-ați descărcat.
4. Ca alternativă, căutați Async Javascript și faceți clic Instalaţi acum.
5. Faceţi clic pe Activati a pluginului instalat.
6. Accesați Plugins și faceți clic pe Setări cont pentru pluginul Async pe care tocmai l-ați instalat.
7. Vă sugerăm să faceți clic pe Activați Async Javascript, Sau Aplicați Async ca două dintre cele mai frecvente modalități de a aplica remedierea.
8. Dacă acestea nu funcționează, puteți încerca câteva combinații diferite.
9. Testați-vă site-ul web, pentru a vedea că totul funcționează în continuare bine.

Poate că unul dintre punctele sale forte este că, în afară de capacitatea de a exclude anumite scripturi de la amânare, aveți și opțiunea de a alege ce scripturi să fie amânate în schimb:

De asemenea, puteți observa că aveți opțiunea de a sincroniza sau de a amâna un script. Pentru mai multe informații despre diferența dintre cele două, puteți citi acest lucru articol.

O caracteristică unică a acestui plugin este că puteți specifica excluderea unei anumite teme sau pluginuri.

Există, de asemenea, o opțiune de a integra GTMetrix pe site-ul dvs., astfel încât să puteți verifica întotdeauna performanța acestuia. Rețineți că de fiecare dată când efectuați un test, totuși, un credit API va fi dedus din contul dvs. GTMetrix.

În timp ce unii oameni vor recomanda WP amânat JavaScript, acest plugin nu a fost actualizat de mai mult de 3 ani și nu a fost testat cu ultimele 3 versiuni majore, așa că vă recomandăm să nu îl utilizați. Este posibil să funcționeze în continuare, dar este netestat, deci este un risc pe care nu ar trebui să-l asumi.

Dacă aveți un site relativ simplu și căutați să vă îmbunătățiți în continuare timpul de încărcare, atunci ar putea fi exact ceea ce aveți nevoie. Acest plugin nu necesită deloc configurație - pur și simplu instalați, activați și uitați.

Din nou, rețineți că acesta nu este recomandat pentru site-uri complexe, cum ar fi comerțul electronic, din cauza lipsei de opțiuni avansate de ajustare și din cauza vârstei sale. Abilitatea de a regla fin opțiunile de amânare JavaScript este crucială pentru site-urile mari și complexe.

2. WP Rocket

În prezent, principalul plugin de performanță WordPress, WP Rocket oferă nu numai posibilitatea de a amâna analiza fișierelor JavaScript, ci și fișierele dvs. CSS. În plus, veți obține o mulțime de alte opțiuni de îmbunătățire a performanței.

Unele caracteristici includ următoarele: 

• Minimizare - micșorează codul site-ului dvs., astfel încât acesta să se încarce mai repede. O face eliminând spațiile albe și alte caractere inutile din cod, fără a afecta funcționalitatea sa de bază.
• Concatenare - combină mai multe fișiere CSS și JavaScript într-unul singur.
• Încărcare leneșă - acesta este modul de amânare pentru fișierele video și alte conținut multimedia, cum ar fi imaginile. Întârzie încărcarea acestor fișiere care consumă resurse până după ce utilizatorul derulează la ele.

Unul dintre cele mai bune lucruri despre WP Rocket este că, odată ce îl instalați și îl activați, îl puteți lăsa în pace și veți obține automat câștiguri de performanță.

Cu toate acestea, puteți configura setări avansate pentru un spor de performanță și mai mare, dar rețineți că unele dintre ele ar putea avea efecte adverse pe site-ul dvs. Și din această cauză, opțiunea lor de amânare pentru fișierele JavaScript și CSS nu sunt activate în mod implicit, deoarece, dacă se face, aveți grijălessei pot sparge lucrurile.

Din fericire, puteți exclude anumite scripturi de la amânare.

Puteți încerca să excludeți mai întâi toate scripturile și apoi să amânați analiza fișierelor Javascript unul câte unul până când găsiți unul problematic. Ei au documentare extinsă să te ajut cu asta. În acest fel, veți putea maximiza îmbunătățirile de performanță fără a rupe sau sacrifica unele sau toate funcționalitățile site-ului dvs. web.

WP Rocket este un plugin premium, dar având în vedere prețul și funcționalitatea oferite (nu doar amânarea și asincronizarea fișierelor JS, ci multe alte optimizări care sunt garantat pentru a vă face site-ul web mai rapid), credem că merită foarte mult prețul.

Descărcați WP Rocket

3. Pachetul Speed ​​Booster

Un alt plugin excelent, all-in-one, care vă permite să amânați analiza fișierelor Javascript este Pachetul Speed ​​Booster. Este similar cu WP Rocket în ceea ce privește caracteristicile, dar este gratuit. Are majoritatea caracteristicilor de bază ale WP Rocket, cum ar fi reducerea, amânarea, eliminarea fișierelor inutile etc.

Mai jos puteți vedea câteva dintre caracteristicile disponibile în plugin: 

Sub fila Advanced, puteți alege să excludeți unele scripturi fie de la mutarea în subsol, fie de la amânare sau ambele. Cu toate acestea, puteți adăuga până la 4 scripturi excluse, ceea ce este cu siguranță o limitare pentru site-urile complexe și mari. 

În general, este o bună alternativă gratuită la WP Rocket, potrivită pentru site-urile mici.

4. Folosirea funcțiilor.php tweaks

Ce se întâmplă dacă nu doriți să utilizați pluginuri?

Există un alt truc pe care îl puteți face pentru a amâna analiza Javascript în WordPress și este prin editarea fișierului funcției.php a temei dvs.

Pur și simplu copiați codul de mai jos și lipiți-l în partea de jos a fișierului function.php al temei: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Rețineți că s-ar putea să vă deranjați site-ul dacă faceți greșit, așa că acordați o atenție deosebită și asigurați-vă că editați fișierul corect în tema corectă și că lipiți fragmentul de cod în locația corectă. Asigurați-vă că nu ștergeți / modificați altceva.

Din fericire, puteți crea o temă copil pentru a face editări sigure la fișierul funcții.php. În plus, dacă înlocuiți sau actualizați vreodată tema, puteți păstra cu ușurință toate modificările personalizate din fișier. Iată un articol minunat care explică cum să creați o temă pentru copii. Odată ce ați creat o temă pentru copii, lipiți doar fragmentul de cod în fișierul function.php al copilului, salvați-l și totul este gata.

Citeste mai mult: Blocarea mesajelor este activă

5. Modificați manual codul

Acest lucru ar putea părea înfricoșător, mai ales dacă nu vă place codificarea, dar pentru utilizatorii avansați, modificarea manuală a codului este o modalitate excelentă de a amâna analiza fișierelor JavaScript în WordPress. 

Varvy are un fragment de cod excelent care permite încărcarea completă a conținutului inițial al paginii dvs. web înainte de a încărca orice alte scripturi externe. Fragmentul de cod este mai jos:

  function downloadJSAtOnload () {
    element var = document.createElement ("script");
    element.src = "//www.domeniul dvs..com/defer.js";
    document.body.appendChild (element);
  }
  dacă (window.addEventListener)
    window.addEventListener („încărcare”, downloadJSAtOnload, false);
  altfel dacă (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;

Înlocuiți defer.js cu propriul fișier script. După ce l-ați modificat pentru a reflecta propriul script, lipiți-l chiar înainte de codul HTML etichetă. În WordPress, puteți face acest lucru editând fișierul footer.php al temei.

Din nou, este recomandat să utilizați o temă copil dacă doriți să creați editări în fișierele temei. O mică notă: editarea footer.php prin tema copil este diferită de functions.php: trebuie să copiați întregul footer.php al temei dvs. principale împreună cu conținutul acesteia în tema copilului dvs. și apoi să faceți / adăugați modificările. 

Dacă nu doriți să accesați hassle-ul de a edita footer.php, puteți utiliza un plugin numit Inserați anteturi și subsoluri. 

Pur și simplu lipiți fragmentul de cod în caseta „Scripturi în subsol”, apăsați pe Salvare și veți avea scriptul adăugat în zona de jos a codului site-ului dvs., deasupra etichetă. 

Și acesta este toate modurile în care puteți amâna analiza JavaScript în WordPress! Dar funcționează? Au îmbunătățit performanța site-ului dvs.? Să verificăm rezultatele!

Testarea rezultatelor

Pentru a testa rezultatele, accesați GTMetrix.com, PageSpeed ​​Insights și Pingdom Tools pentru a vedea dacă gradul de performanță și timpul de încărcare s-au îmbunătățit.

În GTMetrix, scorul dvs. ar trebui să fie de cel puțin 71. Cu cât mai mult, cu atât mai bine! Un scor perfect ar dori acest lucru :-) 

În PageSpeed ​​Insights, căutați „primele vopsele”:

În general, atunci când testați dacă implementarea dvs. de amânare a analizei JavaScript a dus la amânarea scripturilor, vizați rezultate verzi în Prima pictură conținută și Prima pictură semnificativă.

Comparați înainte și după amânare și verificați dacă se îmbunătățesc.

Pentru Pingdom Tools, aruncați o privire în secțiunea ordinii de încărcare și vedeți dacă majoritatea, dacă nu toate, din fișierele script sunt încărcate ultima dată. Comparați înainte și după amânare și urmăriți dacă fișierele script au schimbat poziția în ordinea de încărcare (adică s-au încărcat mai devreme sau mai târziu). 

Rezultatele v-au satisfăcut? Dacă da, o treabă grozavă! Dacă nu, încercați să experimentați mai mult. Dacă ați folosit alte metode pe lista noastră, încercați să utilizați pluginuri avansate care vă permit să vă personalizați opțiunile de amânare și performanță. Mai mult, consultați câteva recomandări de la Google în secțiunea următoare. S-ar putea să te ajute.

Cum să amânați analiza JavaScript folosind un script

Există diferite tehnici pe care le puteți utiliza pentru a amâna analiza JavaScript. Următoarea secțiune discută ce trebuie să faceți. 

În rezumat, trebuie să efectuați următoarele:

1. Copiați codul de mai jos și adăugați-l chiar înainte de eticheta în HTML.
2. Înlocuiți example.js în codul de mai jos cu fișierul care conține scriptul de amânat.
3. Salvați modificările.
4. Testați-vă site-ul web pentru a vedea efectul.

Să analizăm acești pași mai detaliat:

• Utilizați un script pentru a apela un fișier JS extern odată ce pagina inițială este terminată de încărcare. Pe varvy.com, Patrick Sexton sugerează o metodă care permite încărcarea conținutului site-ului web, înainte de a încărca un JS (pentru a se asigura că utilizatorul poate vedea mai întâi conținutul). Acest lucru asigură că calea de încărcare critică nu este afectată de scripturi care cauzează blocarea randării. Metoda implică crearea unui fișier extern care nu este necesar pentru afișarea conținutului inițial. Apoi adăugând următorul script chiar înainte de în HTML. Următorul exemplu folosește un fișier example.js, care ar trebui actualizat corespunzător. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.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>

  Odată ce pagina web se termină de încărcat, scriptul va începe descărcarea și executarea exemplu.js - problema este că va trebui să creați fișierul manual.

• Folosind atributele asincronizate sau de amânare. Eticheta JS async or amâna atributele acționează într-un mod similar - modul în care funcționează este de așa natură încât reduc la minimum timpul în care analiza HTML se oprește pentru a aștepta descărcarea și executarea scripturilor. async permite descărcarea fișierelor JS să aibă loc asincron, mai degrabă decât sincron, adică se deschide un nou fir de descărcare în timp ce HTML continuă să analizeze. Amânarea instruiește browserul să execute scriptul DUPĂ finalizarea încărcării paginii. Acesta este un alt mod de a permite analiza paginii să se finalizeze și, astfel, să nu creeze un impact asupra timpului de încărcare. Ambele etichete minimizează blocarea redării JS. În utilizarea celor două, JS nu trebuie să aștepte ca HTML să termine analiza înainte de a începe să descarce sau să execute - ceea ce asigură că pagina încă se încarcă rapid. Vedeți cum se întâmplă execuția pentru asincronizare și respectiv amânare în imaginile de mai jos.
  
  

• Mutați JavaScript în partea de jos a paginii. A treia și ultima sugestie este de a muta oricare <script> etichete în partea de jos a paginilor (mai ales dacă nu sunt critice, cum ar fi reclamele). Această metodă nu este ideală, deoarece browserul va fi în continuare ocupat până când ultimul script a fost descărcat complet și analizat. Având în vedere că browserul pare ocupat, este posibil ca unii vizitatori să nu interacționeze cu pagina până când nu este complet încărcată, rezultând o experiență de utilizator potențial negativă.

Sugestii de la Google

Google are o mulțime de resurse pentru îmbunătățirea performanței site-ului dvs. web. Au chiar o pagină dedicată îmbunătățirii timpului de încărcare a scriptului site-ului dvs., pe care o puteți verifica aici.

În meniul din stânga, puteți găsi și alte resurse care vă ajută să vă îmbunătățiți performanța site-ului. Asigurați-vă că le verificați și dacă raportul dvs. PageSpeed ​​Insights a raportat probleme legate de acestea.

Pentru o prezentare generală, Google vă sugerează să introduceți scripturile critice în loc și să asincrați sau să amânați scripturile non-critice. Asta înseamnă că scripturile care sunt solicitate de site-ul dvs. ar trebui încorporate în HTML. Aceasta este, totuși, sarcina dezvoltatorilor de teme și pluginuri WordPress - dar dacă ar fi să creați tema sau pluginul, țineți cont de acest lucru.

Citeste mai mult:  Cum să angajați (MARI) dezvoltatori Javascript

În plus, Google a prezentat și o modalitate prin care puteți identifica manual care dintre scripturile dvs. blochează redarea paginii dvs. web, având un timp de încărcare foarte lung. Puteți face acest lucru utilizând instrumentele de dezvoltare Chrome ale aplicației Chrome acoperire tab.

Amânați CSS neutilizat

O problemă similară pe care s-ar putea să o vedeți în aceste zile, tot în instrumentul Pagespeed insights, este amânarea CSS neutilizate. Deși aceasta este o problemă similară, rădăcinile sale sunt oarecum diferite. În esență, CSS ar trebui să fie restructurat pentru a remedia corect acest lucru.

{loadpostion imh-embed}

Întrebări Frecvente

Cum repar amânarea analizei JavaScript în WordPress?

Pentru a remedia analizarea amânării Javascript în WordPress, trebuie să faceți câteva modificări minore la codul dvs. Puteți găsi toate scripturile și puteți adăuga fișierul amâna etichetați-le sau puteți instala un plugin care face acest lucru automat. De asemenea, puteți crea un script care încarcă fișierele în mod asincron, așa cum este demonstrat în Cum să amânați analiza Javascript utilizând o secțiune de script din acest articol.

Ce este defer JavaScript?

Amânarea analizei Javascript este procesul de instruire a browserului vizitatorilor site-ului dvs. web pentru a încărca fișiere specifice DUPĂ ce pagina a fost încărcată. Acest lucru permite utilizatorului să vadă conținutul paginii mult mai repede decât dacă nu ați implementat amânarea analizei Javascript

Care este diferența dintre Javascript asincron și amânat?

Async înseamnă că conținutul Javascript este încărcat ca o conexiune proprie nouă, în paralel cu orice alt cod existent. Cu asincronizarea, browserul creează un nou fir de procesare care nu va încetini descărcările existente în timp ce Javascript este descărcat și executat. Amânați pe de altă parte, cere browserului să analizeze scriptul, după ce restul conținutului a fost descărcat. Deși acest lucru este de obicei bun pentru viteză, ar putea exista unele probleme cu conținutul dvs., dacă acesta face referire la scriptul care a fost amânat (deoarece nu va fi disponibil).

Cum reduc JavaScript în WordPress?

Pentru a minimiza Javascript în WordPress, va trebui să implementați un plugin care face acest lucru automat. Puteți citi mai multe despre acest lucru aici. 

Încheierea

Și tocmai ați asistat la modul în care amânați analiza JavaScript în WordPress.

Am aflat că se poate realiza fie prin plugin-uri, fie prin modificări manuale. Are multe avantaje pentru site-ul dvs., cum ar fi îmbunătățirea SEO, experiență mai bună a utilizatorului și timpi de încărcare mai rapide. Prin urmare, este important să vă asigurați că amânați cât mai multe scripturi pentru a obține performanțe maxime.

Dar amintiți-vă, păstrați întotdeauna o copie de rezervă și testați foarte mult pentru a vă asigura că ați amânat scripturile corecte! Ar putea părea plictisitor, dar dacă se face corect, beneficiile și câștigurile sunt enorme.

Dacă doriți să maximizați cu adevărat viteza de încărcare a site-ului dvs. web, vă sugerăm să lăsați acest lucru la PRO, cum ar fi băieții de la WP Rocket, pentru a obține beneficiile maxime ale acestui lucru și sute de alte acțiuni pentru a vă încărca site-ul web mai repede.

Vizitați WP Rocket pentru a vă face site-ul web mai rapid astăzi  

Despre autor

Autor: David AttardSite-ul: https://www.linkedin.com/in/dattard/E-mail: david@collectiveray.com

David a lucrat în sau în jurul industriei online și digitale în ultimii 21 de ani. Are o vastă experiență în industriile software și web design folosind WordPress, Joomla și nișele din jurul lor. A lucrat cu agenții de dezvoltare software, companii internaționale de software, agenții de marketing locale și acum este șeful operațiunilor de marketing la Aphex Media - o agenție SEO. În calitate de consultant digital, se concentrează pe a ajuta companiile să obțină un avantaj competitiv folosind o combinație a site-ului lor web și a platformelor digitale disponibile astăzi. Combinația sa de experiență tehnologică, combinată cu o puternică perspicacitate în afaceri, aduce un avantaj competitiv scrierilor sale.