Cum să eliminați JS și CSS care blochează randarea pentru viteza site-ului

În timp ce estetica unui site web este importantă, conținutul și vitezele de încărcare îi fac pe oameni să revină. WordPress oferă utilizatorilor o cutie de instrumente sofisticată de plugin-uri și teme pentru a-și crea rapid propriile site-uri web personalizate.

Cu toate acestea, aceste teme și pluginuri necesită JavaScript (JS) și Foi de stil în cascadă (CSS) pentru a funcționa. WordPress le creează automat sub formă de fișiere script. Ele sunt adesea slab optimizate. Ca atare, acestea pot încetini considerabil site-ul dvs.

Acest lucru poate fi frustrant pentru cititori. Astfel, în acest ghid, vom explora cum să găsiți și să eliminați aceste scripturi de blocare a randării și vă vom arăta cum să creșteți vitezele de încărcare ale site-ului dvs. WordPress.

Ce sunt scripturile JS și CSS care blochează randarea și de ce sunt proaste?

Majoritatea paginilor web de pe internet sunt formate din trei componente cheie: JavaScript, CSS și limbaje de marcare hipertext. HTML servește drept bază, în timp ce JavaScript și CSS sunt încorporate în el. Cu toate acestea, în zilele noastre, este mai convențional să încorporați apeluri în scripturi externe în documentul HTML.

Aceste scripturi sunt păstrate într-o coadă pe care browserul dvs. web o folosește pentru a reda pagina web. Cel mai simplu mod de a vedea ce scripturi folosește o pagină web fără să te uiți la codul sursă este descărcarea acestuia din browserul tău web (Ctrl + S). Browserul web va descărca documentul HTML împreună cu un folder cu toate (sau majoritatea) scripturilor, imaginilor și altor fișiere pe care le utilizează pagina web.

Cu cât trebuie să apeleze pagina dvs. web scripturile mai complexe din coadă, cu atât va dura mai mult pentru redare. Adesea, browserele web vor descărca resurse pentru pagini web, cum ar fi scripturi și imagini într-un cache local pentru a încărca paginile web mai rapid. În timp ce utilizatorii de pe partea clientului pot accelera timpul de redare a paginii web prin dezactivarea JavaScript, creșterea dimensiunii memoriei cache și folosind AdBlockers, aceasta nu este o soluție ideală. Sarcina ar trebui să revină dezvoltatorului web.

Dacă primiți reclamații sau ați observat că site-ul dvs. are probleme la redarea conținutului, nu este prea târziu să o remediați.

Cum să vă optimizați site-ul prin găsirea și remedierea scripturilor de blocare a randării

Înainte de a decide ce scripturi să terminați sau să optimizați, trebuie să evaluați viteza site-ului sau a paginii dvs. web. Puteți utiliza o platformă online precum GTmetrix sau PageSpeed ​​Insights de la Google. Tot ce vi se va cere este să introduceți adresa URL a site-ului web sau a paginii web pe care doriți să o testați, iar instrumentul o va evalua și va oferi alte informații.

Ei vor sugera, de asemenea, audituri pe care le puteți utiliza pentru a vă face site-ul mai rapid. De exemplu, vă vor propune să utilizați mai puține elemente în pagina dvs. web sau să reduceți CSS și JavaScript neutilizat. GTmetrix va merge până la a vă arăta ce scripturi trebuie optimizate.

Alternativ, puteți utiliza fila Acoperire din Chrome DevTools pentru a vă afișa datele de utilizare ale scripturilor dvs. Odată ce identificați ce scripturi sunt suboptime, puteți face câteva lucruri pentru a le remedia. Cu toate acestea, acești pași vor necesita destul de multă pricepere de codare pentru a le implementa cu succes. Veți avea nevoie cel puțin de o înțelegere de bază a programării funcționale JavaScript.

Participarea la un curs de tutorial de codificare (sau bootcamp) este, de asemenea, o idee bună pentru a vă ajuta să vă dezvoltați în continuare abilitățile. În medie, un bootcamp de codare poate dura până la cincisprezece săptămâni pentru a fi finalizat și, deși acest lucru poate suna ca o perioadă lungă de timp, merită din plin când luați în considerare modul în care alfabetizarea codului de bază este o abilitate importantă pe care trebuie să o aveți în lumea modernă. Cu toate acestea, iată cinci moduri de a remedia scripturile de blocare a randării și de a crește viteza paginii dvs. web.

1. Optimizați ordinea de încărcare

Secțiunea de cap (</head></head> ) a paginii web este utilizată pentru preîncărcarea elementelor. Fundația paginii dvs. web ar trebui să meargă aici, astfel încât un ecran alb nu salută utilizatorul atunci când vă încarcă pagina web. Deși CSS încorporat este bine, ar trebui să evitați să plasați JavaScript aici.

Odată ce ați optimizat secțiunea capului, trebuie să optimizați corpul. Majoritatea browserelor web redă paginile web de sus în jos. Trebuie să comandați apelurile către scripturi în funcție de importanța și complexitatea acestora. Ar trebui să efectuați apeluri la scripturi care nu sunt cruciale pentru randarea paginii web, împreună cu scripturi complexe care necesită timp.

2. Minimizează codul

Minimizarea codului implică rescrierea lui și ștergerea caracterelor inutile, cum ar fi spații albe, comentarii, virgule, întreruperi de linie etc. Acest lucru face codul mai concis și mai compact, ceea ce în cele din urmă reduce dimensiunea scriptului și mărește timpul de încărcare pentru pagina dvs. web.

Pluginurile și instrumentele precum W3TC au module care minimizează JavaScript și CSS în temele dvs. Alternativ, puteți reduce manual codul de script cu un instrument online gratuit, cum ar fi JavaScript Minifier.

