Fixați Google PageSpeed ​​Eliminați JavaScript și CSS în render-blocking

Rezolva blocarea redării Javascript și CSS

Testarea  Google PageSpeed   ​​[1] Eliminați JavaScript și CSS de blocare a render-ului în conținutul de mai sus vă propune să furnizați fișierele JS și CSS ale site-ului dvs. după ce HTML-ul este complet încărcat - și, prin urmare, nu întrerupeți încărcarea HTML pentru a le descărca.

Definiția scriptului de blocare a redării: scripturile care sunt încărcate înainte ca DOM-ul HTML complet să fie analizat. De exemplu, scripturile incluse în antet sau în conținut, fără nicio instrucțiune specifică pentru browserele de a întârzia încărcarea scriptului până după vopsirea HTML.

Eliminați JavaScript și CSS care blochează redarea în conținutul de mai sus: arătați cum să îl remediați

1. Aveți un sistem extern care să vă optimizeze site-ul
   
2. Utilizați un CDN care va efectua toate optimizările posibile în numele dvs., inclusiv următoarele trei optimizări necesare pentru a remedia eliminarea resurselor de blocare a redării:
   
3. Amânați încărcarea fișierelor Javascript
   
4. Încărcați CSS după încărcarea HTML
   
5. Folosiți un plugin WordPress
   

Există o mulțime de optimizări necesare pentru a remedia eliminarea resurselor de blocare a redării și ar putea fi obositor să le implementați singuri - în plus, va trebui să căutați în permanență noile teste incluse în Chrome LightHouse și  Google PageSpeed   ​​printre alte teste de viteză a paginii.

Nu există nicio soluție existentă pentru eliminarea resurselor de blocare a redării în codul htaccess deoarece problema este legată de DOM, adică conținutul site-ului web și ordinea în care sunt încărcate resursele incluse, cum ar fi Javascript și CSS, dar nu numai. Acestea nu pot fi declanșate în Htaccess, ci doar în conținutul DOM HTML.

Dacă rezolvați aceste probleme pentru desktop, veți elimina în același timp resursele de blocare a redării pentru mobil, deoarece ambele sunt exact aceleași!

Did you know that you can even have all these steps executed automatically for you by using an external  Accelerator de viteză a site-ului   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Amâna încărcarea fișierelor Javascript

Pentru a amâna încărcarea fișierelor JS [2], puteți adăuga instrucțiunea de asincronizare sau de amânare a link-urilor pentru scripturi. Async nu va garanta că sunt încărcate în aceeași ordine - prin urmare, dacă aveți mai multe scripturi care ar trebui să ruleze unul după altul, amânarea este preferabilă pentru a garanta secvența:

Încărcați CSS după încărcare HTML

Pentru ca CSS să fie încărcat după transmiterea integrală a codului HTML, Google propune [3] acest cod de cod pentru a adăuga la sfârșitul codului dvs. HTML, de exemplu după eticheta de închidere a subsolului și înainte de eticheta de închidere a corpului:

Pentru a optimiza site-ul dvs., este, de asemenea, o idee bună să eliminați codul CSS neutilizat, o operație care poate fi plictisitoare dacă nu aveți cunoștințe în designul web. Dacă nu ați creat singur tema site-ului dvs., ar putea fi mai înțelept să utilizați un sistem extern pentru a elimina codul CSS neutilizat pe paginile dvs. în numele dvs., cum ar fi saltul Ezoic, de exemplu, versiunea nouă (și complet gratuită) a site-ului lor uimitor Accelerator de viteză.

Treceți testul de viteză al site-ului Google!

Acest lucru mi-a permis să trec testul  Google PageSpeed   ​​[1] Eliminați blocarea JavaScript-ului și a CSS-ului de render în conținutul de mai sus (împreună cu cache-ul browserului Leverage [4]) pe un site web, Fig. 1) până la 72 (Fig. 2) și de la 59 (Fig. 3) la 79 pe desktop (Fig. 4).

Cum să eliminați resursele de blocare a randării în WordPress

Pentru a elimina resursele de blocare a redării în WordPress, este necesar să instalați un plugin cum ar fi JetPack.

Apoi, accesați opțiunile pentru care trebuie să fiți administrator și mergeți la opțiunile JetPack> Scriere> Performanță și viteză> bifați Activați acceleratorul de site, grăbiți timpul de încărcare a imaginilor, accelerați timpul de încărcare a fișierelor statice și activați încărcarea leneș imagini.

Aflați elementele de bază SEO: Înscrieți -vă astăzi!

