Cum să eliminați resursele care blochează randarea de pe site-ul dvs. WordPress

Ați terminat vreodată de creat un site web WordPress, ați iubit totul despre el și ați început imediat să-l urâți după ce v-ați dat seama că durează o veșnicie să se încarce? Stăpânirea eliminării resurselor de blocare a randării va ajuta la diagnosticarea acestei probleme. Dar cum?

Nu numai că vitezele mici de încărcare sunt o pacoste pentru tine și vizitatorii tăi, dar te pot costa și semnificativ atunci când vine vorba de SEO. Din 2010, algoritmii Google au luat în considerare viteza de încărcare în deciziile de clasare, astfel încât paginile lente apar mai jos în paginile cu rezultate.

S-ar putea să fiți familiarizați cu vinovații obișnuiți ai performanței slabe a paginii - conținut excesiv, fișiere imagine necomprimate, găzduire insuficientă și lipsa memoriei cache, pentru a numi câteva. Dar există un alt făptuitor adesea trecut cu vederea în joc: resursele care blochează randamentul.

Nu mă înțelege greșit - CSS și JavaScript sunt grozave. Fără CSS, site-urile web ar fi ziduri de text simplu. Fără Ja=ooovaScript, nu am putea adăuga elemente dinamice, interactive și captivante pe site-urile noastre web. Dar, dacă sunt executate la momentul nepotrivit, atât CSS, cât și JavaScript pot afecta performanța site-ului dvs.

Iată de ce: când un browser web încarcă pentru prima dată o pagină web, acesta analizează tot codul HTML al paginii înainte de a-l afișa pe ecran unui vizitator. Când browserul întâlnește un link către un fișier CSS, un fișier JavaScript sau un script inline (adică, cod JavaScript în documentul HTML în sine), întrerupe analiza HTML pentru a prelua și executa codul, ceea ce încetinește totul.

Dacă ți-ai optimizat performanța paginii în WordPress și încă întâmpinați probleme, resursele de blocare a redării pot fi vinovate. Uneori, acest cod este important să ruleze la prima încărcare, dar de cele mai multe ori poate fi eliminat sau împins până la sfârșitul cozii.

În această postare, vă vom arăta cum să eliminați acest cod deranjant de pe site-ul dvs. WordPress și să vă îmbunătățiți performanța.

Dacă preferați să urmăriți un videoclip, consultați această explicație creată de WP Casts:

1. Identificați resursele care blochează randarea.

Înainte de a face modificări, mai întâi trebuie să localizați resursele de blocare a randării. Cel mai bun mod de a face acest lucru este cu un test de viteză online gratuit, cum ar fi instrumentul Google PageSpeed ​​Insights. Inserați adresa URL a site-ului dvs. și faceți clic pe Analizați .

Când scanarea este finalizată, Google atribuie site-ului dvs. un scor de viteză agregat, de la 0 (cel mai lent) la 100 (cel mai rapid). Un scor în intervalul 50-80 este mediu, așa că veți dori să ajungeți în partea superioară a acestui interval sau deasupra acestuia.

Pentru a identifica fișierele care blochează redarea care vă încetinesc pagina, derulați în jos la Oportunități , apoi deschideți acordeonul Eliminați resursele care blochează redarea .

Sursa imaginii

Veți vedea o listă de fișiere care încetinesc „prima vopsea” a paginii dvs. - aceste fișiere afectează timpul de încărcare a întregului conținut care apare în fereastra browserului la încărcarea inițială a paginii. Acesta se mai numește și conținut „de mai sus”.

Luați notă de orice fișiere care se termină cu extensiile .css și .js, deoarece acestea sunt cele pe care veți dori să vă concentrați.

2. Eliminați resursele care blochează redarea manual sau cu un plugin.

Acum că ați identificat problema, există două moduri de a o rezolva în WordPress: manual sau cu un plugin. Vom acoperi mai întâi soluția de plugin.

Mai multe plugin-uri WordPress pot reduce efectul resurselor de blocare a randării pe site-urile WordPress. Voi acoperi două soluții populare, Autoptimize și W3 Total Cache.

