Cum să remediați JavaScript și CSS care blochează redarea în WordPress

Întâmpinarea problemelor cu JavaScript și CSS care blochează redarea pe site-ul dvs. WordPress poate fi frustrantă. Aceste probleme pot încetini site-ul dvs. web și le pot afecta performanța. Un site lent poate îndepărta vizitatorii și vă poate afecta clasamentul în motoarele de căutare.

Când verificați site-ul dvs. pe Google PageSpeed Insights, este posibil să vedeți o sugestie de a elimina aceste resurse care blochează redarea. Din păcate, instrumentul nu oferă instrucțiuni clare despre cum să remediați această problemă în WordPress.

Vestea bună este că există instrumente care pot face ca remedierea JavaScript și CSS care blochează redarea să fie mai puțin complicată decât pare. Puteți folosi un plugin de caching precum WP Rocket sau Autoptimize pentru a vă optimiza site-ul prin minificarea și amânarea scripturilor, ceea ce reduce timpii de încărcare și îmbunătățește scorurile PageSpeed.

În acest articol, vă vom ghida prin pașii pentru a rezolva aceste probleme pe site-ul dvs. WordPress.

Ce este JavaScript și CSS care blochează redarea?

JavaScript-ul și CSS-ul care blochează redarea sunt fișiere care împiedică un site web să afișeze o pagină web înainte de a încărca aceste fișiere.

Fiecare site WordPress are o temă și pluginuri care adaugă fișiere JavaScript și CSS în partea frontală a site-ului dvs.

Aceste scripturi pot crește timpul de încărcare al paginilor site-ului dvs. și pot bloca, de asemenea, redarea paginii.

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

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

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

Ce este un scor Google PageSpeed?

Google PageSpeed Insights este un instrument de testare a vitezei site-ului creat de Google pentru a ajuta proprietarii de site-uri să își optimizeze și testeze site-urile. Acest instrument testează site-ul dvs. în raport cu ghidurile de viteză ale Google și oferă sugestii pentru îmbunătățirea timpului de încărcare a paginii.

Îți arată un scor bazat pe numărul de audituri pe care site-ul tău le trece.

Majoritatea site-urilor web obțin undeva între 50-70. Cu toate acestea, unii proprietari de site-uri se simt obligați să obțină 100 (cel mai mare scor pe care îl poate obține o pagină).

Chiar ai nevoie de scorul perfect „100” la Google PageSpeed?

Scopul Google PageSpeed Insights este de a-ți oferi ghiduri pentru a-ți îmbunătăți viteza și performanța site-ului. Acestea fiind spuse, nu ești obligat să urmezi aceste reguli strict.

Amintește-ți că viteza este doar unul dintre multele metrici de optimizare pentru motoarele de căutare (SEO) ale site-ului web care ajută Google să determine cum să claseze site-ul tău. Viteza este atât de importantă deoarece îmbunătățește experiența utilizatorului pe site-ul tău.

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

Atunci, scopul tău ar trebui să fie crearea unui site web rapid care oferă o experiență excelentă utilizatorului.

Recomandăm să folosiți regulile Google PageSpeed ca sugestii. Dacă le puteți implementa cu ușurință fără a strica experiența utilizatorului, este excelent. În caz contrar, ar trebui să încercați să faceți cât mai mult posibil și apoi să nu vă faceți griji pentru restul.

Având în vedere acest lucru, vom analiza ce puteți face pentru a remedia JavaScript-ul și CSS-ul care blochează randarea în WordPress. Vom acoperi 2 metode care vor elimina resursele care blochează randarea în WordPress. Puteți alege pe cea care funcționează cel mai bine pentru site-ul dvs.:

• Metoda 1: Remediați scripturile și CSS-ul care blochează redarea cu WP Rocket
• Metoda 2: Remediați scripturile și CSS-ul care blochează redarea cu Autoptimize
• Ce să faci dacă JavaScript și CSS-ul care blochează redarea încă există

Să începem și să facem site-ul dvs. să funcționeze perfect!

Metoda 1: Remediați scripturile și CSS-ul care blochează redarea cu WP Rocket

Pentru această metodă, vom folosi pluginul WP Rocket.

Este cel mai bun plugin de caching și optimizare WordPress de pe piață și vă permite să îmbunătățiți rapid performanța site-ului dvs. fără abilități tehnice sau o configurare complicată.

Mai întâi, trebuie să instalați și să activați pluginul WP Rocket. Pentru mai multe detalii, puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

WP Rocket funcționează imediat: va activa caching-ul cu setări optime pentru site-ul dvs. Puteți afla mai multe despre acest lucru în ghidul nostru complet despre cum să instalați și să configurați corect WP Rocket în WordPress.

În mod implicit, nu activează opțiunile de optimizare JavaScript și CSS. Aceste optimizări pot afecta aspectul site-ului dvs. sau unele funcționalități, motiv pentru care plugin-ul vă permite să activați aceste setări opțional.

Pentru a face acest lucru, trebuie să vizitați pagina Setări » WP Rocket și să comutați la fila „Optimizarea fișierelor”.

De aici, derulați pur și simplu în secțiunea „Fișiere CSS” și bifați căsuțele de lângă „Minify CSS”, „Combine CSS Files” și „Optimize CSS Delivery”.

Pentru setarea „Optimize CSS Delivery”, WP Rocket recomandă alegerea metodei „Elimină CSS-ul nefolosit”.

