Cum să eliminați resursele care blochează randarea

Resursele de blocare a randării sunt o parte critică a optimizării infrastructurii paginii dvs. web.

Reducerea acestora poate ajuta la încărcarea paginii dvs. mult mai rapidă și la îmbunătățirea semnificativă a elementelor vitale de bază ale paginii.

Aceste resurse care blochează randarea includ lucruri precum fonturi externe care durează prea mult pentru a se încărca (care nu trebuie folosite), fișiere media inutile, codul umflat care pur și simplu nu va dispărea și pluginuri suplimentare care nu sunt necesar.

Există o multitudine de aceste tipuri de resurse pe care le puteți comprima și combina pentru a crea fișiere individuale care se descarcă mai repede pe dispozitivele dvs., creând o viteză mult mai mare a paginii.

Prin optimizarea structurii paginii în această chestiune, puteți reduce cantitatea de muncă pe care Google trebuie să o facă pentru a vă accesa cu crawlere site-ul și, ca urmare, vă puteți îmbunătăți experiența utilizatorului.

De fapt, beneficiile complete ale efectuării acestui proces includ:

• Viteză mai mare a paginii.
• Mai puține resurse necesare de către Google pentru a vă încărca pagina.
• Reducerea problemelor cauzate de balonarea codului.
• Dimensiunea generală mai mică a fișierului DOM (model de obiect document).
• Mai puține fișiere JavaScript și CSS de descărcat.
• Implementare mai bună și mai rapidă pe o gamă largă de platforme și dispozitive.
• Interacțiunea utilizatorului îmbunătățită pe mobil.
• Performanță îmbunătățită în general.

În mod clar, există beneficii extraordinare în efectuarea acestui tip de proces de optimizare pe site-ul dvs.

De ce ar trebui să identificați resursele care blochează randarea?

Identificarea și reducerea resurselor responsabile pentru blocarea redării paginii dvs. web este un punct critic de optimizare care poate face sau reduce viteza paginii dvs.

Poate fi atât de esențial încât poate aduce dividende valorii experienței paginii site-ului dvs. (și satisfacției utilizatorului dvs.) ca rezultat.

În 2021, timpul mediu necesar pentru redarea completă a unei pagini web mobilă a fost de 22 de secunde. În 2018, au fost 15 secunde.

În mod clar, acesta este un număr substanțial mai mare decât timpul recomandat de Google de două până la trei secunde. De asemenea, este substanțial mai mare decât era înainte.

Ce ar putea cauza aceste probleme cu resursele de blocare a redării?

Ce determină această creștere a vitezei generale de redare a paginii?

O tendință interesantă de remarcat este că a existat o dependență din ce în ce mai mare de fonturile terțe în comparație cu fonturile de sistem. Utilizarea fonturilor de la terți ca resursă tinde să interfereze cu procesarea și redarea unei pagini.

Cu fonturile de sistem, browserul nu trebuie să încarce nimic suplimentar, așa că nu are ca rezultat acel pas suplimentar de procesare.

Captură de ecran din Web Almanac, noiembrie 2022

Este posibil ca această dependență între industrii să aibă un impact asupra acestui timp de redare. Desigur, aceasta nu este singura cauză a acestei probleme cu resursele de blocare a randării.

În plus, serviciile proprii ale Google tind să aibă un impact semnificativ asupra timpului de redare, cum ar fi Google Analytics sau utilizarea unui pixel Facebook terță parte în scopuri de urmărire.

Dorința de a se baza pe astfel de tehnologii nu este neapărat teribilă din perspectiva marketingului.

Dar din perspectiva resurselor care blochează randarea, poate provoca creșteri semnificative ale timpului de încărcare a paginii și ale modului în care Google (și utilizatorii) vă percep pagina.

Soluția ideală este să vă asigurați că pagina dvs. se încarcă pentru interacțiunea utilizatorului cât mai repede posibil.

Este, de asemenea, o posibilitate ca practicile slabe de dezvoltare web utilizate de dezvoltatorii web astăzi să fie de vină.

Oricum, acesta este ceva din fiecare proiect de site web care ar trebui abordat ca parte a auditurilor tale Core Web Vitals.

Cu toate acestea, experiența paginii nu se referă doar la cât de repede se încarcă întreaga pagină.

În schimb, este mai mult despre experiența generală a paginii, măsurată de cadrul Google privind experiența paginii sau Core Web Vitals.

Acesta este motivul pentru care doriți să lucrați la îmbunătățirea și optimizarea vitezei paginii pentru calea critică de randare în întregul DOM sau modelul obiectului documentului.

Care este calea critică de redare?

Calea critică de randare se referă la toți pașii necesari pentru redarea întregii pagini, de la momentul în care browserul începe să primească date până la compilarea paginii la randarea finală.

