Cum să remediați JavaScript și CSS-ul Render-Blocking în WordPress

Doriți să eliminați JavaScript și CSS care blochează redarea în WordPress? Dacă testați site-ul dvs. web cu informații Google PageSpeed, atunci veți vedea probabil o sugestie pentru a elimina inscripțiile și CSS cu blocare de redare. În acest articol, vă vom arăta cum să remediați cu ușurință blocarea de redare a JavaScript și CSS în WordPress pentru a îmbunătăți scorul Google PageSpeed.


Cum să remediați blocarea redării JavaScript și CSS în WordPress

Ce este JavaScript și CSS Render-Blocking?

Fiecare site WordPress are o temă și plugin-uri care adaugă fișiere JavaScript și CSS în partea frontală a site-ului dvs. Aceste scripturi pot crește timpul de încărcare a paginii dvs. de pe site și pot bloca redarea paginii.

Browserul unui utilizator va trebui să încarce acele scripturi și CSS înainte de a încărca restul HTML pe pagină. Acest lucru înseamnă că utilizatorii cu o conexiune mai lentă vor trebui să aștepte mai multe milisecunde pentru a vedea pagina.

Aceste scripturi și foi de stil sunt denumite JavaScript și CSS care blochează redarea.

Proprietarii de site-uri web care încearcă să obțină scorul de 100 de pagini Google PageSpeed ​​vor trebui să rezolve această problemă pentru a obține acel scor perfect.

Care este scorul Google PageSpeed?

Google PageSpeed ​​Insights este un instrument online creat de Google pentru a ajuta proprietarii de site-uri să-și optimizeze și să testeze site-urile web. Acest instrument testează site-ul dvs. web conform recomandărilor Google pentru rapiditate și oferă sugestii pentru a îmbunătăți timpul de încărcare a paginii dvs..

Vă arată un scor în funcție de numărul de reguli pe care site-ul dvs. le trece. Majoritatea site-urilor web ajung undeva între 50-70. Cu toate acestea, unii proprietari de site-uri se simt obligați să obțină 100 (cel mai mare punctaj pe care îl poate înscrie o pagină).

Aveți nevoie într-adevăr de scorul „100” Google PageSpeed?

Scopul informațiilor Google PageSpeed ​​este de a vă oferi ghiduri pentru a îmbunătăți viteza și performanța site-ului dvs. web. Nu vi se cere să urmați aceste reguli strict.

Nu uitați că viteza este doar una dintre numeroasele valori SEO care ajută Google să determine modul de clasare a site-ului. Viteza motivului este atât de importantă, deoarece îmbunătățește experiența utilizatorului pe site-ul dvs..

O experiență mai bună a utilizatorului necesită mult mai mult decât o simplă viteză. De asemenea, trebuie să oferiți informații utile, o interfață de utilizator mai bună și să implicați conținut cu text, imagini și videoclipuri.

Obiectivul tău ar trebui să fie crearea unui site web rapid care să ofere o experiență excelentă utilizatorului.

Am reproiectat recent WPBeginner și ne-am concentrat pe viteză, precum și pe îmbunătățirea experienței utilizatorului.

Vă recomandăm să utilizați regulile Google Pagespeed ca sugestii și dacă le puteți implementa cu ușurință fără a strica experiența utilizatorului, atunci este minunat. În caz contrar, ar trebui să te străduiești să faci cât poți și apoi să nu-ți faci griji pentru restul.

Acestea fiind spuse, să aruncăm o privire la ce puteți face pentru a repara blocarea redării JavaScript și CSS în WordPress.

Vom acoperi două metode care vor repara blocarea redării JavaScript și CSS în WordPress. Puteți alege cel care funcționează cel mai bine pentru site-ul dvs. web.

1. Remediază scripturile de blocare a randamentului și CSS cu Autoptimize

Această metodă este mai simplă și recomandată pentru majoritatea utilizatorilor.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Autoptimize. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, trebuie să accesați Setări »Autoptimize pagina pentru a configura setările pluginului.

Setări automate

Puteți începe bifând caseta de lângă Opțiuni JavaScript și Opțiuni CSS și apoi faceți clic pe butonul Salvați modificările.

Acum puteți testa site-ul dvs. web folosind instrumentul PageSpeed. Dacă mai există scripturi de blocare a randării, atunci trebuie să reveniți la pagina de setări a pluginului și să faceți clic pe butonul „Afișați setări avansate” din partea de sus.

Opțiuni avansate JavaScript

Aici puteți permite pluginului să includă JS inline și să eliminați scripturile care sunt excluse în mod implicit, cum ar fi seal.js sau jquery.js.

Apoi derulați în jos la opțiunea CSS și permiteți pluginului să agregeze CSS inline.

