Amânați analizarea Javascriptului în WordPress [Folosirea amânării și asincronului]

Site-urile WordPress cu încărcare rapidă oferă beneficii serioase atunci când vine vorba de îmbunătățirea experienței utilizatorului pentru vizitatori, îmbunătățirea vizibilității site-ului dvs. pe motoarele de căutare și creșterea traficului organic al site-ului dvs.

O pagină web conține HTML, CSS, Javascript și imagini, iar fiecare dintre acestea trebuie optimizată pentru a reduce timpul de încărcare a paginii. Imaginile au unul dintre cele mai mari efecte asupra dimensiunii paginii, așa că este important să reduceți dimensiunile fișierelor de imagine folosind un plugin de optimizare a imaginii WordPress.

Pentru a îmbunătăți și mai mult performanța paginii, puteți amâna analizarea javascript-ului în WordPress, ceea ce înseamnă că puteți sfătui browserele să încarce conținutul paginii și imaginile înainte ca Javascript să fie încărcat. Luarea acestei măsuri înseamnă că elementele Javascript, cum ar fi formularele și glisoarele, pot dura câteva secunde suplimentare pentru a încărca, dar acesta este un preț mic de plătit, deoarece timpii de încărcare a paginii sunt îmbunătățiți semnificativ.

Codul Javascript poate fi executat ulterior folosind două tehnici numite Defer și Async . Ambele metode sunt acceptate de pluginurile populare de memorare în cache WordPress, deși soluțiile dedicate vă vor oferi puțin mai mult control asupra fișierelor Javascript care sunt încărcate ulterior.

În acest articol, voi explica care sunt beneficiile de a amâna încărcarea fișierelor Javascript și vă voi arăta cinci plugin-uri WordPress utile care va simplifica procesul pentru dvs.

Vă încurajez să citiți întregul articol pentru a înțelege pe deplin subiectul, dar dacă sunteți începător, singurul lucru pe care ar trebui să îl luați din acest articol este că Defer and Async poate îmbunătăți semnificativ timpul de încărcare a paginii site-ului dvs.

Diferite moduri de a amâna analiza Javascript în WordPress (cu Defer & Async)

Javascript s-a impus ca un bloc important al site-urilor WordPress, fiind folosit pentru a afișa butoane, formulare, galerii media, audio, video, cronometre cu numărătoare inversă, cronologie de rețele sociale și multe altele.

Din păcate, Javascript este, de asemenea, unul dintre motivele principale pentru care paginile web se încarcă lent, deoarece browserul trebuie să oprească, să descarce și să execute fiecare script înainte de a putea continua să analizeze marcajul HTML al paginii.

Analiza este procesul prin care browserul analizează și convertește codul paginii într-un format pe care îl poate executa. Orice cod care oprește acest proces se numește „Blocare randare”, deoarece întârzie procesul de redare a paginii pentru vizitatori.

Resursele de blocare a randării sunt un motiv comun pentru care un site web WordPress se încarcă lent. CSS critic poate fi afișat inline pentru a preveni blocarea redării, dar este mai bine să amânați încărcarea Javascript mai târziu folosind Defer sau Async pentru a împiedica codul Javascript să blocheze redarea paginii.

De asemenea, este o practică bună să eliminați codul Javascript neutilizat și să reduceți timpul de execuție Javascript. O modalitate prin care puteți face acest lucru este prin reducerea dimensiunii fișierelor Javascript mari printr-un proces numit Minification , care elimină spațiile albe și codul inutil din fiecare fișier Javascript.

Una dintre cele mai importante valori pe care serviciile de evaluare comparativă a site-urilor web, precum Google PageSpeed ​​Insights și GTmetrix iau în considerare este First Contentful Paint, care este timpul necesar pentru ca primul conținut să fie afișat vizitatorilor. Google afirmă că un timp FCP de 0 până la 1,8 secunde este bun și 1,8 până la 3 secunde este moderat. Orice lucru peste 3 secunde este considerat lent.

Tot ce trebuie să faceți este să introduceți adresa URL a unei pagini într-un serviciu de evaluare comparativă a site-ului web pentru a vedea fișierele Javascript și CSS care blochează redarea paginii. După cum puteți vedea din captura de ecran de mai jos, descărcarea fișierelor CSS și Javascript care blochează randarea poate dura câteva secunde, așa că dacă puteți elimina aceste resurse, paginile dvs. se vor încărca mult mai repede.

Cea mai eficientă modalitate de a elimina fișierele Javascript care blochează randarea este utilizarea atributelor defer și async . Aceste atribute booleene pot fi utilizate numai cu elementul HTML de script atunci când atributul SRC este folosit pentru a apela fișiere externe.

 <script src="javascript.js"></script>

 <script defer src="javascript.js"></script>

 <script async src="javascript.js"></script>

Când adăugați atributul defer sau async la elementul de script HTML, sfătuiți browserul să descarce fișierul în același timp în care pagina este analizată. Cu defer, fișierul este executat odată ce pagina a fost complet analizată.