Acesta este un proces care poate dura doar câteva milisecunde dacă îl optimizați corect.

Optimizarea pentru calea critică de randare înseamnă să vă asigurați că vă optimizați pentru performanța redării pe multe dispozitive diferite.

Acest lucru se realizează prin optimizarea căii critice de randare pentru a ajunge la prima vopsea cât mai repede posibil.

Practic, reduceți timpul petrecut de utilizatori privind un ecran alb gol pentru a afișa conținut vizual cât mai curând posibil (vezi 0,0s mai jos).

Captură de ecran de pe web.dev, noiembrie 2022

Există un întreg proces despre cum să faceți acest lucru, subliniat în documentația ghidului pentru dezvoltatori Google, dar mă voi concentra în special asupra unui lucru greu: reducerea resurselor de blocare a redării.

Cum funcționează calea critică de redare?

Calea critică de randare se referă la seria de pași pe care îi parcurge un browser în călătoria sa pentru a reda o pagină prin conversia HTML, CSS și JavaScript în pixeli reali de pe ecran.

Captură de ecran de la Medium, noiembrie 2022

În esență, browserul trebuie să solicite, să primească și să analizeze toate fișierele HTML și CSS (plus unele lucrări suplimentare) înainte de a începe să redea orice conținut vizual.

Acest proces are loc într-o fracțiune de secundă (în majoritatea cazurilor). Utilizatorii vor vedea o pagină albă goală până când browserul finalizează acești pași.

Următorul este un exemplu despre modul în care utilizatorii pot experimenta modul în care o pagină se încarcă în funcție de diferitele etape ale procesului de încărcare a paginii:

Captură de ecran de pe web.dev, noiembrie 2022

Îmbunătățirea căii critice de randare poate îmbunătăți astfel experiența generală a paginii, ceea ce poate ajuta la îmbunătățirea performanței în valorile Core Web Vitals.

Cum optimizez calea critică de redare?

Pentru a îmbunătăți calea critică de redare, trebuie să analizați resursele de blocare a redării.

Orice resurse care blochează redarea pot ajunge să blocheze redarea inițială a paginii și să afecteze negativ scorurile Core Web Vitals ca rezultat.

Aceasta presupune un proces de optimizare a:

• Reducerea numărului de resurse care sunt critice pentru calea de randare. Acest lucru se poate face prin utilizarea unei metode de amânare pentru orice posibilă resurse de blocare a randării.
• Prioritizarea conținutului care se află deasupra paginii și descărcarea materialelor media importante cât mai curând posibil.
• Comprimați dimensiunea fișierului oricăror resurse critice rămase.

Făcând acest lucru, este posibil să îmbunătățiți atât Core Web Vitals, cât și modul în care pagina dvs. se redă fizic utilizatorului.

Înainte de a discuta despre tehnicile de optimizare pe care le puteți utiliza pentru a optimiza calea critică de randare, este important să discutați despre procesul inițial de încărcare a browserului și de ce calea critică de randare este atât de importantă.

Iar acest proces presupune:

• Preîncărcarea elementelor paginii.
• Alinierea stilurilor critice.
• Amânarea încărcării fișierelor JavaScript.
• Sfaturi timpurii.

Preîncărcarea elementelor paginii

În primul rând, când pagina este preluată de browser de pe server, browserul va scana inițial și va găsi toate elementele paginii care urmează să fie descărcate. În mod implicit, acest lucru se întâmplă într-un proces în care browserul descarcă toate elementele simultan.

Dar ce se întâmplă atunci când aveți multe elemente de pagină de descărcat (cum ar fi ceea ce se întâmplă frecvent cu un site web WordPress?) Ei bine, acest lucru poate bloca resursele serverului, ceea ce crește și mai mult timpul de încărcare a paginii.

Cum ocoliți asta? Folosind linkul de preîncărcare pentru a descărca în mod asincron fișiere critice care blochează redarea paginii (discutat mai târziu în acest articol).

Preîncărcarea elementelor este o tehnică care ajută la eliminarea foilor de stil care blochează randarea, deoarece încarcă fișierele critice necesare pentru prima etapă de vopsire a procesului înainte de a încărca toate celelalte fișiere.

Puteți preîncărca CSS, JS, Fonturi sau Imagini. Iată exemple despre cum să le preîncărcați:

Preîncărcare JavaScript

 <link rel="preload" as="script" href="critical.js">

Preîncărcare CSS

 <link rel="preload" href="style.css" as="style" />

Preîncărcarea fonturilor

 <link rel="preload" href="fonts/webfont.woff2" as="font" type="font/woff2" crossorigin />

