Cum să combinați JavaScript extern în WordPress

Limbajul de programare javascript ajută paginile web să afișeze conținut dinamic. Pe site-urile WordPress, de exemplu, Javascript este folosit pentru a încorpora audio și video. De asemenea, este folosit pentru a afișa galerii de imagini, meniuri interactive, cronometre cu numărătoare inversă și multe altele.

Fișierele Javascript folosesc extensia de fișier .js, iar pe un site web WordPress tipic, fișierele Javascript sunt inserate în pagini prin tema WordPress și pluginurile WordPress care sunt activate. De exemplu, glisorul paginii de pornire a temei dvs. poate necesita un fișier numit slider.js pentru a funcționa corect, în timp ce pagina de formular de contact poate necesita un fișier numit form.js.

Cred că Javascript este esențial pentru site-urile web WordPress moderne. Din păcate, poate face și un site să încetinească dacă nu este optimizat corect.

În primele versiuni ale Hypertext Transfer Protocol, Javascript poate încetini site-urile web, deoarece fiecare fișier Javascript trebuia descărcat și executat pentru ca pagina să fie afișată corect. O tehnică populară de optimizare pentru a rezolva această problemă este combinarea mai multor fișiere Javascript pentru a reduce numărul de solicitări HTTP pe care un browser trebuie să le facă. Tehnica este uneori denumită agregare Javascript.

În acest articol, voi explica de ce mulți proprietari de site-uri combină Javascript extern în WordPress și împărtășesc câteva pluginuri WordPress utile care pot fi folosite pentru a îndeplini această sarcină. Voi vorbi, de asemenea, despre motivul pentru care combinarea fișierelor externe Javascript nu mai este necesară pentru majoritatea proprietarilor de site-uri web.

De ce să combinați fișiere Javascript externe în WordPress?

În timp ce funcțiile Javascript pot fi adăugate direct în HTML folosind eticheta SCRIPT, este o practică obișnuită să salvați codul Javascript într-un fișier extern. Este mai practic să faceți acest lucru, deoarece separă codul și permite ca funcțiile Javascript să fie apelate de multe pagini.

Fiecare fișier Javascript care este necesar pentru o pagină web trebuie să fie descărcat de browser în timpul procesului de redare a paginii.

Când fișierele sunt descărcate în ordine secvențială, un număr mare de solicitări HTTP poate crește timpul necesar pentru încărcarea unei pagini web. Deci, combinând fișiere Javascript externe în WordPress, puteți reduce foarte mult numărul de solicitări HTTP care sunt făcute în timpul redării paginii.

Unele motoare de căutare recomandă combinarea JavaScript-ului extern în două fișiere.

Dacă o pagină web necesită nouă fișiere Javascript pentru a fi afișate corect, combinarea fișierelor JS externe în WordPress vă poate ajuta să reduceți numărul total de solicitări HTTP pentru codul Javascript de la nouă la doar două. Fișierele CSS externe pot fi, de asemenea, combinate, reducând și mai mult numărul de solicitări HTTP ale unei pagini.

Va fi site-ul meu WordPress mai rapid dacă combin fișiere Javascript externe?

Datorită îmbunătățirilor aduse Protocolului de transfer hipertext, nu mai este esențial să combinați fișierele Javascript și fișierele CSS, cu excepția cazului în care compania dvs. de găzduire web nu are suport pentru HTTP/2.

În HTTP/1.0 și HTTP/1.1, fiecare fișier Javascript și CSS trebuia descărcat în ordine secvențială. Aceasta însemna că un fișier trebuia descărcat complet înainte ca următorul fișier să poată începe descărcarea. Protocolul HTTP/2, care a fost lansat în 2015, a rezolvat această problemă permițând descărcări paralele. Deoarece toate resursele externe pot fi descărcate în același timp, nu mai există niciun avantaj în combinarea fișierelor dacă HTTP/2 este disponibil.

HTTP/2 este suportat în prezent de 95,6% dintre browserele de internet. Începând cu 6 ianuarie 2022, HTTP/2 este utilizat de 46,9% dintre toate site-urile online, deși puteți vedea din graficul de mai jos că această cifră este semnificativ mai mare printre cele mai populare site-uri web de pe internet.