În schimb, atributul asincron este o operație asincronă care execută fișierul imediat ce a fost descărcat. Ca atare, timpul total pentru analizarea unei pagini cu asincron va fi puțin mai mare, deoarece browserul va opri pentru scurt timp analizarea HTML pentru a executa fișierul.

Dacă ar trebui să specificați atât amânare, cât și asincron, browserele vor folosi asincron.

Un standard important de înțeles este Document Object Model, care este adesea denumit DOM. DOM reprezintă un întreg document, cum ar fi un fișier XML sau o pagină HTML, ca un singur obiect. Elemente importante precum capul, corpul și anteturile pot fi considerate ramuri ale DOM.

Dacă un fișier Javascript nu necesită informații din alt fișier sau din DOM-ul în sine, ar putea fi util să folosiți metoda asincronă , deoarece elementele importante ale paginii dvs. vor fi afișate mai repede. Trebuie doar să rețineți că asincron poate cauza erori cu site-ul dvs. web dacă fișierul solicită informații care nu au fost încă încărcate.

Dacă un fișier Javascript necesită informații, amânarea este opțiunea preferată, deoarece se asigură că tot conținutul este preluat corect înainte ca fișierul să fie executat.

Scopul amânării și asincronizării este de a reduce blocarea redării paginii și veți observa o îmbunătățire majoră a timpilor de încărcare a paginii, indiferent de metoda pe care o utilizați.

Recomand să citiți articolul lui Zell Liew „Cum și când să utilizați atributele Async și Defer” pentru o explicație mai cuprinzătoare despre când să utilizați defer și async.

Cum să amânați analizarea Javascript folosind un plugin WordPress

Majoritatea apelurilor Javascript de pe site-ul dvs. vor veni din tema dvs. WordPress și pluginurile WordPress activate, prin urmare nu este practic să adăugați manual atributele defer și asincron la elementele de script.

Este mai bine să utilizați un plugin WordPress de performanță pentru a amâna analizarea javascriptului în WordPress și pentru a simplifica procesul de aplicare a amânării sau asincronului pe site-ul dvs.

Țineți cont de faptul că setarea de configurare greșită va cauza probleme cu designul site-ului dvs. De exemplu, este posibil ca formularele de contact să nu se afișeze corect decât dacă alegeți setările de configurare potrivite sau excludeți fișierele formularului de contact de la optimizare.

Încercarea și eroarea sunt, prin urmare, necesare pentru a găsi setările de configurare potrivite și cea mai bună performanță pentru site-ul dvs.

• Backup-uri ale site-ului – Faceți backup site-ului dvs. înainte de a activa un plugin WordPress de optimizare
• Testați performanța – Testați performanța paginilor cheie de pe site-ul dvs. web și de fiecare dată când modificați o setare de configurare de optimizare
• Examinați-vă site-ul - Verificați dacă nicio parte a site-ului dvs. nu este ruptă după modificarea configurației

Dacă întâmpinați probleme majore când amânați analizarea javascriptului, reveniți la setările implicite ale pluginului. Pluginul poate fi dezinstalat și dacă nu funcționează în armonie cu site-ul dvs. web.

1. Optimizare automată

Autoptimize este o soluție versatilă de optimizare WordPress care vă permite să agregați și să minimizați Javascript, CSS și HTML. Conținutul optimizat este stocat în cache pentru a îmbunătăți performanța. Acest cache poate deveni rapid prea mare, așa că vă încurajez să utilizați Autoclear Autoptimize Cache pentru a șterge automat memoria cache.

Deși Autoptimize este cunoscut pentru agregarea fișierelor, poate fi folosit și pentru a amâna analizarea fișierelor Javascript, astfel încât acestea să nu blocheze randarea. Codul Javascript și CSS pot fi, de asemenea, afișate în linie și există opțiuni suplimentare de optimizare pentru imagini, fonturi Google, emoji și multe altele.

2. Plugin JavaScript asincron

Dezvoltat de creatorul Autoptimize, JavaScript Async vă permite să aplicați asincron și să amânați fișierele Javascript pe întregul site. Vă oferă control deplin asupra fiecărui fișier Javascript, permițându-vă să excludeți jQuery, anumite fișiere Javascript, pluginuri WordPress și teme WordPress. Dacă preferați, puteți specifica exact ce fișiere Javascript să asincron și care să amâne.

Una dintre cele mai interesante caracteristici ale Async Javascript este asistentul de configurare care rulează teste de performanță pe GTmetrix pentru toate setările de configurare posibile pentru site-ul dvs. Aceasta economisește timp foarte mult, deoarece rezultatele arată exact cât de rapid va fi site-ul dvs. cu fiecare configurație, dar asigurați-vă că vă verificați site-ul de fiecare dată pentru a vă asigura că niciun aspect al site-ului dvs. nu este deteriorat.