Preîncărcare imagini

 <link rel=preload href="cat.png" as=image imagine>

Acest lucru ajută la accelerarea procesului paginii. Cu toate acestea, aceasta nu este o metodă ideală.

Metoda ideală este să optimizați site-ul pentru a utiliza doar două până la trei plugin-uri, poate două până la alte fișiere și să păstrați lucrurile la minimum pentru redarea întregii pagini.

Din păcate, acesta nu este un efort realist de urmat.

Deoarece site-urile WordPress tind să aibă multe plugin-uri și resurse cu care dezvoltatorii pur și simplu nu sunt dispuși (sau doresc) să se ocupe, cea mai ușoară cale către succes este să te asiguri că aceste resurse sunt optimizate corespunzător prin utilizarea anumitor plugin-uri.

Alinierea stilurilor critice

CSS critic este o tehnică care extrage CSS-ul pentru conținutul de deasupra paginii pentru a reda conținutul utilizatorului cât mai repede posibil.

Cel puțin, acest lucru necesită de obicei:

• Orice declarație de font.
• Orice CSS specific aspectului.
• Toate regulile de stil CSS pentru elementele DOM (model de obiect document) de deasupra paginii.

Folosind exemplul nostru anterior al paginii care încarcă toate resursele simultan, inserarea stilurilor critice implică utilizarea codului în eticheta HTML <head> în sine.

Dacă verificați, de exemplu, codul sursă google.com, îl veți vedea încorporat în CSS critic în secțiunea <head> a HTML-ului.

Captură de ecran din codul sursă Google.com, noiembrie 2022

Există mai multe instrumente care pot ajuta la extragerea CSS critice.

• Criticalcss.com.
• Critic.
• Plugin HTML Critical Webpack.

Amânarea încărcării fișierelor JavaScript

Prin utilizarea acestei metode, este posibil să amânați încărcarea fișierelor JavaScript până după ce sunt încărcate alte elemente critice ale arborelui DOM. Cu toate acestea, acest lucru vine cu câteva avertismente.

Exemplu de amânare a fișierului JavaScript:

 <script defer src="script.js"></script>

În primul rând, puteți avea un impact negativ asupra aspectului site-ului atunci când amânați încărcarea fișierelor JavaScript, deoarece unele dintre acestea ar putea fi elemente necesare pentru ca pagina să se încarce complet.

Numărul doi este, dacă nu ești atent, amânând încărcarea fișierelor JavaScript, ai putea introduce probleme cu interactivitatea paginii (interacțiune cu următoarea metrică Core Web Vitals).

Numărul trei este că puteți introduce și probleme cu modul în care funcționează site-ul în general.

Ideea este că trebuie să fii atent când lucrezi la aceste tipuri de optimizări, astfel încât să nu provoci din greșeală probleme în altă parte a procesului.

Procedând astfel, puteți avea un impact semnificativ asupra vitezei paginii dvs. și asupra modului în care Google vă vede site-ul.

Cealaltă îngrijorare, totuși, este atunci când utilizați pluginuri precum Nitro pentru a amâna fișiere critice precum CSS și JavaScript.

Deși acest lucru poate avea un impact pozitiv asupra vitezei paginii, problema majoră cu aceasta este că pluginul amână toate fișierele CRITICE până după ce pagina a încărcat porțiunea HTML a documentului.

Ce inseamna asta? Aceasta înseamnă că Google nu poate vedea întregul document așa cum este destinat să fie afișat. Acest lucru este similar cu blocarea fișierelor dvs. CSS și a fișierelor JavaScript folosind robots.txt, de care Google are nevoie pentru a determina dacă site-ul dvs. este adaptat pentru dispozitive mobile.

Pagina oficială pentru dezvoltatori Google spune acest lucru, așa cum s-a menționat în altă parte:

„Pentru randarea și indexarea optime, permiteți întotdeauna accesul Googlebot la fișierele JavaScript, CSS și imagine utilizate de site-ul dvs., astfel încât Googlebot să vă poată vedea site-ul ca un utilizator obișnuit.

Dacă fișierul robots.txt al site-ului dvs. nu permite accesarea cu crawlere a acestor materiale, dăunează direct cât de bine redă și indexează conținutul dvs. de algoritmii noștri. Acest lucru poate duce la clasamente suboptime.”

Dacă amânați fișiere CSS și JavaScript esențiale din motive SEO, atâta timp cât vă asigurați că Google poate vedea aceste fișiere la încărcarea paginii, nu ar trebui să întâmpinați probleme majore cu privire la modul în care Google vă poate vedea site-ul.

Utilizarea sugestiilor timpurii pentru o mai bună optimizare a serverului

