Cum să întârzieți încărcarea scriptului în WordPress

Publicat: 2022-05-02

Căutați o modalitate de a întârzia încărcarea scriptului în WordPress?

Utilizatorii WordPress sunt mereu în căutarea unor tehnici de ultimă oră pentru a îmbunătăți timpul de încărcare a site-ului lor. Viteza este atât de incredibil de importantă pentru mulți factori care creează o prezență online de succes. Două dintre elementele principale atunci când vine vorba de viteza WordPress sunt experiența vizitatorilor și clasamentele în motoarele de căutare.

Există multe instrumente terțe care îmbunătățesc funcționalitatea sau vizibilitatea unui site web WordPress. Aceste instrumente terțe folosesc JavaScript pentru a-și adăuga funcționalitatea unui site web WordPress.

Dezavantajul acestui JavaScript terță parte adăugat este că, în majoritatea cazurilor, va crește timpul de încărcare a paginii pentru fiecare adresă URL pe care există scriptul.

Aceasta înseamnă că oriunde aveți scriptul pe pagina dvs. și un vizitator încearcă să acceseze pagina respectivă, timpul necesar pentru încărcarea completă a paginii va fi crescut din cauza scriptului.

Poate că nici măcar nu ești sigur dacă site-ul tău web este sau nu mai rapid sau lent. Aruncă o privire la linkul de mai jos pentru a vă oferi câteva informații despre unele instrumente gratuite de testare a vitezei site-ului web pe care le puteți utiliza pentru a identifica viteza site-ului dvs.
https://www.wpfixit.com/free-website-speed-testing-tools/

Nu pare corect că trebuie să schimbi funcționalitatea cu viteza, nu-i așa?


Scripturile externe sunt costisitoare pentru încărcarea paginii site-ului dvs

Scripturile de la terți sunt peste tot. Potrivit raportului privind starea JavaScript al HTTP Archive, 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. Săpături mai adânc în aceleași date arată că 76% dintre site-uri 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 este un alt factor important de luat în considerare.

JavaScript necesită o mulțime de resurse CPU pentru a fi executat. Chiar dacă optimizați scripturile terță parte pentru a reduce impactul asupra timpului de randare, acestea pot afecta în continuare valoarea Timp până la interactiv. Măsoară cât de repede pot interacționa utilizatorii cu o pagină web.

Cu cât este mai lent, cu atât vor fi mai frustrați utilizatorii dvs. și cu atât sunt mai mari șansele ca aceștia să vă abandoneze site-ul.


Cele mai frecvent utilizate scripturi externe pe WordPress

Mai jos este o listă cu unele dintre cele mai frecvent utilizate scripturi externe pe un site web WordPress. Multe dintre acestea le vei recunoaște pentru că probabil le folosești pe site-ul tău web.

  1. Google Analytics
  2. Codul pixelului Facebook
  3. Widgeturi de chat live
  4. Încorporare video
  5. Formulare încorporate
  6. Widgeturi pentru rețelele de socializare
  7. Formulare încorporate

Obțineți măreția când întârziați încărcarea scriptului în WordPress

Nu există niciun motiv pentru care ar trebui să sacrifici viteza pentru funcționalitate.

Dacă ți-am spune că le poți avea pe amândouă?

Îmbunătățiți funcționalitatea și vizibilitatea site-ului dvs. WordPress folosind scripturi terțe și, de asemenea, asigurați-vă că fiecare pagină de pe site-ul dvs. se încarcă cât mai repede posibil pentru vizitatorii dvs.

Este posibil și se face printr-un proces în care amânați încărcarea scriptului în WordPress.

În circumstanțe normale, când utilizați un script intern pe site-ul dvs. web, acesta se va încărca cu pagina atunci când un vizitator accesează una dintre adresele URL ale site-ului dvs.

Când amânați încărcarea scriptului în WordPress, scriptul extern nu va începe încărcarea până când perioada de întârziere stabilită nu va expira.

De exemplu, dacă setați timpul de întârziere la 4 secunde, aceasta înseamnă că scriptul nu se va executa până la 4 secunde după ce pagina s-a încărcat complet.

