Ce sunt resursele de blocare a randării și cum să remediați problemele de blocare a randării

Publicat: 2018-02-28

Resursele de blocare a randării sunt unul dintre cele mai comune motive pentru încărcarea lentă a site-urilor web. Iar dacă site-ul dvs. nu este suficient de rapid, nu numai că răniți experiența utilizatorului vizitatorilor, ci și clasarea în motorul dvs. de căutare. Vestea proastă este că, dacă site-ul tău este lent, pierzi clienți și venituri.

Cu toate acestea, există și o veste bună – vă puteți îmbunătăți viteza site-ului web eliminând resursele care blochează redarea. În acest articol, vă vom explica modul în care resursele de blocare a redării vă influențează timpul de încărcare și vă vom arăta cum să le remediați.

Ce sunt resursele care blochează randarea?

Cele mai comune resurse de blocare a redării sunt fișierele JavaScript și CSS care se află în capul paginii dvs. web. Acestea se încarcă deasupra zonei de pliere (sau a zonei pe care o vedeți în mod normal pe un site web înainte de a derula în jos pentru a vedea restul conținutului) și fac parte din calea critică de redare utilizată de un browser web.

În termeni profani, asta înseamnă că anumite evenimente trebuie să se întâmple pentru ca browserul dvs. să afișeze (reda) corect vizualizarea inițială a oricărei pagini web. Iată un exemplu despre cum funcționează o cale de randare de bază:

  • Browserul descarcă o pagină web care constă dintr-un fișier HTML care conține structura paginii web
  • Browserul citește apoi HTML și observă 3 fișiere suplimentare: un fișier css, un fișier javascript și o imagine
  • Browserul va descărca mai întâi imaginea
  • Browserul realizează apoi că nu poate continua să afișeze pagina fără să apuce CSS și JavaScript
  • Browserul descarcă fișierul CSS și îl citește pentru a se asigura că nu este apelat nimic altceva
  • Browserul descarcă fișierul JavaScript și îl citește pentru a se asigura că nu este apelat nimic altceva
  • Browserul poate afișa în sfârșit pagina web

În timp ce browserul este ocupat să încarce și să citească fiecare dintre fișierele CSS și JavaScript, vizitatorii tăi se uită la un ecran gol, așteaptă ca site-ul tău să se încarce. Dacă utilizați un CMS precum WordPress, browserul dvs. poate fi ocupat destul de mult, deoarece va trebui să încarce nu numai fișierele de stil și script ale temei dvs., ci și fișierele de script și stil care vin cu WordPress în sine, precum și cele care vin cu toate pluginurile și widget-urile pe care le utilizați.

Când vine vorba de optimizarea vitezei site-ului dvs., prima sarcină din lista dvs. ar trebui să fie reducerea timpului necesar utilizatorilor dvs. pentru a putea vizualiza și interacționa cu conținutul dvs. Cel mai simplu mod de a face asta este să optimizați calea critică de redare.

Cum să remediați problemele de blocare a randării

Acum că știți ce cauzează problemele de blocare a redării și cum afectează acestea viteza site-ului dvs., să vorbim despre cum să remediați aceste probleme.

CSS care blochează randarea

Există trei moduri de a remedia problemele CSS care blochează randarea:

  • Apelați corect fișierele dvs. CSS – fișierul dvs. CSS ar trebui să fie legat în fișierul dvs. HTML astfel: <link rel="style.css" href=“style.css"> în loc să vă bazați pe utilizarea metodei @import . Metoda @import va fi de obicei aproape de partea de sus a foii de stil obișnuite și va determina browserul să se întoarcă și să găsească fișierul importat înainte de a putea citi restul fișierului CSS și va avea ca rezultat o întârziere și mai mare atunci când vine vorba de redarea paginii dvs. web
  • Reduceți numărul de fișiere CSS din calea critică - dacă este posibil, combinați toate fișierele CSS diferite într-unul singur și eliminați apelul la acele fișiere din HTML.

JavaScript care blochează randarea

Pentru a elimina JavaScript care blochează redarea, trebuie să știți câte fișiere JavaScript sunt încărcate și unde sunt numite în HTML. O modalitate bună de a afla acest lucru este să utilizați instrumentul Google PageSpeed ​​Insights. Când compania de curățare cu sediul în Australia, This Is Neat Cleaning, își construia site-ul web, au folosit PageSpeed ​​Insights de la Google ca punct de referință, testând diferite scenarii pentru a afla exact de ce aveau nevoie atât pentru mobil, cât și pentru desktop.

Din testare a fost evident că inserarea majorității scripturilor în partea de jos a fișierelor HTML a produs cele mai bune rezultate. Motivul principal este că mutarea scripturilor în partea de jos a paginii a eliminat redarea care bloca javascript de la blocarea experienței utilizatorului. Cu CSS-ul critic încă încărcat deasupra foldului, utilizatorul putea folosi în mod fundamental site-ul, în timp ce interacțiunile și funcționalitățile erau încă încărcate în fundal.

Folosind un plugin

Desigur, ca și în orice lucru legat de WordPress, puteți utiliza un plugin pentru a remedia problemele de blocare a randării. Cu peste un milion de instalări active totale, a fost deloc clar că This is Neat Cleaning ar folosi W3 Total Cache pentru stocarea în cache, minimizarea și optimizarea performanței.

Iată cum puteți utiliza W3 Total Cache pentru a remedia problemele de blocare a redării.

În tabloul de bord WordPress, accesați Performanță > Setări și derulați în jos la secțiunea Minimizare . Bifați caseta care spune Activare și apoi selectați Manual din meniul drop-down de lângă modul minimizare. Salvați setările . Apoi, va trebui să adăugați toate scripturile și stilurile pe care doriți să le minimizați.

Pentru a afla unde se află scripturile și foile de stil care blochează randarea, accesați Instrumentul Google Page Speed ​​Insights și analizați site-ul dvs. Apoi, uitați-vă la fila de sugestii și găsiți secțiunea care scrie: Eliminați JavaScript și CSS care blochează redarea în conținutul de deasupra paginii . Faceți clic pe Afișați cum să remediați și selectați și copiați adresa URL a fișierului.

Reveniți la tabloul de bord WordPress și navigați la W3 Total Cache > Performance > Minimify . Derulați în jos la secțiunea JavaScript și, sub Operațiuni în zone, asigurați-vă că tipul de încorporare este setat la Non-blocking using defer pentru secțiunea <head> . Apoi, faceți clic pe butonul Adăugați script și inserați adresa URL pe care ați copiat-o din instrumentul Google PageSpeed.

După ce ați adăugat toate fișierele de script, derulați în jos la secțiunea CSS , faceți clic pe Adăugați o foaie de stil și adăugați adresele URL ale fișierelor de foaia de stil copiate din Google PageSpeed ​​Insights.

Când ați terminat, faceți clic pe butonul Salvați setările și ștergeți memoria cache .

Gânduri finale

Resursele care blochează randarea pot provoca ravagii când vine vorba de viteza site-ului. Din fericire, există câteva modalități de a remedia aceste probleme, așa că utilizați sfaturile furnizate aici pentru a îmbunătăți viteza site-ului dvs. și pentru a vă asigura că vizitatorii dvs. au cea mai bună experiență de utilizator posibilă.