Faceți clic pe butonul „Salvați modificările și memoria cache goală” pentru a vă salva modificările și cache-ul de pluginuri goale.

După ce ați terminat, mergeți mai departe și verificați din nou site-ul dvs. web cu ajutorul instrumentului PageSpeed.

Asigurați-vă că vă testați site-ul dvs. pentru a vedea că nimic nu este rupt prin optimizarea JavaScript-urilor sau CSS.

Cum functioneazã?

Autoptimize agregă toate codurile JavaScript și CSS solicitate. După aceea, creează fișiere CSS și JavaScript minificate și servește copii în memorie cache pe site-ul dvs. ca async sau amânate.

Aceasta vă permite să rezolvați problema scripturilor și stilurilor de blocare a randării. Cu toate acestea, rețineți că poate afecta și performanța sau aspectul site-ului dvs. web.

2. Remediați JavaScript Render Blocking folosind W3 Total Cache

Această metodă necesită ceva mai multă muncă și este recomandată utilizatorilor care folosesc deja pluginul W3 Total Cache pe site-ul lor web.

Mai întâi va trebui să instalați și să activați pluginul W3 Total Cache. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați și configurați W3 Total Cache pentru începători.

În continuare, trebuie să vizitați Performanță »Setări generale pagina și derulați în jos în secțiunea Minify.

W3 Total Cache activare minify

Mai întâi, trebuie să verificați „Enable” lângă opțiunea Minify și apoi să selectați „Manual” pentru opțiunea mod de modificare.

Faceți clic pe butonul Salvați toate setările pentru a vă stoca setările.

În continuare, trebuie să adăugați scripturile și CSS pe care doriți să le minimizați.

Puteți obține adresele URL ale tuturor scripturilor și foilor de stil care se blochează din instrumentul Google PageSpeed ​​Insights.

Sub sugestiile în care scrie: „Eliminați JavaScript și CSS care blochează redarea din conținutul de deasupra”, faceți clic pe „Afișați cum să remediați”. Acesta vă va afișa lista de scripturi și foi de stil.

Obțineți URL-uri JavaScript și foi de stil din instrumentul Google PageSpeed

Duceți mouse-ul la un script și vă va afișa adresa URL completă. Puteți selecta această adresă URL și apoi utilizați tastele CTRL + C (Comandă + C pe Mac) pentru a copia URL-ul.

Acum îndreptați-vă către zona dvs. de administrator WordPress și mergeți la Performanță »Minim pagină.

Mai întâi trebuie să adăugați fișiere JavaScript pe care doriți să le minificați. Derulați în jos la secțiunea JS și apoi în „Operațiuni în zone” setați tipul de încorporare la „Asincron fără blocare” pentru secțiune.

Adăugați scripturi pentru a minifica

În continuare, trebuie să faceți clic pe butonul „Adăugare script” și apoi să începeți să adăugați adrese URL de script pe care le-ați copiat din instrumentul Google PageSpeed.

După ce ați terminat, derulați în secțiunea CSS, apoi faceți clic pe butonul „Adăugați o foaie de stil”. Acum începeți să adăugați adrese URL ale foilor de stil pe care le-ați copiat din instrumentul Google PageSpeed.

Adăugați foi de stil pentru a minifica

Acum faceți clic pe butonul „Salvați setările și curățați memoria cache” pentru a vă stoca setările.

Accesați instrumentul Google PageSpeed ​​și testați-vă site-ul din nou.

Asigurați-vă că testați și site-ul dvs. minuțios pentru a vedea că totul funcționează bine.

Depanare

În funcție de modul în care pluginurile și temele dvs. WordPress utilizează JavaScript și CSS, ar putea fi destul de dificil să remediați complet toate problemele de blocare a randamentului JavaScript și CSS.

În timp ce instrumentele de mai sus vă pot ajuta, pluginurile dvs. pot avea nevoie de anumite scripturi la un nivel de prioritate diferit pentru a funcționa corect. În acest caz, soluțiile de mai sus vă pot sparge pluginurile sau s-ar putea comporta în mod neașteptat.

Google vă poate arăta în continuare anumite probleme cum ar fi optimizarea livrării CSS pentru conținutul de mai sus. Autoptimize vă permite să remediați acest lucru adăugând manual CSS inline necesare pentru a afișa zona de pliere de mai sus a temei.

Cu toate acestea, ar putea fi destul de dificil să aflați ce cod CSS va trebui să afișați deasupra conținutului fold.

Asta-i tot, sperăm că acest articol te-a ajutat să înveți cum să remediați blocarea redării JavaScript și CSS în WordPress. De asemenea, poate doriți să vedeți ghidul nostru final sporind viteza și performanța WordPress pentru începători.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map