Înainte de a putea vorbi despre indicii timpurii, trebuie să discutăm despre modul în care serverul încarcă o pagină web. Site-urile au devenit într-adevăr mai sofisticate în ultimii ani.

Și astfel, la fel și serverele. Dar, există limitări. Chiar dacă serverele pot și îndeplinesc sarcini banale pe tot parcursul zilei, este totuși posibil ca un server să devină blocat lucrând pentru a se gândi prea mult la modul în care gestionează resursele unui site.

Deci, atunci când se întâmplă acest lucru, apare o latență suplimentară decât ar fi experimentată altfel - și acest lucru se întâmplă înainte ca browserul să poată începe să redeze pagina.

Când apare această latență, puteți întâlni situații în care un site ar putea dura câteva secunde înainte de a apărea în fereastra browserului.

Și să vă asigurați că serverul dvs. redă corect fișierele este un prim pas excelent spre creșterea vitezei paginii.

Iată un exemplu de ceea ce se întâmplă atunci când serverul dvs. nu răspunde corect și durează prea mult pentru a procesa anumite resurse:

Captură de ecran de pe developer.chrome.com, noiembrie 2022

Deci, cum funcționează sugestiile timpurii?

Potrivit ghidului pentru dezvoltatori Google Chrome, „sugestiile timpurii sunt un cod de stare HTTP (103 sugestii timpurii) care este folosit pentru a trimite un răspuns HTTP preliminar precis înainte de un răspuns final”.

Ce realizează asta?

Acest lucru permite unui server să furnizeze anumite tipuri de indicii unui browser pentru anumite resurse critice (fișiere JavaScript, foi de stil CSS și multe altele) care probabil vor fi încărcate și utilizate de pagina web însăși.

Acest proces are loc într-un interval de câteva milisecunde sau mai puțin, în timp ce serverul lucrează la redarea resurselor paginii principale.

Sfaturile timpurii sunt ceva care „ajută un browser” și accelerează timpul de gândire a serverului lucrând la această încărcare în avans.

Din acest motiv, acest proces ajută la accelerarea timpului de încărcare a paginii.

Instrumente care vă ajută să vă optimizați calea critică de redare

Nu sunteți un maestru extraordinar de cod și nu puteți lucra cu și optimiza codul, pluginurile și lucrurile de sub capota site-ului dvs.?

Ei bine, nu vă temeți (prea mult!). Există pluginuri WordPress disponibile care vă pot ajuta să faceți exact asta.

Următoarele include o listă de instrumente pe care le puteți folosi pentru a vă optimiza propria cale critică de randare pentru succes:

• Plugin CSS critic : Acest instrument la îndemână vă permite să generați CSS critic de care are nevoie site-ul dvs. Doar adăugați adresa URL, faceți clic pe generare și plecați.
• Pluginul Autoptimize Page Speed: Acest plugin special este un alt plugin pentru viteza paginii care vă permite, de asemenea, să amânați fișierele critice. În plus, ajută la injectarea CSS inline în capul paginii, amână scripturile la subsol și reduce fișierele HTML.
• WP Rocket Page Speed ​​Plugin: Acest plugin pentru viteza paginii este unul dintre cele mai puternice pluginuri de cache. După instalare, acest plugin special vă permite să profitați de stocarea în cache a paginii, compresia GZIP, preîncărcarea cache-ului și memorarea în cache a browserului.
• WP-Optimize: Acesta este un plugin WordPress care vă permite să faceți mai multe lucruri pentru a vă ajuta să optimizați mai bine site-ul pentru timpi de încărcare rapid. Acestea includ optimizarea bazei de date, comprimarea imaginilor și stocarea în cache a paginilor, împreună cu minimizarea și asincronizarea fișierelor CSS și JavaScript.

Vă rugăm să rețineți: acest autor nu are nicio părtinire financiară cu niciunul dintre aceste instrumente.

De ce mi-ar păsa?

Datele Google despre comportamentul utilizatorilor raportează că majoritatea utilizatorilor abandonează un site lent după aproximativ trei secunde.

Pe lângă studiile care arată că reducerea timpului de încărcare a paginii și îmbunătățirea experienței paginii duce la o mai mare satisfacție a utilizatorilor, există și câteva actualizări majore Google la orizont pentru care veți dori să vă pregătiți.

Identificarea și optimizarea resurselor de blocare a redării va fi esențială pentru a rămâne la curent cu jocul atunci când apar aceste actualizări.

Google va implementa experiența de pagină pe desktop în 2022, începând cu lansarea experienței de pagină de desktop în februarie și terminându-se în martie.

Potrivit Google, aceleași trei valori Core Web Vitals (LCP, FID și CLS), împreună cu pragurile asociate, vor fi acum legate de clasarea desktopului.