Sporiți vizibilitatea și traficul site-ului dvs., stăpânind elementele fundamentale ale SEO cu cursul nostru de bază ușor de urmărit.

Începeți să învățați SEO

Acest lucru va elimina resursele de blocare a redării în WordPress și va încărca mai repede paginile, permițând JetPack să vă optimizeze imaginile și să vă servească imaginile și fișierele statice (cum ar fi CSS și JavaScript) din rețeaua lor globală de servere.

De asemenea, nu uitați să amânați încărcarea imaginilor în afara ecranului utilizând o funcție leneșă de sarcină. În timp ce era dificil și necesită o bibliotecă externă pentru a amâna încărcarea imaginilor în afara ecranului, este acum posibilă nativ în HTML5!

Pentru a implementa încărcarea leneșă a imaginilor pe site-urile dvs., adăugați pur și simplu valorile leneș la atributele de încărcare a imaginilor site-ului dvs., iar browserele recente vor înțelege că aceste imagini ar trebui să fie solicitate și încărcate numai dacă sunt afișate, adică dacă utilizatorul derulează în jos substituții de imagine.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

În plus, încărcare leneșă lucrează și cu iFrame și este o implementare importantă pentru eliminarea resurselor de blocare a raderii de pe paginile dvs. web.

Odată ce resursele de blocare a raderii vor avea instrucțiuni de încărcare după conținutul principal, adică HTML DOM, veți câștiga deja o mulțime de puncte pe testarea Google Lighthouse, testul de vizitare a paginii Viteza sau Vitalia Web Google Core Web.

Aveți un sistem extern care să vă optimizeze site-ul

Știți că puteți rezolva de fapt toate problemele  Google PageSpeed   ​​în numele dvs., fără prea mult efort din partea site-ului dvs., cu excepția înregistrării pentru un proces gratuit și a modificării DNS?

Utilizând tehnologia platformei Ezoic Site Speed ​​Accelerator, toate problemele obișnuite  Google PageSpeed   ​​vor fi rezolvate de sistemul lor, care va fi intermediarul dintre site-ul dvs. web și vizitatori. Vor optimiza pagina web pentru dvs. înainte de a o afișa vizitatorului.

Deveniți verde, pur și simplu înregistrându-vă pentru o probă gratuită pe platforma Ezoic și încercați-l pentru dvs. - acestea vor face ca site-ul dvs. să atingă cele mai înalte standarde de optimizare a vitezei paginii în câteva zile: să redea imagini webp pentru generația următoare, să optimizeze CSS și JavaScript eliminând CSS neutilizate și JS, imagini de încărcare leneșă, redimensionarea imaginilor, memorare în cache a paginilor site-ului dvs., optimizare fonturi, conectare pre-conectată la toate site-urile incluse și multe altele.

Nu este necesar un card de credit - tot ce trebuie să faceți este să vă înregistrați gratuit și să încercați. În plus, dacă site-ul dvs. web câștigă bani din reclame afișate, în plus, pentru a face site-ul dvs. mult mai rapid, acestea vă pot face, de asemenea, să câștigați de câteva ori mai mulți bani decât faceți cu Google AdSense prin optimizarea anunțurilor dvs. cu ajutorul învățării automate și a inteligenței artificiale avansate.

Întrebări Frecvente

Cum să eliminați JavaScript și CSS de blocare a randamentului în conținut deasupra?

Pentru a elimina JavaScript și CSS de blocare a referinței pentru conținut deasupra, ar trebui să vă asigurați că fișierele JS și CSS ale site-ului dvs. sunt încărcate după ce HTML este complet încărcat. Aceasta înseamnă să nu întrerupeți procesul de încărcare HTML pentru a descărca aceste fișiere. Puteți amâna fișierele JavaScript cu atributul async sau amânare, iar pentru CSS, puteți utiliza cod specific pentru a -l încărca după HTML. Un sistem de optimizare extern precum Ezoic poate gestiona, de asemenea, acest lucru automat.

Cum pot dezvolta dezvoltatorii web să se adreseze recomandărilor Google PageSpeed ​​pentru a elimina JavaScript și CSS de blocare a randamentului?

Dezvoltatorii Web își pot optimiza site-ul prin minificarea fișierelor JavaScript și CSS, folosind încărcarea asincronă pentru JavaScript, inlinind CSS critic direct în HTML și amânarea încărcării fișierelor CSS și JavaScript non-critice. Implementarea acestor strategii poate îmbunătăți semnificativ timpii de încărcare și scorurile pagespeed.

Perfect Chrome Lighthouse scor: Ce se întâmplă?