Cum să eliminați resursele care blochează randarea cu pluginul Autoptimize

Autoptimize este un plugin gratuit care vă modifică fișierele site-ului web pentru a livra pagini mai rapide. Autoptimize funcționează prin agregarea fișierelor, reducerea codului (adică reducerea dimensiunii fișierului prin ștergerea caracterelor redundante sau inutile) și întârzierea încărcării resurselor care blochează randamentul.

Deoarece modificați backend-ul site-ului dvs., nu uitați să fiți precaut cu acest plugin sau cu orice plugin similar. Pentru a elimina resursele care blochează randarea cu Autoptimize:

1. Instalați și activați pluginul Autoptimize.

2. Din tabloul de bord WordPress, selectați Setări > Optimizare automată .

3. Sub Opțiuni JavaScript , bifați caseta de lângă Optimizați codul JavaScript? .

4. Dacă caseta de lângă Agregate JS-files? este bifat, debifați-l.

5. Sub Opțiuni CSS , bifați caseta de lângă Optimizați codul CSS? .

6. Dacă caseta de lângă Agregate CSS-files? este bifat, debifați-l.

7. În partea de jos a paginii, faceți clic pe Salvați modificările și goliți memoria cache .

8. Scanați-vă site-ul web cu PageSpeed ​​Insights și verificați dacă există o îmbunătățire.

9. Dacă PageSpeed ​​Insights încă raportează fișiere JavaScript care blochează randarea, reveniți la Setări > Optimizare automată și bifați casetele de lângă Agregați fișiere JS? și fișierele CSS agregate? . Apoi, faceți clic pe Salvare modificări și goliți memoria cache și scanați din nou.

Cum să eliminați resursele care blochează randarea cu pluginul W3 Total Cache

W3 Total Cache este un plugin de stocare în cache utilizat pe scară largă care ajută la rezolvarea codului întârziat. Pentru a elimina JavaScript care blochează redarea cu W3 Total Cache:

1. Instalați și activați pluginul W3 Total Cache.

2. O nouă opțiune de Performanță va fi adăugată în meniul tabloului de bord WordPress. Selectați Performanță > Setări generale.

3. În secțiunea Minimizare , bifați caseta de lângă Minimizare , apoi setați modul Minimizare la Manual .

4. Faceți clic pe Salvare toate setările în partea de jos a secțiunii Minimizare .

5. În meniul tabloului de bord, selectați Performanță > Minimizare .

6. În secțiunea JS de lângă setările de minimizare JS , asigurați-vă că caseta Activare este bifată. Apoi, sub Operațiuni în zone , deschideți primul meniu drop-down Tip de încorporare și alegeți Neblocare folosind „amânare” .

7. Sub Gestionarea fișierelor JS , alegeți tema activă din meniul derulant Temă .

8. Consultați din nou rezultatele PageSpeed ​​Insights din scanarea anterioară. Pentru fiecare element din Eliminarea resurselor care blochează randarea care se termină în .js, faceți clic pe Adăugați un script . Apoi, copiați adresa URL completă a resursei JavaScript din PageSpeed ​​Insights și inserați-o în câmpul URI fișier .

9. După ce ați inserat toate resursele JavaScript care blochează randarea raportate de PageSpeed ​​Insights, faceți clic pe Salvare setări și ștergere cache în partea de jos a secțiunii JS .

10. În secțiunea CSS de lângă Setări de minimizare CSS , bifați caseta de lângă Setări de minimizare CSS și asigurați-vă că metoda Minimizare este setată la Combină și Minimizare .

11. În gestionarea fișierelor CSS , alegeți tema activă din meniul drop-down Temă .

12. Pentru fiecare articol din Eliminarea resurselor care blochează randarea care se termină în .css din rezultatele scanării PageSpeed ​​Insights, faceți clic pe Adăugați o foaie de stil . Apoi, copiați adresa URL completă a resursei CSS din PageSpeed ​​Insights și inserați-o în câmpul URI fișier .