3. Perfmatters

Perfmatters este o cutie de instrumente de performanță premium WordPress care se mândrește cu zeci de caracteristici unice de performanță. Cu amănuntul de la 24,95 USD pe an, pluginul vă permite să amânați analizarea fișierelor Javascript (toate fișierele JS) de pe site-ul dvs. Fișierele jQuery pot fi incluse în amânări și puteți exclude și anumite fișiere Javascript. O altă opțiune grozavă pe care ți-o oferă este Javascript Delay, care va încărca fișierele Javascript numai atunci când există interacțiune cu utilizatorul.

Perfmatters poate fi folosit pentru a dezactiva funcțiile de bază ale WordPress pentru a îmbunătăți securitatea și performanța. De asemenea, vă permite să definiți o adresă URL de conectare personalizată, să preîncărcați conținut, să încărcați leneș imaginile, să integrați Google Analytics, să optimizați fonturile Google și multe altele.

Caracteristica mea preferată este managerul de scripturi, deoarece vă permite să activați și să dezactivați fișierele Javascript și CSS pentru fiecare pagină de pe site-ul dvs. Acest lucru va reduce dimensiunea paginilor considerabil, deoarece dezvoltatorii WordPress au un obicei prost de a încărca fișiere Javascript și CSS pe site-ul dvs., chiar și atunci când acestea sunt necesare doar pe câteva pagini.

4. Curățarea activelor

Asset CleanUp este un plugin WordPress de optimizare bogat în funcții, care vă permite să minimizați, să combinați și să amânați analizarea fișierelor Javascript și CSS. Managerul CSS și JS funcționează în mod similar cu managerul de scripturi Perfmatter, permițându-vă să specificați dacă un fișier este încărcat pe o anumită pagină. De asemenea, puteți să dezactivați setările de bază ale WordPress, să curățați codul HTML, să optimizați fonturile Google și multe altele.

O singură licență pentru Asset CleanUp Pro se vinde cu amănuntul la 42,36 EUR pe an. Actualizarea vă permite să plasați codul în linie și să specificați asincron și amânare pentru fișierele Javascript, pagină cu pagină. De asemenea, deblochează un manager de pluginuri și vă oferă un control mai mare asupra modului în care sunt încărcate activele pe site-ul dvs. web.

5. HTTP/2 Push Preload

HTTP/2 Push Preload vă permite să împingeți și să preîncărcați fișiere Javascript și CSS pe serverul dvs. compatibil HTTP2 utilizând funcția de încărcare în coadă. Acest lucru poate fi aplicat tuturor fișierelor sau puteți alege să configurați fiecare resursă separat. Tipurile de resurse includ script, stil, audio, încorporare, preluare, font, imagine, obiect și video.

Când introduceți adresa URL a unui fișier Javascript, puteți alege să asincronizați, să amânați sau să eliminați. HTTP/2 Push Preload vă permite să definiți reguli cu privire la momentul în care se va aplica această setare. Puteți defini reguli Javascript pentru o resursă pentru toate paginile, pentru dispozitive mobile sau desktop, pentru anumite postări și pagini, pentru categorii, pagini de căutare, pagini WooCommerce și multe altele.

Gânduri finale

Javascript continuă să fie metoda preferată de a adăuga conținut dinamic și elemente interactive pe site-uri web. Deoarece multe teme și pluginuri WordPress folosesc Javascript, este important să amânăm analizarea javascriptului în WordPress și să folosiți amânarea și asincronizarea pentru a vă asigura că paginile sunt afișate rapid și pentru a reduce blocarea redării paginii.

Veți găsi funcționalități pentru a aplica defer și asincron în multe plugin-uri WordPress, deși soluțiile la care am făcut referire în acest articol vă oferă mai mult control asupra fișierelor Javascript.

Pe propriul meu site, folosesc Autoptimize pentru agregarea fișierelor și JavaScript Async pentru amânări Javascript. Am fost mulțumit de Async Javascript, deși HTTP/2 Push Preload poate fi o opțiune mai bună pentru mulți proprietari de site-uri web, deoarece vă oferă un control mai bun asupra unde sunt aplicate setările de optimizare.

Asset CleanUp și Perfmatters oferă caracteristici și funcționalități similare, așa că nu recomand să le folosiți împreună. Asset CleanUp Pro oferă, fără îndoială, un control mai bun și funcții mai avansate, deși continui să folosesc Perfmatters pe propriul meu site web pentru curățarea WordPress, deoarece este mai ușor de utilizat. Ambele soluții vor îmbunătăți orice configurație de optimizare WordPress, chiar dacă utilizați un plugin WordPress diferit pentru a amâna analizarea javascriptului pentru a reduce blocarea redării paginii.

Vă încurajez să testați toate aceste pluginuri WordPress pentru a amâna analiza javascript și pentru a efectua mai multe teste pentru a vă asigura că aveți cea mai bună configurație.

Noroc.

Kevin