De asemenea, Google lucrează la o valoare nou-nouță, posibil experimentală Core Web Vitals, ținând cont de durata maximă a evenimentului și durata totală a evenimentului.

Explicația lor cu privire la acești factori pe care îi iau în considerare sunt:

Durata maximă a evenimentului: latența interacțiunii este egală cu cea mai mare durată a evenimentului din orice eveniment din grupul de interacțiune.
Durata totală a evenimentului: latența interacțiunii este suma tuturor duratelor evenimentului, ignorând orice suprapunere.

Cu multe studii care leagă reducerea timpilor de încărcare a paginii cu îmbunătățirea KPI-urilor valoroase (conversii, rata de respingere, timpul petrecut pe site), îmbunătățirea latenței site-ului a devenit un obiectiv de afaceri de top pentru multe organizații.

Profesioniștii SEO sunt poziționați în mod unic pentru a ghida acest efort, deoarece rolul nostru este adesea acela de a reduce decalajul dintre obiectivele de afaceri și prioritățile dezvoltatorilor web.

Având capacitatea de a audita un site, de a analiza rezultatele și de a identifica zonele de îmbunătățire, ne ajută să lucrăm cu dezvoltatorii pentru a îmbunătăți performanța și a traduce rezultatele către părțile interesate cheie.

Obiectivele optimizării resurselor care blochează randarea

Unul dintre obiectivele principale ale optimizării căii critice de randare este să vă asigurați că resursele necesare pentru a reda acel conținut important, deasupra paginii, sunt încărcate cât de repede este posibil uman.

Orice resurse care blochează redarea trebuie să fie deprioritate și orice resurse care împiedică redarea rapidă a paginii.

Fiecare punct de optimizare va contribui la îmbunătățirea generală a vitezei paginii, a experienței paginii și a scorurilor Core Web Vitals.

De ce să îmbunătățim CSS care blochează randarea?

Google a spus de multe ori că codificarea nu este neapărat importantă pentru clasare.

Dar, în același mod, obținerea unui beneficiu de clasare din îmbunătățirile optimizării vitezei paginii poate ajuta, în funcție de interogare.

Când vine vorba de fișiere CSS, acestea sunt considerate resurse care blochează randarea.

De ce asta?

Chiar dacă se întâmplă într-o milisecundă sau mai puțin (în cele mai multe cazuri), browserul nu va începe să redea conținutul paginii până când nu poate solicita, primi și gestiona toate stilurile CSS.

Dacă un browser redă conținut care nu este stilat corect, tot ce ați obține este o grămadă de text obișnuit și link-uri care nici măcar nu sunt stilate.

Acest lucru înseamnă că pagina ta va fi practic „gold”, în lipsa unui termen mai bun.

Eliminarea stilurilor CSS va avea ca rezultat o pagină care este literalmente inutilizabilă.

Majoritatea conținutului va avea nevoie de revopsire pentru a arăta cel mai puțin acceptabil pentru un utilizator.

Dacă examinăm procesul de randare a paginii, caseta gri de mai jos reprezintă timpul necesar browserului pentru a obține toate resursele CSS. În acest fel, poate începe să construiască DOM-ul CSS (sau arborele CCSOM).

Acest lucru poate dura de la o milisecundă la câteva secunde, în funcție de ceea ce trebuie să facă serverul pentru a încărca aceste resurse.

De asemenea, poate varia, ceea ce poate depinde de dimensiunea, împreună cu cantitatea, a acestor fișiere CSS.

Următorul arbore de randare arată un exemplu de browser care redă toate fișierele împreună cu CSS din DOM:

Captură de ecran de la Medium, noiembrie 2022

În plus, în cele ce urmează se prezintă un exemplu de secvență de randare a unei pagini, în care toate fișierele se încarcă într-un proces, de la construcția DOM-ului până la pictura finală și compunerea paginii, care este cunoscută ca calea critică de randare. .

Deoarece CSS este o resursă care blochează redarea în mod implicit, este logic să îmbunătățim CSS până la punctul în care să nu afecteze negativ procesul de redare a paginii.

Recomandarea oficială Google prevede următoarele:

„CSS este o resursă care blochează redarea. Aduceți-l clientului cât mai curând și cât mai repede posibil pentru a optimiza timpul pentru prima redare.”

HTML-ul trebuie convertit în ceva cu care browserul poate funcționa: DOM. Fișierele CSS sunt în același mod. Acesta trebuie convertit în CSSOM.

Prin optimizarea fișierelor CSS din DOM și CSSOM, puteți contribui la reducerea timpului necesar unui browser pentru a reda totul, ceea ce contribuie în mare măsură la o experiență îmbunătățită a paginii.

