Cum să eliminați resursele care blochează randarea | Buff-uri WP

Dacă auziți plângeri cu privire la viteza de încărcare a site-ului dvs. web sau doriți să vă încărcați paginile web mai rapid și să vă îmbunătățiți experiența utilizatorului, vă recomandăm să luați în considerare cum să eliminați resursele care blochează redarea.

Indiferent de motiv, cât de repede apare un site web în fața vizitatorului poate afecta experiența utilizatorului și poate face ca afacerea dvs. să piardă conexiunile cu clienții. Experiența utilizatorului pe site depinde în principal de calea critică de redare și de gestionarea scripturilor pe care site-ul dvs. le încarcă în timpul procesului de redare.

Ce este randarea?

Toate site-urile web urmează o cale prin care utilizatorul poate vedea și interacționa cu conținutul său. Calea de încărcare a site-ului web se numește calea critică de redare. Această cale descrie pașii fiecărui site pentru a colecta și a construi date pentru vizitator și browserul acestuia.

Ce fac browserele înainte de randare

Introducerea adresei URL a unui site web declanșează următorul proces:

1. Navigarea este completă atunci când un utilizator solicită o anumită adresă URL.
   1. Are loc o căutare DNS, în care un server oferă o adresă IP
   2. Browserul și serverul site-ului web efectuează o strângere de mână TCP pentru a realiza o conexiune
   3. Solicitările de conexiune sigură primesc o negociere TLS sau un al doilea schimb de strângere de mână
2. Browserul primește un răspuns și primește codul site-ului web
   1. Primul pachet de date este primit într-un TCP Slow Start pentru a regla traficul de rețea
   2. Utilizatorul trimite confirmări (ACK) către server pentru a stabili limitările de conectare și ratele de trimitere.
3. Browserul analizează informațiile și transformă datele într-un CSS Object Model (CSSOM) și Document Object Model (DOM).
   1. Arborele DOM este construit (structura site-ului și a paginii)
   2. Un scaner de preîncărcare adună resurse externe, cum ar fi scripturi și imagini.
   3. CSSOM este construit (arborele de stil)
   4. JavaScript este compilat în timp ce se construiește CSSOM
   5. Modelul de obiecte de accesibilitate (AOM) este construit pentru ca dispozitivele de asistență să interpreteze conținutul.
4. Redarea are loc folosind arborii CSSOM și DOM creați anterior.

Ce se întâmplă când redați o pagină?

Site-urile web sunt redate prin proiectarea codului pentru a finaliza aspectul, stilul, pictura și, uneori, compunerea pe un site web. Modelul obiect CSS (CSSOM) și Modelul obiect document (DOM)

Stil

DOM și CSSOM se combină într-un arbore de randare și începe construcția. Arborele de randare organizează nodurile vizibile, conținutul și stilurile calculate pentru site și fiecare nod unic.

Aspect

Aspectul este pasul în care arhitectura întâlnește construcția și este creată o structură pentru pagină pentru a afișa lățimea, înălțimea și locația tuturor nodurilor din arborele de randare. Fiecare obiect este determinat de dimensiunea și poziția.

Site-urile web sunt amenajate într-o structură cu casete. Aceste casete se pot adapta la un număr nelimitat de dimensiuni diferite de ferestre de vizualizare. Când structura cutiei se modifică pentru dimensionare, aceasta se numește reflow .

Vopsea: First Paint și First Contentful Paint (FCP)

Momentul în care un browser web face orice redare a unei pagini se numește „Prima vopsea”. First Paint poate fi o culoare de fundal solidă numai în funcție de codul paginii.

First Contentful Paint (FCP) se referă la momentul măsurabil în care un vizitator al site-ului web poate vizualiza conținutul paginii tale (text, imagini, videoclipuri etc.). FCP măsoară de la începutul încărcării paginii până la punctul în care orice conținut este redat.

First Paint și FCP nu sunt același lucru cu o pagină de încărcare rapidă sau cu o performanță rapidă, dar experiența utilizatorului devine mult mai pozitivă atunci când vizitatorii site-ului percep o pagină de încărcare rapidă. Reglarea fină a First Paints, a timpului de încărcare și a performanței site-ului îmbunătățește percepția utilizatorului asupra timpului de încărcare.

Compoziție

