Reduceți Impactul Scripturilor Terță Parte
Scripturile de la terțe părți adaugă o gamă largă de funcții utile site-ului dvs., făcându-l mai interactiv, mai dinamic și mai inter-conectat. Funcții precum analize, reclame, butoane de distribuire pe rețelele sociale, încorporare video, toate sunt posibile datorită scripturilor terță parte. Unele dintre aceste caracteristici ar putea fi esențiale pentru funcționalitatea site-ului dvs. web sau pentru generarea de bani.
Cu toate acestea, scripturile de la terți sunt, una dintre principalele cauze ale încetinirii performanței pe site-urile web. Ele sunt de obicei cea mai costisitoare resursă în timpul încărcării paginii. Câteva dintre aceste scripturi pot prezenta riscuri de securitate și confidențialitate.
În acest articol, veți afla elementele de bază ale scripturilor terțe, cum afectează acestea performanța site-ului web și cum puteți să reduceți impactul scripturilor terță parte pentru a le atenua efectele negative.
Sună interesant? Să începem!
Ce Sunt Scripturile de la Terți?
„Scripturi terță parte” se referă la orice script pe care îl puteți încorpora direct în site-ul dvs. web de la un furnizor terță parte. Acestea nu sunt create de dvs. și nici controlate în mod explicit de dvs. și sunt difuzate de la o adresă URL externă.
Unde Sunt Folosite Scripturile de la Terți?
Aproape fiecare site web folosește scripturi terțe pentru a adăuga unele funcționalități. Câteva dintre cele mai comune utilizări ale acestora sunt:
- Încorporarea videoclipurilor (de exemplu, YouTube, Vimeo)
- Adăugarea butoanelor de distribuire pe rețelele sociale
- Adăugarea widget-urilor de chat
- Încorporarea sistemelor de comentarii (de exemplu, Disqus)
- Activarea analizei web (de exemplu, Google Analytics)
- Încorporarea reclamelor (de exemplu, Google Adsense)
- Servirea resurselor prin rețele de livrare de conținut (CDN)
- Experimentarea cu scripturi de testare A/B
- Adăugarea de biblioteci de ajutor (de exemplu, animație, biblioteci funcționale etc.)
Dezvoltatorii pot adăuga funcționalități site-urilor web cu doar câteva linii de cod folosind scripturi terțe. De exemplu:
- Agențiile de marketing pot folosi rapoarte din analize și scripturi de testare A/B pentru a-și fundamenta deciziile de afaceri pe date solide.
- Utilizatorii pot distribui un articol care le place pe rețeaua lor socială preferată cu doar un clic pe un buton.
- Clienții potențiali pot contacta personalul de asistență sau de vânzări prin intermediul widget-ului de chat și pot obține răspunsuri la întrebările lor imediat.
Aplicațiile scripturilor terțe sunt nesfârșite, dar pur și simplu nu se termină aici. Dacă sunt utilizate fără precauție, scripturile terțe pot fi problematice pentru confidențialitate, securitate și performanța paginii.
Costul JavaScript de la Terți
Scripturile de la terți sunt peste tot. Conform raportului State of JavaScript de HTTPArchive, numărul mediu de scripturi externe solicitate de site-uri web este de 20, iar dimensiunea totală a acestora este de aproximativ 449 KB.
93,59% dintre paginile web includ cel puțin o resursă terță parte. Aprofundarea în aceleași date arată că 76% dintre site-urile web urmăresc utilizatorii cu scripturi de analiză.
Cel mai rău impact al scripturilor terță parte este întârzierea căii critice de redare, plus afectarea scorurilor tale Core Web Vitals, începând de la nota FID.
Calea critică de redare este setul de acțiuni pe care le face un browser pentru a asambla HTML, CSS și JavaScript într-un site web viu, utilizabil. Desigur, dimensiunea încărcăturii utile a scripturilor terță parte joacă un rol major aici, dar mai există un alt factor important de luat în considerare.
În 2019, costurile dominante ale procesării scripturilor sunt acum descărcarea și timpul de execuție a CPU. Sursă: Costul JavaScript în 2019
JavaScript necesită o mulțime de resurse CPU pentru a fi executat. Chiar dacă optimizați scripturile de la terțe părți pentru a reduce impactul asupra timpului de redare, acestea pot afecta în continuare metrica Time to Interactive. Măsoară cât de repede pot interacționa utilizatorii cu o pagină web. Cu cât este mai lent, cu atât utilizatorii tăi vor fi mai frustrați și cu atât sunt mai mari șansele ca aceștia să-ți abandoneze site-ul.
Puteți rezuma costul utilizării JavaScript cu două valori principale.
Mărirea Paginii
Byte-by-byte, JavaScript este cea mai scumpă resursă terță parte servită de paginile web. Deoarece un browser trebuie să descarce toate scripturile de la terți conectate în timpul încărcării paginii, adăugarea acestora la site-ul dvs. poate încetini în mod semnificativ site-ul.
Cu cât dimensiunea scripturilor este mai mare, cu atât va fi mai mare scăderea performanței site-ului dvs. La urma urmei, cu cât dimensiunea unei pagini web este mai mare, cu atât se va încărca mai lent.
Reducerea dimensiunii scripturilor externe este o modalitate foarte bună de a vă accelera site-ul.
Cereri Suplimentare de Rețea
De fiecare dată când un utilizator solicită oricare dintre paginile site-ului dvs., browserul trebuie să recupereze toate scripturile terțe încorporate. Pentru a face acest lucru, browserul va ajunge la toate adresele URL externe în care sunt găzduite aceste scripturi pentru a le descărca.
În mod obișnuit, fiecare script terță parte în sine nu reprezintă prea mult. Dar încărcarea fiecărui script terță parte este o solicitare HTTP suplimentară pe care browserul trebuie să o facă pentru a reda pagina complet. Aceste solicitări se adună și încetinește performanța paginii.
De asemenea, cu cât pagina dvs. web are mai multe solicitări, cu atât valoarea sa „Time to Interactive” va fi mai lungă.
În exemplul de mai sus, puteți vedea că pagina durează peste 9 secunde pentru a se încărca complet. Vinovatul principal aici este încorporarea multor scripturi terță parte care trag în jos viteza de încărcare a paginii.
Scripturile nu sunt singurele resurse terță parte utilizate de site-urile web, dar ele constituie o mare parte a solicitărilor terțelor părți pentru toate categoriile și tipurile de conținut. Prin urmare, optimizarea acestora ar trebui să fie prioritatea ta.
Măsurarea Impactului Încărcării JavaScript Terță Parte
Există multe instrumente de testare a vitezei paginilor web pe care le puteți utiliza pentru a diagnostica scripturile de la terți și pentru a afla care dintre ele sunt cele mai costisitoare resurse de pe site-ul dvs. Aceste instrumente vă arată numărul de scripturi terță parte încărcate de site-ul dvs. și timpul necesar pentru a le executa.
Iată câteva instrumente gratuite pe care le puteți folosi pentru a evalua scripturile de la terți:
- WebPageTest.org
- Chrome DevTools
- PageSpeed Insights (Auditul Lighthouse)
WebPageTest.org
WebPageTest este un instrument gratuit de testare a vitezei, open-source, pe care îl puteți folosi pentru a evalua performanța site-ului dvs. Include multe funcții avansate, cum ar fi diagrame în waterfall, defalcarea conținutului în funcție de tip și domeniu, randarea paginilor web, a videoclipurilor și compararea testelor.
Am testat un site de portofoliu pe WebPageTest. Mai jos este vizualizarea în waterfall a solicitărilor făcute de site în timpul încărcării paginii sale. Există o mulțime de cereri, dar nu toate provin din surse terțe.
Diagrama waterfall împarte cererile în funcție de domeniu și dimensiune, împreună cu o cronologie care reprezintă încărcarea paginii.
De asemenea, puteți consulta defalcarea conținutului după tip făcând clic pe fila „Defalcarea conținutului”. După cum puteți vedea, JS alcătuiește o mulțime de solicitări și octeți transferați.
Dacă faceți clic pe fila „Domenii”, veți obține o listă completă a tuturor domeniilor contactate de browser în timpul încărcării paginii.
Aici, majoritatea cererilor provin din domeniul propriu-zis. De asemenea, puteți face clic pe linkul „Solicitare Hartă” pentru a vizualiza toate aceste solicitări.
Dacă recunoașteți un script problematic care necesită mult timp pentru a încărca sau executa, verificați dacă acel script este necesar. Eliminați astfel de scripturi dacă nu prezintă niciun prejudiciu perceptibil pentru funcționalitatea site-ului dvs. web sau experiența utilizatorului.
WebPageTest oferă o modalitate prin care puteți testa viteza site-ului dvs. web prin blocarea cererilor provenite din anumite domenii. Acest lucru este util pentru măsurarea impactului asupra performanței al scripturilor terță parte supărătoare, țintindu-le în mod specific.
blockDomainsExcept www.domain.com cdn.domain.com
cdnjs.cloudflare.com
navigați pe https://www.domain.com
De exemplu, puteți bloca solicitările de la toate domeniile externe (cu excepția CDN-urilor importante) și apoi puteți direcționa WebPageTest să navigheze la site pentru a-l testa.
De asemenea, puteți utiliza fila „Blocare” din secțiunea „Setări avansate” a WebPageTest pentru a face același lucru.
Iată un flux de lucru tipic pentru a utiliza WebPageTest pentru a identifica scripturile lente:
- Testați pagina web originală.
- Testați din nou aceeași pagină web, dar de data aceasta cu anumite scripturi terță parte blocate.
- Comparați cele două rezultate utilizând funcția „Comparare” WebPageTest din panoul său „Istoric test”.
Asta este tot ceea ce face WebPageTest. Puteți afla mai multe despre cum puteți utiliza WebPageTest pentru a testa impactul asupra performanței al scripturilor terță parte.
Chrome DevTools
Chrome DevTools acceptă evidențierea solicitărilor de rețea de la terți în panoul „Rețea”. Această funcție vă permite să obțineți informații detaliate despre solicitările de script de la terți pe o pagină.
Pentru a utiliza această funcție, apăsați CTRL/CMD + Shift + P în oricare dintre panourile Chrome DevTools pentru a afișa „Meniul de comandă”. Apoi, tastați „Afișați insigne terță parte” și activați această funcție.
Google Chrome versiunea 80 a eliminat această funcție, anunțând că nu va mai fi înlocuită. Cel mai probabil este un bug. Pentru moment, trebuie să sortați manual scripturile externe până când Google abordează această problemă.
De asemenea, puteți utiliza panoul „Performanță” din Chrome DevTools pentru a identifica orice probleme de performanță pe site-ul dvs.
Pentru a afla mai multe despre cum să testați performanța încărcării paginii cu Chrome DevTools, consultați tutorialul Google despre acest subiect.
Auditul Lighthouse
Instrumentul de testare a vitezei Lighthouse de la Google are două audituri specifice pentru a evalua performanța site-ului dvs.
Auditul pentru timpul de pornire JavaScript de la Lighthouse clasifică scripturile în funcție de timpul lor de analiză, compilare și evaluare. Aceste valori vă pot ajuta să descoperiți scripturi de la terțe părți care acaparează o mulțime de resurse ale serverului dvs.
Auditul de încărcare a rețelei Lighthouse listează toate scripturile după dimensiunea lor totală și timpul de transfer. Puteți folosi aceste valori pentru a identifica scripturi terță parte care pot încetini timpul de încărcare a paginii site-ului dvs.
Instrumentul Lighthouse încorporat în Chrome vă arată și resursele costisitoare de la terți pe o pagină ordonată în funcție de dimensiunea și timpul de transfer.
Acum că ați învățat cum să testați performanța scripturilor terță parte, este timpul să învățați cum să reduceți impactul scripturilor terță parte asupra WordPress sau să anulați daunele acestora.
Cum să Minimalizați Efectele Scripturilor Terțe pe WordPress
1.Întârziați Încărcarea Scripturilor Terță Parte
Dacă găsiți scripturi terță parte care încetinesc site-ul dvs., le puteți încărca folosind atributele asincron HTML sau amânați pentru a evita impactul lor negativ asupra încărcării paginii.
Atributul async forțează browserul să continue analiza restului documentului HTML până când scriptul este descărcat. Odată ce scriptul se termină de descărcat, acesta întrerupe analiza documentului HTML pentru a rula scriptul.
Atributul defer face același lucru, cu excepția faptului că browserul nu rulează scriptul până când nu a analizat întregul document HTML.
Este recomandat să încărcați toate scripturile dvs. terțe cu atribute async sau defer (cu excepția cazului în care acestea sunt esențiale pentru calea critică de redare a paginii dvs. web).
Cu WP Rocket este cel mai simplu mod de a întârzia fișierele JavaScript și de a lăsa pagina să se încarce mai repede.
2.Fișiere JavaScript de la Terți cu Auto-Găzduire
Găzduirea de scripturi terță parte pe serverul dvs. vă poate oferi mai mult control asupra modului în care sunt încărcate. Ajută la reducerea timpilor de căutare DNS și de călătorie dus-întors, la îmbunătățirea anteturilor de cache HTTP și la utilizarea funcțiilor avansate, cum ar fi HTTP/2 server push.
Auto-găzduirea este recomandată pentru orice script terță parte critic pentru funcționarea site-ului dvs. web (de exemplu, jQuery, Modernizr, Underscore.js).
Scripturile auto-găzduite pot depăși data și nu pot funcționa conform intenției. De exemplu, dacă găzduiți singur un script de difuzare a anunțurilor și dacă editorul de anunțuri schimbă modul în care funcționează scriptul, atunci site-ul dvs. nu va difuza anunțuri până nu actualizați manual scriptul auto-găzduit.
3.Eliminați Complet Scriptul Terță Parte
Dacă un script terță parte nu adaugă nicio valoare clară site-ului sau utilizatorilor dvs., atunci luați în considerare eliminarea acestuia. Multe teme și pluginuri WordPress încarcă o mulțime de scripturi inutile pe care este posibil să nu le folosiți niciodată.
Chiar și WordPress forțează fiecare site să încarce scriptul jQuery Migrate (wp-includes/js/jquery/jquery-migrate.min.js). Acest lucru ajută pluginurile și temele mai vechi să mențină compatibilitatea cu versiunea veche a jQuery. Deși acesta nu este un script terță parte, deoarece este auto-găzduit, adaugă totuși o solicitare HTTP suplimentară în mod inutil.
Puteți utiliza opțiunile încorporate ale WP Rocket pentru a elimina scriptul jQuery Migrate de la încărcare.
Întrebați-vă dacă site-ul dvs. are într-adevăr nevoie de un slider sau de un script de formatare a datei. Dacă nu sunteți sigur, puteți efectua testarea A/B pentru a verifica dacă eliminarea unui script afectează performanța site-ului dvs. în comparație cu gradul de utilizare.
4.Implementați Sugestii de Resurse Pentru Browser
Conectarea la domenii externe pentru a descărca scripturi terță parte poate dura o perioadă excesivă de timp, mai ales dacă utilizatorii dvs. se află pe rețele lente. Căutările DNS, redirecționările și orice călătorii dus-întors pentru încărcarea fiecărui script terță parte pot duce la întârzieri semnificative.
Puteți utiliza sugestiile de resurse ale browserului pentru a stabili o conexiune cu domeniul extern care găzduiește scriptul terță parte la începutul încărcării paginii.
Există multe sugestii de resurse, dar cele care sunt utile aici sunt dns-prefetch sau preconnect.
<link rel="dns-prefetch" href="http://domeniultau.ro">
Dacă destinația finală a domeniului extern al scriptului terță parte utilizează https://, atunci îl puteți folosi pentru a evita călătoriile dus-întors TCP și pentru a gestiona în prealabil orice negocieri TLS.
<link rel="preconnect" href="https://cdn.domeniultau.ro">
Pentru mai multe, consultați articolul WP Rocket despre sugestii de resurse pentru browser.
5.Încărcați Lazy-load JavaScript Terță Parte
Elementele terțe încorporate, cum ar fi reclamele și videoclipurile, aduc mult stres pe site-ul dvs., cu atât mai mult dacă sunt livrate prin surse slab optimizate. Puteți încărca lazy aceste resurse încorporate pentru a accelera încărcarea paginii.
De exemplu, dacă difuzați anunțuri în subsolul site-ului dvs., le puteți încărca lazy (leneș), astfel încât să fie încărcate numai atunci când utilizatorul derulează în jos pe pagină.
Puteți folosi WP Rocket pentru a activa lazy-loading pe site-ul dvs. WordPress.
WordPress 5.5 a adăugat funcționalitate nativă de lazy loading, făcând aceasta o caracteristică implicită pentru milioane de site-uri web.
Dacă încorporați reclame pe site-ul dvs., consultați acest articol de la Mediavine, unde discută despre modul în care și-au îmbunătățit viteza paginii cu 200% după implementarea lazy loading.
Utilizați un Manager de Etichete Pentru a Organiza JS Terță Parte
Managerii de etichete vă permit să grupați mai multe scripturi (sau etichete) terță parte și să le gestionați pe toate dintr-o singură sursă. Folosirea cu înțelepciune a unui manager de etichete vă poate ajuta să minimizați impactul de performanță ale încărcării scripturilor terță parte.
În timp ce puteți încărca scripturi terță parte în mod asincron, browserul trebuie să le analizeze și să le execute individual. Acest lucru ar putea însemna solicitarea de date suplimentare în timpul încărcării paginii. Managerii de etichete rezolvă această problemă reducând numărul de solicitări la una singură.
Google Tag Manager (GTM) este cea mai populară soluție de gestionare a etichetelor. Se încarcă singur și toate etichetele sale în mod asincron, astfel încât browserul redă o pagină fără pauză. Chiar și un script terță parte cu încărcare lentă nu va bloca încărcarea niciunui alt script.
Pluginul Google Tag Manager pentru WordPress este o modalitate simplă de a integra GTM pe site-urile WordPress.
Alți manageri de etichete pe care îi puteți analiza sunt Adobe Experience Platform Launch, Ensighten și Qubit.
Utilizați în mod corespunzător managerii de etichete precum GTM. În timp ce reduce costul de încărcare a scripturilor terțe, simplitatea sa îl face și deschis spre abuz de către oricine are acreditările necesare pentru a adăuga etichete.
Aveți un Buget de Performanță
Odată ce ați optimizat performanța site-ului dvs., trebuie să utilizați un buget de performanță pentru a vă asigura că performanța site-ului dvs. nu regresează în timp.
Un buget de performanță este o limită autoimpusă pentru a număra numărul total de solicitări și dimensiunea scripturilor, imaginilor etc. Poate include, stabilirea unei limite pentru valorile de performanță, cum ar fi „Time to Interactive” și „First Meaningful Paint”.
Pentru mai multe, consultați lista tuturor tipurilor și valorilor de resurse acceptate.
Puteți folosi Auditul Lighthouse pentru a vă stabili bugetul de performanță. Discutarea metodei exacte de setare a bugetelor de performanță nu face obiectul acestui articol, dar puteți citi mai multe despre cum să faceți acest lucru în documentația Lighthouse.
Concluzie
Scripturile de la terți au devenit o parte importantă a majorității site-urilor web de astăzi. Chiar dacă ați optimizat toate celelalte coduri de pe site-ul dvs. web, nu puteți controla modul în care se desfășoară scripturile terță parte. Nici nu le puteți evita, deoarece unele dintre ele pot fi esențiale pentru funcționalitatea site-ului dvs., experiența utilizatorului sau fluxul de venituri.
Este posibil ca unele subiecte discutate în acest articol să nu fie ușor de înțeles imediat. Îți sugerez să mai treci prin ele încă o dată. Înțelegerea impactului asupra performanței scripturilor terță parte și a modului în care le puteți gestiona vă va ajuta să reduceți impactul scripturilor terță parte asupra WordPress.
WP Rocket vă poate ajuta cu ușurință să reduceți impactul codului terță parte. Obțineți-l acum și testați imediat îmbunătățirea!