Pe lângă oferirea celei mai bune performanțe, poate ajuta la reducerea dimensiunii paginii și a cererilor HTTP.

Apoi, trebuie să derulezi la secțiunea „Fișiere JavaScript”.

De aici, puteți verifica toate opțiunile pentru o îmbunătățire maximă a performanței.

Puteți minimiza și combina fișierele JavaScript, așa cum ați făcut pentru CSS.

Poți, de asemenea, să oprești WordPress din încărcarea fișierului jQuery Migrate. Acest script este încărcat pentru a oferi compatibilitate cu plugin-urile și temele care folosesc versiuni vechi de jQuery.

Majoritatea site-urilor web nu au nevoie de acest fișier, dar totuși vei dori să-ți verifici site-ul pentru a te asigura că eliminarea acestuia nu afectează tema sau plugin-urile.

Apoi, să derulăm puțin mai jos și să bifăm căsuțele de lângă opțiunile „Load JavaScript Defered” și „Safe Mode for jQuery”.

Aceste opțiuni întârzie încărcarea JavaScript-urilor neesențiale, iar modul sigur jQuery vă permite să încărcați jQuery pentru temele care îl pot folosi inline. Puteți lăsa această opțiune nebifată dacă sunteți sigur că tema dvs. nu folosește jQuery inline nicăieri.

Nu uitați să faceți clic pe butonul „Salvare modificări” pentru a vă stoca setările.

După aceea, s-ar putea să doriți, de asemenea, să ștergeți memoria cache în WP Rocket înainte de a vă testa din nou site-ul cu Google PageSpeed Insights.

Pe site-ul nostru de test, am reușit să obținem un scor de 100% pe dispozitive desktop, iar problema blocării redării a fost rezolvată atât în scorurile mobile, cât și în cele desktop.

Metoda 2: Remediați scripturile și CSS-ul care blochează redarea cu Autoptimize

Pentru această metodă, vom folosi un plugin separat, creat special pentru a îmbunătăți livrarea fișierelor CSS și JS ale site-ului dvs. Deși acest plugin își face treaba, nu are celelalte caracteristici puternice pe care le are WP Rocket.

Primul lucru pe care trebuie să-l faci este să instalezi și să activezi Autoptimize, un plugin gratuit pentru a accelera performanța site-ului web. Dacă ai nevoie de ajutor, nu ezita să consulți ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

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

Mai întâi, să bifăm căsuța de lângă „Optimize JavaScript Code” sub blocul „JavaScript Options”. Aici, va trebui să vă asigurați că opțiunea „Aggregate JS-files” este debifată.

Apoi, veți dori să derulați în jos la caseta „Opțiuni CSS” și să bifați opțiunea „Optimizează codul CSS”.

Asigurați-vă pur și simplu că opțiunea „Aggregate CSS-files” este debifată.

Acum puteți face clic pe butonul „Salvare modificări și golire cache” pentru a salva setările.

Continuați și testați site-ul dvs. cu instrumentul PageSpeed Insights. Cu aceste setări de bază, am rezolvat cu succes problema blocării redării pe site-ul nostru demo.

Dacă mai există scripturi care blochează redarea, atunci puteți reveni la pagina de setări a pluginului și puteți revizui setările din opțiunile JavaScript și CSS.

De exemplu, puteți permite pluginului să includă JS inline și să elimine scripturile excluse în mod implicit, cum ar fi seal.js sau jquery.js. Apoi, pur și simplu faceți clic pe butonul „Salvează modificările și golește cache-ul” pentru a salva modificările și a goli cache-ul pluginului.

După ce ați terminat, verificați din nou site-ul dvs. cu instrumentul PageSpeed Insights.

Cum funcționează Autoptimize?

Autoptimize agreghează tot JavaScript și CSS înregistrat. După aceea, creează fișiere CSS și JavaScript minificate și servește copii cache pe site-ul dvs. ca asincron sau amânat.

Acest lucru vă permite să remediați problema scripturilor și stilurilor care blochează redarea. Cu toate acestea, vă rugăm să rețineți că poate afecta și performanța sau aspectul site-ului dvs.

Ce să faci dacă JavaScript și CSS-ul care blochează redarea încă există

În funcție de modul în care pluginurile și tema dvs. WordPress utilizează JavaScript și CSS, poate fi dificil să remediați complet toate problemele legate de blocarea redării JavaScript și CSS.

Deși instrumentele de mai sus pot ajuta, pluginurile dvs. ar putea avea nevoie de anumite scripturi pentru a funcționa corect la un nivel de prioritate diferit. În acest caz, soluțiile de mai sus pot defecta funcționalitatea unor astfel de pluginuri sau le pot face să se comporte neașteptat.

În loc să eliminați complet problemele care blochează redarea, recomandăm să folosiți abordări alternative pentru a accelera site-ul dvs. web. De exemplu, puteți utiliza un serviciu CDN pentru a servi fișierele JavaScript și CSS statice și pentru a reduce timpul de încărcare.

Puteți citi ghidul nostru complet pentru a crește viteza și performanța WordPress pentru mai multe informații.

Sperăm că acest articol te-a ajutat să înveți cum să remediezi JavaScript-ul și CSS-ul care blochează randarea în WordPress. S-ar putea să vrei să vezi și articolul nostru despre cum să remediezi ușor eroarea „Acest site nu poate fi accesat” și lista noastră de experți cu cele mai comune erori WordPress și cum să le remediezi.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.