Paginile web folosesc straturi în care obiectele se suprapun pentru a organiza structura. Compunerea este locul în care pagina calculează ordinea lucrurilor pentru a le reda corect.

Reflow-urile declanșează o re-compoziție, deoarece poziționarea obiectului se schimbă adesea într-o reflow.

Ce sunt resursele care blochează randarea

Scripturile, foile de stil și importurile HTML care încetinesc, întârzie sau blochează browserul să redea conținut pe un site web sunt resurse care blochează randarea. Când oamenii se referă la resurse de blocare a redării, de obicei se referă la:

• CSS
• JavaScript în secțiunea <head>
• Fonturi încărcate de pe un server sau dintr-o rețea de livrare a conținutului
• Importuri HTML (pagini vechi)

Există o mulțime de CSS și JavaScript care nu blochează randarea și este esențial de încărcat aproape de partea de sus. Acordați prioritate foilor de stil pentru a vă asigura că orice vizitator al site-ului vede conținutul dorit în loc de conținut fără stil sau nimic.

Ce este JavaScript și CSS care blochează randarea?

În timpul procesului de randare, browserul dvs. încarcă informațiile site-ului web, parcurgând mai întâi informațiile din <head>, inclusiv fiecare script. Toate scripturile trebuie rulate în ordine și procesate complet înainte ca pagina să fie vizibilă în browser.

Scripturile sunt integrate într-o coadă, astfel încât ordinea scripturilor în <head> este esențială în timpul dezvoltării. În funcție de cod, acesta poate încetini sau împiedica încărcarea completă a site-ului dvs., iar acestea sunt ceea ce numim CSS și JavaScript care blochează redarea.

Scripturile de pe site-ul dvs. WordPress pot proveni din teme, lucrări personalizate sau pluginuri adăugate pentru diferite funcționalități.

Imaginile sunt resurse care blochează randarea?

Dacă vă întrebați dacă imaginile sunt resurse care blochează randarea, nu sunt. Dimensiunea unei imagini poate cauza în continuare probleme de încărcare a paginii dvs., dar nu ar trebui să blocheze randarea.

De ce să eliminați resursele care blochează randarea?

Scripturile de blocare a randării pot încetini timpul de încărcare a paginii și pot ruina o experiență pe site pentru vizitatorii dvs. Percepția unui site lent poate duce la o pierdere de vizitatori dacă experiența pe site-ul dvs. este slabă. Retenția scăzută a vizitatorilor poate afecta rezultatele motorului dvs. de căutare și poate reduce lista de rezultate.

Clasamentul mai scăzut de optimizare pentru motoarele de căutare (SEO) înseamnă o reducere a numărului de vizitatori și pierderea potențialului de afaceri. Pierderea clasamentului reduce numărul de vizitatori, iar un site slab reduce retenția vizitatorilor; resursele care blochează randamentul pot fi o problemă uriașă.

Dacă site-ul dvs. are obiectivul unui scor Google PageSpeed, înțelegerea resurselor dvs. de blocare a redării este cheia pentru atingerea acestui obiectiv.

Cum să eliminați resursele care blochează randarea

A lua în serios clasamentele SEO și experiența utilizatorului site-ului dvs. înseamnă că site-ul dvs. trebuie să aibă resurse de blocare a redării tratate sau eliminate. Dacă nu vă construiți site-ul de la zero, începeți să testați site-ul pentru resurse de blocare a redării.

Odată ce ați identificat acele resurse care blochează randarea, veți alege metoda pentru a rezolva problema și pentru a vă îmbunătăți funcționalitatea site-ului.

Testați dacă site-ul dvs. are resurse care blochează randarea

Nu strică niciodată să rulezi o evaluare pe site-ul tău web pentru a descoperi orice resurse care blochează redarea (încercați Google PageSpeed ​​Insights). Dacă v-ați optimizat cât mai bine, urmați cele mai bune practici și întâmpinați în continuare probleme sau nu știți de unde să începeți, evaluatorii de pagini pot fi ghiduri utile.

Metode pentru a elimina JavaScript și CSS care blochează randarea

WordPress vă permite să gestionați orice resurse care împiedică redarea site-ului dvs. în câteva moduri diferite. WordPress vă va permite să vă organizați scripturile și linkurile de blocare a randării cu cod, etichete, organizare și optimizare a fișierelor și pluginuri.