Acest lucru este extrem de puternic deoarece înseamnă că încărcarea paginii nu așteaptă finalizarea scriptului. Experiența vizitatorilor dvs. se va îmbunătăți deoarece paginile se încarcă mai repede și orice instrument de testare a vitezei pe care îl utilizați pentru a testa una dintre adresele URL de pe site-ul dvs. web va produce rezultate mai bune.

Să aruncăm o privire la diferența dintre o încărcare de script extern obișnuită și o încărcare de script întârziată de mai jos.


Încărcare obișnuită de script extern

Imaginea de mai jos arată încărcarea în cascadă a unei adrese URL care are încorporat un widget de mărturie TrustPilot.

După cum puteți vedea în imagine, există 5 solicitări externe care sunt încărcate cu această pagină. Aceste solicitări provin din scriptul extern încorporat.

Delay Script Load in WordPress
SCRIPT EXTERN NORMAL EMBED
WordPress Load Script 1
SCRIPT EXTERN NORMAL EMBED

Întârzie încărcarea scriptului extern

Acum să aruncăm o privire la aceeași pagină încărcată cu încărcare întârziată a scriptului în WordPress.

Acest widget de mărturie TrustPilot este încă încorporat în pagină, dar am setat un timp întârziat pentru a se încărca 2,5 secunde după încărcarea paginii.

Nu numai că valoarea cererii a scăzut, dar aruncați o privire asupra timpului de încărcare completă și a timpului de încărcare care a scăzut, de asemenea.

Este ca și cum scriptul nu este nici măcar pe pagină în timpul încărcării.

WordPress Delay Load Script
INCORPARE SCRIPT EXTERN ÎNTÂRZIAT
WordPress Delay Load Script 1
INCORPARE SCRIPT EXTERN ÎNTÂRZIAT

Așa că acum că am explicat costul ridicat al timpului de încărcare pentru scripturile externe și modul în care le puteți utiliza fără a sacrifica viteza, permiteți-ne să vă arătăm codul exact pe care trebuie să îl implementați pentru a obține măreția.

Încărcare originală Script de încărcare în WordPress

Codul de mai jos este încorporarea implicită a scriptului pentru acest widget TrustPilot pe care l-am folosit în testele de viteză de mai sus.

 <!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->

Întârzierea încărcării scriptului în WordPress

Codul de mai jos este scriptul încorporat întârziat pentru acest widget TrustPilot pe care l-am folosit în testele de viteză de mai sus.

 <!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
    ID_cap.appendChild(element_script);
}, 2500 ); // ÎNTÂRZIERE PUTEȚI REGLA
</script>
<!-- Încheiați scriptul TrustBox -->

<!-- Widget TrustBox - Carusel -->
<div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme=" light" data-stars="1,2,3,4,5" data-review-languages="ro">
</div>
<!-- Încheiați widgetul TrustBox -->

Orice Utilizare Delay Script Load în WordPress

Codul de mai jos este șablonul implicit pe care îl puteți utiliza pentru a întârzia încărcarea scriptului în WordPress.

Există doar două elemente în acest șablon care trebuie modificate.

  1. Adresa URL pentru scriptul extern pe care doriți să-l utilizați
  2. Întârzierea în care doriți să ruleze scriptul
 <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
    ID_cap.appendChild(element_script);
}, 2500 ); // ÎNTÂRZIERE PUTEȚI REGLA
</script>

In concluzie

Sperăm cu adevărat că această postare a fost utilă și a înțeles cum să întârzieți încărcarea scriptului în WordPress.

Ar trebui să utilizați acest lucru pentru orice scripturi externe terțe pe care le utilizați pe site-ul dvs. WordPress și veți observa o scădere imediată a timpului de încărcare a paginii, care va beneficia de clasamentul motoarele de căutare și de experiența generală a vizitatorilor.

Dacă aveți probleme la implementarea a ceea ce ați citit în această postare, vă rugăm să comentați mai jos și putem vedea unde sunteți blocat.