De ce să îmbunătățim JavaScript de blocare a randării?

Știați că încărcarea JavaScript nu este întotdeauna necesară?

Cu JavaScript, descărcarea și analizarea tuturor resurselor JavaScript nu este un pas necesar pentru redarea completă a unei pagini.

Deci, aceasta nu este cu adevărat o parte necesară din punct de vedere tehnic a randării paginii.

Dar avertismentul la acest lucru este: majoritatea site-urilor moderne sunt codificate în așa fel încât JavaScript (de exemplu, cadrul Bootstrap JS) este necesar pentru a reda experiența de mai sus.

Dar dacă un browser găsește fișiere JavaScript înainte de prima randare a unei pagini, procesul de randare poate fi oprit până mai târziu și după ce fișierele JavaScript sunt executate complet.

Acest lucru poate fi specificat altfel prin amânarea fișierelor JavaScript pentru utilizare ulterioară.

Un exemplu în acest sens este dacă există funcții JS, cum ar fi o alertă, care este încorporată în HTML. Acest lucru ar putea opri redarea paginii până după executarea acestui cod JavaScript.

JavaScript are singura putere de a modifica atât stilurile HTML, cât și CSS, așa că acest lucru are sens.

Analiza și execuția JavaScript ar putea fi întârziate din cauza faptului că JavaScript poate modifica întregul conținut al paginii. Această întârziere este încorporată în browser în mod implicit – doar pentru un astfel de scenariu „pentru orice eventualitate”.

Recomandare oficială Google:

„JavaScript poate bloca, de asemenea, construcția DOM și întârzie când pagina este redată. Pentru a oferi performanțe optime... eliminați orice JavaScript inutil din calea critică de redare.”

Cum să identifici resursele care blochează randarea

Pentru a identifica calea critică de redare și a analiza resursele critice:

• Rulați un test folosind webpagetest.org și faceți clic pe imaginea „cascada”.
• Concentrați-vă pe toate resursele solicitate și descărcate înainte de linia verde „Start Render”.

Analizați-vă vederea cascadei; căutați fișiere CSS sau JavaScript care sunt solicitate înainte de linia verde de „pornire a randării”, dar care nu sunt esențiale pentru încărcarea conținutului de deasupra paginii.

Captură de ecran de pe WebPageTest, noiembrie 2022

După identificarea unei (potențial) resursă care blochează redarea, testați eliminarea acesteia pentru a vedea dacă este afectat conținutul de deasupra paginii.

În exemplul meu, am observat câteva solicitări JavaScript care pot fi critice.

Chiar dacă sunt esențiale, uneori este o idee bună să testați eliminarea acestor scripturi pentru a testa modul în care elementele de schimbare de pe site afectează experiența.

Captură de ecran de pe WebPageTest, noiembrie 2022

Există și alte modalități de a îmbunătăți astfel de resurse.

Pentru fișierele JavaScript necritice, vă recomandăm să analizați combinarea fișierelor și amânarea acestora, incluzând aceste fișiere în partea de jos a paginii dvs.

Pentru fișierele CSS necritice, puteți reduce, de asemenea, numărul de fișiere CSS pe care le aveți, combinându-le într-un singur fișier și comprimându-le.

Îmbunătățirea tehnicilor de codare poate duce, de asemenea, la un fișier care este mai rapid de descărcat și are un impact mai mic asupra vitezei de redare a paginii dvs.

Cum să reduceți elementele care blochează randarea de pe pagină

Odată ce ați stabilit că o resursă de blocare a redării nu este critică pentru redarea conținutului deasupra pliului, veți dori să explorați o multitudine de metode disponibile pentru a îmbunătăți redarea paginii dvs. și pentru a amâna resursele necritice.

Există multe soluții la această problemă, de la amânarea fișierelor JavaScript și CSS până la reducerea impactului pe care îl poate avea CSS.

O soluție posibilă este să nu adăugați CSS folosind regula @import.

Asigurați-vă că nu adăugați CSS utilizând regula @Import

Din punct de vedere al performanței, chiar dacă @import pare să mențină fișierul HTML mai curat, poate crea probleme de performanță.

Declarația @import va determina de fapt browserul să proceseze un fișier CSS mai lent. De ce? Pentru că descarcă și toate fișierele importate.

Redarea va fi complet blocată până la finalizarea procesului.

Într-adevăr, cea mai bună soluție este să folosiți metoda standard de includere a unei foi de stil CSS folosind declarația <link rel="stylesheet"> în HTML.

Reduceți fișierele CSS și JavaScript

Dacă sunteți pe WordPress, utilizarea unui plugin pentru a reduce fișierele CSS și JavaScript poate avea un impact extraordinar.