13. După ce ați inserat toate resursele CSS care blochează randarea raportate de PageSpeed ​​Insights, faceți clic pe Salvare setări și curățare cache în partea de jos a secțiunii CSS .

14. Scanați-vă site-ul web cu PageSpeed ​​Insights și verificați dacă există o îmbunătățire.

Cum să eliminați manual JavaScript care blochează randarea

Pluginurile se pot ocupa de munca de backend pentru tine. Apoi, din nou, pluginurile în sine sunt doar mai multe fișiere adăugate la serverul dvs. web. Dacă doriți să limitați aceste fișiere suplimentare sau dacă preferați să vă ocupați singur de programare, puteți aborda manual JavaScript care blochează randarea.

Pentru a face acest lucru, localizați etichetele <script> în fișierele site-ului dvs. pentru resursele identificate în scanarea PageSpeed ​​Insights. Vor arăta cam așa:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

Etichetele <script> îi spun browserului să încarce și să execute scriptul identificat de atributul src (sursă). Problema cu acest proces este că această încărcare și execuție întârzie analizarea paginii web de către browser, ceea ce afectează timpul general de încărcare:

Sursa imaginii

Pentru a rezolva acest lucru, puteți adăuga fie atributul asincron (asincron) fie atributul defer la etichetele de script pentru resursele de blocare a randării. async și defer sunt plasate astfel:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Deși au efecte similare asupra timpilor de încărcare, aceste atribute îi spun browserului să facă lucruri diferite.

Atributul async semnalează browserului să încarce resursa JavaScript în timp ce parsează restul paginii și execută acest script imediat după ce a fost încărcat. Executarea scriptului întrerupe analiza HTML:

Sursa imaginii

Scripturile cu atributul defer sunt, de asemenea, încărcate în timp ce pagina este analizată, dar aceste scripturi sunt întârziate de la încărcare până după prima randare sau până după ce s-au încărcat porțiunile mai esențiale:

Sursa imaginii

Atributele defer și async nu ar trebui utilizate împreună pe aceeași resursă, dar una poate fi mai potrivită pentru o anumită resursă decât cealaltă. În general, dacă un script neesențial se bazează pe un script pentru a rula înaintea lui, utilizați defer . Atributul defer asigură că scriptul va rula după scriptul necesar anterior. În caz contrar, utilizați asincron .

3. Reluați o scanare a site-ului.

După ce ați făcut modificările, efectuați o scanare finală a site-ului dvs. prin PageSpeed ​​Insights și vedeți ce impact au avut modificările asupra scorului dvs.

Sperăm că există o îmbunătățire vizibilă, dar nu vă faceți griji dacă nu. Mulți factori pot inhiba performanța paginii și poate fi necesar să mai cercetați pentru a găsi sursa performanței slabe.

4. Verificați site-ul dvs. pentru erori.

Pe lângă o rescanare, verificați paginile pentru a vă asigura că site-ul funcționează. Pagina se încarcă corect? Apar toate elementele? Dacă ceva este stricat sau nu se încarcă corect, anulați modificările și remediați problema.

Dacă ați ajuns într-un punct în care ați încercat în mod repetat diverse măsuri cu câștiguri minime de viteză, ar fi mai bine să luați în considerare alte modalități de a vă accelera paginile, în loc să riscați să vă distrugeți site-ul.

Optimizarea site-ului dvs. WordPress pentru performanță

Mulți factori contribuie la experiența utilizatorilor dvs. pe site-ul dvs. web, dar puțini sunt mai importanți decât timpul de încărcare. Ori de câte ori faceți modificări majore ale conținutului sau aspectului site-ului dvs. WordPress, ar trebui să vă gândiți întotdeauna la modul în care astfel de modificări afectează performanța.

Acum că ați eliminat resursele care blochează randarea, ar trebui să continuați să optimizați viteza site-ului dvs. prin analizarea altor funcții despre care se știe că încetinesc performanța. Încercați să încorporați testarea regulată a vitezei în programul dvs. de întreținere a site-ului dvs. - să rămâneți înaintea oricăror probleme potențiale va fi esențial pentru succesul dvs.