Dezvoltatorii profesioniști pot crea, de asemenea, pluginuri sau teme personalizate care integrează aceste procese în cod.

Eliminați JavaScript care blochează randarea cu cod

Trei metode de a aborda resursele care blochează randarea prin cod sunt:

1. Mutați etichetele pentru <script> și <link> în partea de jos a codului HTML
2. Adăugați atribute asincrone sau amânate etichetei pentru scripturile necritice.
3. Eliminați codul JavaScript neutilizat.

WordPress încarcă un fișier jQuery Migrate pentru a oferi compatibilitate cu versiunile vechi de jQuery utilizate de pluginuri și teme. Puteți folosi o bucată de cod sau un plugin pentru a opri WordPress să încarce acest fișier jQuery Migrate dacă nimic de pe site-ul dvs. nu are nevoie de el pentru a funcționa.

Eliminați foile de stil care blochează randarea

Natura foilor de stil le face ca acestea să blocheze randarea prin natura lor. Puteți aborda acest lucru pe site-ul dvs. în următoarele moduri:

1. Împărțiți CSS în funcție de tipul media (mobil, tabletă, desktop etc.)
2. Optimizați calea de redare critică
3. Combinați fișierele CSS

Folosind WordPress și un constructor vizual, este posibil să nu controlați modul în care o pagină se construiește direct, dar există modalități de a rezolva orice problemă.

Blocarea randării adreselor folosind un plugin sau o extensie WordPress

Pluginurile și extensiile WordPress sunt folosite în organizarea scripturilor pe o pagină. Pluginurile vor trece prin etichetele <script> și <link> ale paginii dvs. și vor aplica atributele defer sau asincron pe baza unor reguli specifice.

Am trecut prin și testat o gamă de plugin-uri pentru WordPress și continuăm să împărtășim lucruri utile, cum ar fi pluginurile noastre preferate pentru optimizarea vitezei pe blog.

Solicitați unui profesionist WordPress să elimine resursele care blochează randarea pentru dvs

Unele plugin-uri necesită personalizare și, deși par simple, pot ajunge să nu funcționeze dacă sunt configurate incorect. Nu este nicio rușine să ceri ajutor unui profesionist WordPress, iar WP Buffs are câțiva specialiști care îți pot optimiza site-ul.

Cele mai bune practici pentru optimizarea redării

1. Grupați resursele de blocare a redării pentru a reduce impactul acestora asupra încărcării paginii.
2. Reduceți dimensiunea resursei, astfel încât numărul de octeți de încărcat să fie redus.
3. Amânați descărcarea resurselor care nu blochează randarea.
4. Nu adăugați CSS cu regula @import deoarece este o încărcare externă.
5. Utilizați un plugin WordPress conceput pentru a vă păstra scripturile în cache și pentru a vă optimiza JavaScript și CSS.
6. Încărcați fonturi personalizate local.
7. Identificați CSS și JavaScript critic și non-critic.
8. Marcați codul de blocare a redării necritice cu atribute asincrone sau amânate.
9. Codul neutilizat trebuie eliminat.

Eliminați durerea de cap și lăsați un profesionist WordPress să ajute

WP Buffs sunt calificați în optimizarea site-urilor WordPress și îmbunătățirea performanței paginii. Înțelegem de ce performanța contează pentru afacerea dvs. și pe ce domenii să vă concentrați pentru a avea cel mai semnificativ impact.

Îmbunătățirea performanței site-ului dvs. și a experienței vizitatorilor poate fi mai mult decât resurse de blocare a redării. WP Buffs poate arunca o privire pe site-ul și adresa dvs.:

• Dimensiunile imaginii
• Calitatea imaginii și formatul de livrare
• Lungimea paginii și procentul de conținut dinamic
• Teme prost construite
• Scripturi inutile care provoacă întârzieri
• Pluginuri care sunt prost construite
• Scripturi externe neutilizate
• Software învechit
• Plan limitat de găzduire web incapabil să susțină suficient nevoile site-ului

WordPress poate fi o platformă destul de ușoară pe care să construiți un site web, dar maximizarea experienței utilizatorului poate fi nevoie de un profesionist calificat sau adesea un furnizor de servicii excelent.

întrebări frecvente