Procesul de minificare ia toate spațiile inutile dintr-un fișier și îl comprimă și mai mult, astfel încât să puteți obține o creștere bună a performanței.

De asemenea, chiar dacă nu sunteți pe WordPress, puteți utiliza serviciile unui dezvoltator bine calificat pentru a finaliza procesul manual.

Acest lucru va dura mai mult timp, dar poate merita.

Fișierele reduse sunt de obicei mult mai ușoare decât fostele lor omologii, ceea ce înseamnă că randarea inițială se va finaliza mult mai rapid.

În plus, după procesul de minificare, vă puteți aștepta, de asemenea, ca procesul de descărcare să fie mai rapid, deoarece este nevoie de mai puțin timp pentru a descărca resursele care nu blochează randarea.

Utilizați fonturi de sistem în loc de fonturi de la terți

În timp ce fonturile terță parte pot părea să facă un site „mai frumos”, acesta nu este exact cazul.

Deși poate arăta uimitor la suprafață, aceste fișiere cu fonturi terță parte durează adesea mai mult timp pentru a se încărca și pot contribui la problema ta de blocare a resurselor de redare.

Din cauza fișierelor externe, browserul trebuie să facă solicitări externe pentru a descărca aceste fișiere pentru a vă afișa pagina, ceea ce poate duce la timpi de descărcare semnificativ mai mari.

Dacă faceți parte dintr-o echipă care are cele mai bune practici de dezvoltare mai puțin decât ideale, atunci ar putea fi rezonabil că aveți multe fișiere cu fonturi terțe care nu sunt necesare pentru redarea site-ului dvs.

În acest caz, eliminarea tuturor acestor fișiere inutile vă poate îmbunătăți semnificativ resursele de blocare a redării și poate contribui la îmbunătățirea generală a Core Web Vitals.

Utilizarea fonturilor de sistem, pe de altă parte, păstrează doar procesarea în browser fără solicitări externe.

De asemenea, există probabil fonturi de sistem care pot fi foarte asemănătoare cu fonturile terțe pe care le utilizați.

Cu toate acestea, dacă trebuie neapărat să utilizați fonturi terțe, există două lucruri pe care doriți să le faceți pentru a ajuta la atenuarea problemelor cu anumite aspecte ale fonturilor terțe.

În primul rând, dacă sunt utilizate împreună cu preîncărcarea și schimbarea fonturilor, problemele cu fonturile terță parte devin o non-problemă.

Cealaltă problemă atunci când utilizați fonturi terțe este că fonturile sunt invizibile până când fontul în sine se încarcă, ceea ce are un impact negativ asupra Core Web Vitals și experiența utilizatorului. Pentru a evita acest lucru, puteți utiliza CSS pentru schimbarea fonturilor.

Iată cum funcționează: CSS-ul de schimb de fonturi explică browserului că textul care utilizează un anumit font trebuie să fie afișat imediat folosind un font de sistem. Odată ce fontul personalizat este gata, acest font personalizat va înlocui fontul de sistem. Aceasta este cea mai eficientă metodă pe care o puteți folosi pentru a evita fonturile invizibile în timpul încărcării paginii.

The New Kid On The Block: Fonturi variabile

Începând cu 2020, fonturile variabile au devenit acceptate pe scară largă în majoritatea browserelor. Ce sunt exact fonturile variabile?

Cu fonturi variabile, toate stilurile dvs. de font sunt conținute într-un singur fișier. Dar înainte ca fonturile variabile să devină obișnuite, ai avea nevoie de mai multe fișiere de fonturi separate pentru fonturi.

Există, de asemenea, câteva avantaje ale utilizării fonturilor variabile, care includ:

• Dimensiune mai mică a fișierului: fonturile variabile au o dimensiune mai mică a fișierului, deoarece sunt un fișier cu un singur font care conține toate variațiile de lățime, greutate și alte atribute.
• O gamă mai flexibilă de design: cu alte tipuri de fonturi, sunt necesare trei până la cinci fișiere de fonturi diferite pentru a oferi fiecare reprezentare unică a limbajului/vocii de design a unui site. Și aceasta include fiecare permutare a titlurilor, copie a corpului etc. Dar, cu fonturi variabile, utilizarea unui singur fișier de font vă permite să utilizați toate variațiile posibile care ar putea fi asociate cu designul unui font.
• Mai puține și un singur fișier: din cauza economiilor de dimensiune a fișierului, acest lucru vă ajută să vă comprimați și mai mult dimensiunea paginii și vă scade viteza paginii. Iar avantajul unui singur fișier în sine permite webmasterului să-și comprime cu adevărat viteza paginii și mai mult.