Dacă gazda dvs. web are suport pentru HTTP/2, combinarea fișierelor poate încetini site-ul dvs., deoarece fișierele Javascript combinate sunt mai mari decât fișierele pe care le-au agregat. Acest lucru se datorează faptului că este nevoie de mai mult ca un browser să descarce două fișiere Javascript mari decât multe fișiere Javascript mici care sunt descărcate în același timp.

Două tehnici pe care le recomand să le folosesc cu Javascript sunt minimizarea și amânarea analizei.

Vă rugăm să citiți articolul meu despre amânarea analizei Javascript în WordPress pentru a înțelege mai bine de ce Javascript încetinește procesul de randare a paginii.

Cum să combinați JavaScript extern în WordPress

Dacă compania dvs. de găzduire web încă folosește HTTP 1.1, este totuși recomandat să combinați fișiere Javascript externe și fișiere CSS în WordPress.

Asigurați-vă că executați teste de performanță înainte și după combinarea fișierelor, astfel încât să știți cum au fost afectați timpii de încărcare a paginii. Puteți face acest lucru folosind GTmetrix, Google PageSpeed ​​Insights și Pingdom Website Speed ​​Test.

Optimizați automat

Autoptimize este unul dintre cele mai eficiente pluginuri de optimizare disponibile pentru utilizatorii WordPress. Acceptă minimizarea pentru HTML și combinarea de fișiere și minimizarea pentru Javascript și CSS. Fișierele Javascript pot fi, de asemenea, amânate în loc să fie agregate pentru a preveni blocarea redării și există și opțiuni de optimizare pentru Fonturile Google.

Am folosit Autoptimize pe multe site-uri WordPress, deoarece îmbunătățește întotdeauna timpul de încărcare a paginii.

Curățarea activelor

Asset CleanUp este un plugin WordPress de optimizare extrem de configurabil care acceptă minimizarea, combinarea și amânarea Javascript și CSS. De asemenea, vă permite să curățați HTML și oferă multe instrumente pentru gestionarea fonturilor și reducerea efectului acestora asupra timpilor de încărcare a paginii.

O caracteristică a Asset Cleanup care iese în evidență este managerul Javascript și CSS. Acest lucru vă permite să specificați exact în ce pagini sunt încărcate fișierele Javascript și CSS pe site-ul dvs.

WP Super Minify

WP Super Minify face lucrurile puțin diferit, oferindu-vă doar opțiunea de a comprima Javascript și a comprima CSS. Când este selectat, WP Super Minify va combina, reduce și va stoca fișierele în cache.

Dacă sunteți în căutarea unei soluții de optimizare simplă care funcționează, acesta poate fi pluginul pentru dvs.

Combinarea fișierelor Javascript externe folosind un plugin WordPress Cache

Cele mai bune pluginuri de cache WordPress includ multe instrumente suplimentare de optimizare pentru a vă ajuta să îmbunătățiți performanța site-ului. Prin urmare, există șanse mari ca soluția dvs. de stocare în cache WordPress existentă să vă permită să combinați fișiere externe Javascript și CSS.

În WP Rocket, de exemplu, există opțiuni pentru a minimiza și combina fișierele Javascript și CSS. Fișierele Javascript pot fi, de asemenea, amânate pentru a preveni blocarea redării.

Recomandarea mea este să testați timpii de încărcare a paginii utilizând combinația de fișiere folosind pluginul dvs. preferat de cache WordPress și apoi să comparați rezultatele cu soluții de optimizare Javascript independente, cum ar fi Autoptimize și Asset CleanUp.

Gânduri finale

Sper că v-a plăcut această privire asupra combinării fișierelor Javascript externe. După cum ați văzut, nu mai este necesar să adăugați fișiere Javascript dacă gazda dvs. web acceptă HTTP/2, deoarece descărcarea fișierelor în paralel este mai eficientă.

Dacă gazda dvs. web oferă suport doar pentru HTTP/1.1, puteți combina javascript extern în WordPress pentru a reduce timpii de încărcare a paginii.

Citire recomandată: Eliminați CSS neutilizat din WordPress

Multumesc pentru lectura.

Kevin