Doriți să eliminați blocarea redării JavaScript și CSS în WordPress?
Dacă testați site-ul dvs. web cu informații Google PageSpeed, atunci veți vedea probabil o sugestie pentru a elimina blocurile de scripturi și de redare CSS. Cu toate acestea, nu oferă detalii despre cum să faceți acest lucru pe site-ul dvs. WordPress.
În acest articol, vă vom arăta cum să remediați cu ușurință blocarea de redare JavaScript și CSS în WordPress pentru a îmbunătăți scorul Google PageSpeed.
Dar înainte, haideți să descoperim împreună Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs..
Ce este JavaScript și CSS Render-Blocking?
Blocarea redărilor JavaScript și CSS sunt fișiere care împiedică un site web să afișeze o pagină web înainte de a le încărca.
Fiecare site web WordPress are o temă și plugin-uri care adaugă fișiere JavaScript și CSS pe frontend-ul site-ului dvs. web. Aceste scripturi pot crește timpul de încărcare a paginii de pe site-ul dvs. web și pot bloca redarea paginii.
Browserul unui utilizator va trebui să încarce aceste scripturi și CSS înainte de a încărca restul codului HTML pe pagină. Acest lucru înseamnă că utilizatorii cu o conexiune mai lentă vor trebui să aștepte câteva milisecunde pentru a vizualiza pagina.
Aceste scripturi și foi de stil se numesc JavaScript și CSS redau blocante.
Proprietarii de site-uri web care încearcă să obțină un scor 100 de Google PageSpeed vor trebui să remedieze acest lucru pentru a obține acel scor perfect.
Care este scorul Google PageSpeed?
Google PageSpeed Insights este un instrument de testare a vitezei 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 în conformitate cu ghidurile de viteză Google și oferă sugestii pentru îmbunătățirea timpilor de încărcare a paginii dvs. de site.
Vă arată un scor în funcție de numărul de reguli pe care site-ul dvs. le trece. Majoritatea site-urilor web au între 50 și 70 de ani. Cu toate acestea, unii proprietari de site-uri se simt presionați să ajungă la 100.
Chiar aveți nevoie de un scor de „100” pe Google PageSpeed?
Scopul Informații Google PageSpeed înseamnă să vă oferim îndrumări pentru a îmbunătăți viteza și performanța site-ului dvs. Nu vi se cere să urmați cu strictețe aceste reguli.
Amintiți-vă, 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ă este că se îmbunătățește experiența utilizatorului pe site-ul dvs.
O experiență mai bună a utilizatorului necesită mult mai mult decât viteză. De asemenea, ar trebui să oferiți informații utile, interfață de utilizator mai bună și angajați conținut cu text, imagini și videoclipuri.
Scopul dvs. ar trebui să fie crearea unui site web rapid care să ofere o experiență excelentă pentru utilizatori.
În timpul celei mai recente proiectări BlogPasCher, ne-am concentrat pe viteză, precum și pe îmbunătățirea experienței utilizatorului.
Vă recomandăm să utilizați regulile Google Pagespeed ca sugestie, iar dacă le puteți implementa cu ușurință fără a strica experiența utilizatorului, atunci este excelent. Dacă nu, ar trebui să te străduiești să faci cât de mult 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 remedia blocarea randării JavaScript și CSS în WordPress.
Vom acoperi două metode care vor rezolva această problemă. Puteți alege cel care funcționează cel mai bine pe site-ul dvs. web.
1. Fixează scripturile de blocare a randării și CSS cu WP Rocket
Pentru această metodă, vom folosi pluginul WP Rocket. Aceasta este cel mai bun plugin de memorie cache WordPress pe piață și vă permite să îmbunătățiți rapid performanța site-ului dvs. web, fără a fi configurate abilități tehnice sau complexe.
În primul rând, trebuie să instalați și să activați pluginul WP Rocket. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre instalarea unui plugin WordPress..
WP Rocket își activează memoria cache cu setări optime. În mod implicit, nu activează opțiunile de optimizare JavaScript și CSS. Aceste optimizări pot afecta potențialaspectul site-ului dvs. web sau anumite caracteristici, de aceea pluginul vă permite să activați acele setări ca opțiune.
Pentru a face acest lucru, trebuie să continuați Setări »Racheta WP, apoi comutați la „Optimizarea fișierelor '. De acolo, derulați în jos în secțiune Fișiere CSS și bifați casetele Minimizează CSS, Combinați fișiere CSS et Optimizarea livrării CSS.
Notă : WP Rocket va încerca să minimizeze toate fișierele dvs. CSS, să le combine și să încarce numai CSS-ul necesar pentru partea vizibilă a site-ului dvs. Acest lucru ar putea afectaaspectul site-ului dvs. web, așa că ar trebui să vă testați în detaliu site-ul pe mai multe dispozitive și dimensiuni de ecran.
Apoi, trebuie să derulați la secțiune Fișiere JavaScript. De aici puteți bifa toate opțiunile pentru îmbunătățirea maximă a performanței.
Puteți minima și combina fișierele JavaScript la fel ca și fișierele CSS.
De asemenea, puteți împiedica WordPress să încarce fișierul. jQuery Migrare. Acesta este un script pe care WordPress îl încarcă pentru a oferi compatibilitate pentru pluginuri și teme folosind versiuni mai vechi de jQuery.
Majoritatea site-urilor web nu au nevoie de acest fișier, dar este o idee bună să vă verificați site-ul web pentru a vă asigura că eliminarea acestuia nu vă afectează tema sau pluginurile.
Apoi derulați puțin mai jos și verificați opțiunile 'Se încarcă JavaScript Defered'și'Mod sigur pentru jQuery".
Aceste opțiuni întârzie încărcarea JavaScript-ului neesențial, iar modul jQuery Safe vă permite să încărcați jQuery pentru teme care îl pot utiliza în linie.
Nu uitați să faceți clic pe butonul Salvați modificările pentru a vă stoca setările.
După aceea, puteți șterge memoria cache din WP Rocket înainte de a testa din nou site-ul dvs. cu Google Page Speed Insights.
Pe site-ul nostru de teste, am reușit să obținem un scor 100% pe computerele de bord și problema rezolvată a fost rezolvată atât în punctajele mobile cât și pe cele desktop.
2. Remediază blocarea de redare JavaScript și CSS cu autoptimize
Pentru această metodă, vom folosi un alt plugin creat special pentru a îmbunătăți livrarea fișierelor CSS și JS ale site-ului dvs. În timp ce acest plugin se termină, îi lipsește celelalte funcții puternice pe care WP Rocket le oferă.
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.
La activare, trebuie să vizitați pagina Setare »Autoptimize pentru a configura setările pluginului.
În primul rând, trebuie să bifați opțiunea „Optimizați codul JavaScript'sub bloc JavaScript Opţiuni. Asigurați-vă că opțiunea „Agregați toate fișierele JS legate” nu este bifată.
Apoi derulați în jos în zonă Opțiuni CSS și bifați opțiunea ' Optimizați codul CSS?'. Asigurați-vă că opțiunea „Agregă toate fișierele CSS legate'nu este bifat.
Acum puteți face clic pe butonul „Salvați modificările și ștergeți memoria cache” pentru a stoca setările.
Continuați și testați site-ul dvs. web cu Page Speed Insights. Pe site-ul nostru demonstrativ, am reușit să rezolvăm problema cu redarea blocată cu aceste setări de bază.
Dacă mai există scripturi de blocare a redării acolo, ar trebui să vă întoarceți la pagina de setări a pluginului și să consultați opțiunile JavaScript și CSS.
De exemplu, 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.
Faceți clic pe butonul „Salvați modificările și ștergeți memoria cache” pentru a salva modificările și a șterge memoria cache a pluginului.
După ce ați terminat, mergeți mai departe și consultați din nou site-ul dvs. web cu ajutorul instrumentului Page Speed Insights.
Cum funcționează?
Autoptimize pachetele toate fișierele JavaScript și CSS. După aceea se creează fișiere CSS și JavaScript modificate și servește copii în cache ale site-ului dvs. web în mod sincronizat sau amânat.
Acest lucru vă permite să rezolvați problema de blocare randări scripturi și stiluri de blocare. Cu toate acestea, vă rugăm să rețineți că acest lucru poate afecta și performanța sauaspectul site-ului dvs. web.
ajutor
În funcție de modul în care pluginurile și tema dvs. WordPress folosesc JavaScript și CSS, poate fi destul de dificil să rezolvați complet toate problemele cu blocarea din Redări 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 pot rupe funcționalitatea acestor pluginuri sau s-ar putea comporta în mod neașteptat.
Google vă poate arăta în continuare câteva probleme precum optimizarea livrării CSS. WP Rocket vă permite să remediați acest lucru adăugând manual CSS-urile critice necesare pentru a afișa perfect tema WordPress.
Cu toate acestea, poate fi destul de dificil să știți ce cod CSS va trebui să afișați.
Descoperiți și câteva teme și plugin-uri premium WordPress
Puteți utiliza alte plugin-uri WordPress pentru a da un aspect modern și a optimiza aderența blogului sau a site-ului dvs. web.
Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.
1. WordPress Speed Optimization Plugin
Vă chinuiți să gestionați mai multe pluginuri de optimizare a vitezei site-ului web? Sunteți îngrijorat că acestea împiedică viteza de execuție a site-ului dvs. web? atunci, acest plugin WordPress va fi soluția supremă pentru toate grijile tale.
Acest plugin este conceput pentru a vă oferi funcționalitatea a aproape 6-8 plugin-uri WordPress diferite. Trebuie doar să-l instalați și să-l configurați pentru a vedea o îmbunătățire marcată a încărcării paginilor dvs.
Am dori să subliniem că acest lucru nu este un plugin cache sau CDN, dar rezultatul pe care îl oferă este totuși impresionant. Nu ezitați să încercați acest plugin WordPress pentru a vedea de ce este capabil.
Descarca | Demo | web hosting
2. Social Share & Locker Pro
Pluginul Social Share & Locker Pro a fost conceput pentru a vă ajuta site-ul să fie mai vizibil pe rețelele de socializare. Cu doar câteva clicuri, puteți fie să setați poziția pictogramelor dvs. sociale, fie să vă blocați conținutul solicitând partajarea pe una dintre rețelele sociale oferite de dvs.
Aveți teme predefinite 10 și aceasta ar trebui să acopere dorințele cele mai comune. Toate temele ei sunt Retina și fac minuni.
De asemenea, cu Social Share & Locker Pro, veți putea afișa numele complet al rețelelor sociale sau doar pictograma. Va depinde de designul dvs., de spațiul disponibil sau de dorințele dvs.
Descarca | Demo | web hosting
3. WordPress PDF Imagini Lightbox
WordPress PDF Lightbox este un Extensia WordPress care vă permite să creați vizualizatoare de fișiere PDF. Un vizualizator PDF este o colecție de fotografii care pot fi salvate ca PDF-uri.
Cu această extensie, puteți crea oricâte vizualizatoare PDF doriți. Pentru fiecare vizualizator, administratorul poate seta câteva opțiuni precum:
- Imagine de copertă: care va fi adăugată ca prima pagină a PDF-ului creat de utilizator
- Imagini maxime per vizualizator
- O imagine de filigran: a fi aplicată pe paginile PDF
- Trimiterea prin e-mail: dacă această funcție este activată, a formular de contact va fi oferit imediat după galeria de imagini. Prin acest formular, utilizatorii vor putea trimite prin e-mail PDF-ul creat oricui.
Descarca | Demo | web hosting
Resurse recomandate
Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.
- 10 plugin-uri WordPress pentru a îmbunătăți SEO-ul site-ului dvs. web
- 5 pluginurile WordPress premium pentru a vă optimiza categoriile
- 10 plugin-uri WordPress pentru a converti moneda
- Plugin-uri WordPress 10 pentru a integra un player audio într-un site
Concluzie
Aici ! Gata pentru acest tutorial. Sperăm că acest articol v-a ajutat să aflați cum să remediați blocarea randării JavaScript și CSS în WordPress. Puteți vedea de asemenea Ghid final despre cum să grăbești performanța WordPress pentru începători.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.
Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate. Și dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii.
...