Următoarea documentație vorbește despre fonturile variabile și despre cum să le implementați. Datorită beneficiilor lor, utilizarea fonturilor variabile este o alternativă acceptabilă dacă trebuie neapărat să implementați fonturi terțe.

Îmbunătățiți-vă tehnicile de codare și combinarea fișierelor

Dacă lucrați singur cu cod, este posibil (sau nu... nimeni nu judecă aici) să descoperiți că tehnicile sunt mai puțin decât optime.

Un exemplu: utilizați CSS inline peste tot și acest lucru cauzează erori de procesare și redare în browser.

Soluția ușoară este să vă asigurați că luați toate CSS-urile inline și le codificați corect în fișierul foaia de stil CSS.

Dacă codul altui dezvoltator nu este la egalitate, acest lucru poate crea probleme majore cu redarea paginii.

De exemplu: spuneți că aveți o pagină care este codificată folosind tehnici mai vechi, mai degrabă decât cele moderne și mai slabe.

Tehnicile mai vechi ar putea include o umflare semnificativă a codului și, ca urmare, ar putea duce la randarea mai lentă a paginii.

Pentru a elimina acest lucru, vă puteți îmbunătăți tehnicile de codare prin crearea unui cod mai slab și mai puțin umflat, rezultând o experiență de redare a paginii mult mai bună.

Combinarea fișierelor poate îmbunătăți, de asemenea, situația

De exemplu: dacă aveți opt sau 10 fișiere JavaScript care contribuie toate la aceeași sarcină, puteți angaja un dezvoltator care poate combina toate aceste fișiere pentru dvs.

Și dacă sunt fișiere JavaScript mai puțin critice, atunci pentru a reduce și mai mult problemele de redare a paginii, aceste fișiere pot fi, de asemenea, amânate prin adăugarea lor la sfârșitul codului HTML de pe pagină.

Prin combinarea fișierelor și îmbunătățirea tehnicilor de codare, puteți contribui semnificativ la o experiență mai bună de redare a paginilor.

Recomandări cheie

Dacă doriți să vă creați propriul proces pentru a găsi și a reduce resursele care blochează randarea, acum aveți instrumentele necesare pentru a face acest lucru. Procesul este subliniat după cum urmează:

• Pasul 1: accesați cu crawlere site-ul dvs. folosind Screaming Frog sau alte instrumente de accesare cu crawlere.
• Pasul 2: identificați paginile cu viteză mică a paginii.
• Pasul 2a: De asemenea, puteți utiliza Google Search Console sau Google Analytics în acest scop.
• Pasul 3: Aranjați paginile cu cea mai scăzută performanță pe care le găsiți într-o listă cu priorități.
• Pasul 4: Coborâți elementele listei de verificare de mai sus (puteți crea, de asemenea, o foaie de calcul pentru fiecare articol pe pagină, dacă preferați) și găsiți, reduceți sau reparați aceste resurse de blocare a redării, după cum este necesar.
• Pasul 5: Clătiți și repetați pentru fiecare pagină de pe site-ul dvs.

Ideea este să creați un proces ușor de scalat, ușor de implementat și care vă poate pune pe calea succesului, cu o viteză a paginii mult mai mică, ca rezultat.

Cu acest proces, și dumneavoastră puteți beneficia de avantajul pe care îl veți avea și puteți experimenta și un impuls din Core Web Vitals de la Google.

Identificarea și repararea resurselor de blocare a redării este o parte critică a optimizării vitezei, pe care majoritatea auditurilor includ acest pas. Motivul din spatele acestui lucru este că ajută la crearea celor mai bune timpi posibili de randare pentru paginile dvs. de clasare.

Google lucrează la îmbunătățirea vitezei paginii tot timpul. Dar există un lucru care a fost întotdeauna consecvent: cu cât viteza paginii este mai rapidă, cu atât mai bine.

Prin integrarea unui proces scalabil în care puteți realiza acest lucru rapid, este posibil să abordați chiar și cele mai mari și mai complexe proiecte de optimizare a vitezei paginii relativ ușor.

Și acest lucru se traduce și într-o experiență mai bună pentru utilizator.

Găsind și reparând resurse de blocare a redării, puteți, de asemenea, să îmbunătățiți modul în care utilizatorul dvs. experimentează site-ul dvs. și veți continua să vă bucurați vizitatorii site-ului.

La urma urmei, menținerea site-ului dvs. în formă maximă pentru prime time este ceea ce înseamnă toată această activitate de optimizare!

Mai multe resurse:

• Advanced Core Web Vitals: Un ghid tehnic SEO
• Diferența dintre raportul CWV din Search Console și PageSpeed ​​Insights
• Core Web Vitals: un ghid complet

Imagine prezentată: SuperOhMo/Shutterstock