3. Utilizați încărcarea amânată și asincronă a JavaScript

Browserele web citesc codul de sus în jos. Când întâlnesc o etichetă de script, opresc încărcarea paginii web și citesc fișierul de script. Acest lucru încetinește redarea.

Puteți folosi atributul async pentru a încărca scriptul în paralel cu pagina web și pentru a-l executa de îndată ce este disponibil. Alternativ, puteți utiliza atributul defer pentru a amâna analizarea scripturilor. Aceasta înseamnă că va încărca și scriptul paralel cu pagina web, dar îl va executa numai atunci când browserul analizează pagina web.

Vă sfătuim să nu utilizați atributele asincrone sau amânate pe scripturile utilizate pentru a reda și afișa elemente vizuale. Cuvântul cheie JavaScript echivalent cu aceste atribute sunt cuvintele cheie asincrone și așteaptă . Le puteți folosi pentru a vă încărca Javascript-urile mai asincron, fără a edita etichetele HTML de pe pagina dvs. web.

4. Înlocuiți elementele vizuale JavaScript cu CSS3

În trecut, CSS nu era la fel de versatil ca în prezent. De exemplu, CSS 1.0 și 2.0 au fost lipsite de instrumente de UI, cum ar fi controalele de bază și glisoarele.

Apoi a apărut CSS 3. A prezentat culori noi, umbre de casetă, opacitate etc. JavaScript este excelent pentru adăugarea de controale complexe ale interfeței cu utilizatorul. Cu toate acestea, Javascript are mai multe resurse decât CSS.

Astfel, utilizarea unor cantități excesive de JavaScript încetinește considerabil site-ul dvs. Dacă observați că pagina dvs. web folosește JavaScript pentru a ridica slăbirea în care versiunile anterioare de CSS au căzut, ar trebui să o modificați și să înlocuiți tot JavaScript inutil cu CSS - acolo unde puteți. Acest lucru va permite paginilor web să se încarce mai rapid.

5. Eliminați toate scripturile inutile

Scopul JS și CSS este de a extinde funcționalitatea la paginile web și de a adăuga logică acolo unde HTML nu poate. Cu toate acestea, HTML 5.3 a sosit cu noi etichete care ar face ca unele operațiuni CSS și JS să nu fie necesare. Folosind HTML în loc de scripturi, în mod natural, paginile dvs. web se încarcă mai rapid.

Astfel, cea mai bună modalitate de a optimiza viteza site-ului dvs. este eliminarea tuturor scripturilor subutilizate. Va trebui să analizați ce scripturi sunt complet inutile și să le eliminați. Din nou, puteți folosi fila Acoperire Chrome DevTools sau GTmetrix pentru a găsi cele mai subutilizate scripturi pe pagina dvs. web și apoi le eliminați.

După ce eliminați toate funcțiile sau etichetele inutile, puteți combina scripturi ale căror funcții sunt similare. Dacă știți deja cum să vă deplasați în jurul codului sursă al paginii dvs. web, atunci aceasta nu ar trebui să fie o sarcină dificilă pentru dvs. Cu toate acestea, utilizatorii care nu sunt la fel de experimentați sau cunoscători în design web nu ar trebui să se îngrijoreze. WordPress vă facilitează identificarea scripturilor de pe site-ul dvs. web și editarea acestora folosind diverse plugin-uri de optimizare. Pe acestea le vom acoperi în continuare.

6. Utilizarea pluginurilor pentru a vă optimiza site-ul WordPress

Din nou, nu aveți nevoie de cunoștințe practice de programare pentru a vă optimiza site-ul web WP. Deși ceva experiență ar ajuta. Cu toate acestea, există o gamă largă de pluginuri orientate spre optimizarea scripturilor. Unii dintre ei folosesc AI pentru a minimiza codul, pentru a schimba ordinea de încărcare și pentru a înlocui scripturile subutilizate cu cod și scripturi mai eficiente.

Unele dintre cele mai bune plugin-uri pentru optimizarea scripturilor includ:

• WP Rocket : Acesta este unul dintre cele mai populare plugin-uri pentru optimizarea web. Poate detecta automat ce scripturi sunt problematice și le poate remedia pentru dvs. Îl puteți folosi pentru memorarea rapidă în cache, respectarea, compresia și minificarea.
• Autoptimize : aceasta poate amâna și elimina scripturile neesențiale, poate integra CSS inline și poate reduce scripturile, HTML și imaginile. Autoptimize este foarte personalizabil printr-un API deschis și opțiuni avansate.
• W3 Total Cache : Acest plugin necesită un pic de muncă pentru a fi utilizat. Va trebui să urmăriți și să identificați manual scripturile înainte de a le elimina sau edita. În cele mai multe cazuri, acest plugin este deja disponibil cu pachetul dvs. WordPress.
• Async Javascript : un plugin open-source prezentat de WordPress. Vă permite să detectați JavaScript care blochează randarea și apoi să îl amânați sau să îl încărcați asincron.

Deci, de ce nu am recomandat doar pluginuri în primul rând? Din păcate, unele dintre aceste plugin-uri vă vor costa. De exemplu, Autoptimize costă 49 ​​USD pe an. Deși este o taxă rezonabilă, poate fi neideală pentru persoanele care plătesc deja o sumă mare de bani pentru găzduire și alte aplicații și pluginuri.

Cu toate acestea, indiferent dacă utilizați pluginuri sau găsiți manual scripturi, trebuie să înțelegeți concepte precum minificare, încărcare asincronă și ordine de încărcare. Vă va fi mai ușor să depanați orice probleme de încărcare în cazul în care unul dintre scripturi eșuează.