CSS Critic în WordPress – Ce Este și Cum să Optimizați Livrarea CSS

Notă! Unele linkuri de pe această pagină pot fi linkuri afiliate, ceea ce înseamnă că, dacă alegeți să efectuați o achiziție, pot câștiga un mic comision fără costuri suplimentare pentru dvs. Apreciez foarte mult sprijinul dvs.!

CSS Critic în WordPress

Când efectuați un audit de performanță pe Google PageSpeed Insights, veți descoperi că Google vă recomandă să „eliminați resursele care blochează randarea” aproape de fiecare dată. Înseamnă că ar trebui să încărcați întotdeauna cu prioritate CSS și JavaScript.

Dar cum să decizi care CSS este critic și care nu este? Ce parte a site-ului dvs. ar trebui să „întârziați” pentru a accelera un altul? Totul este despre priorități și găsirea resurselor CSS esențiale și cum să le optimizați livrarea.

Să aprofundăm în detaliu…

Ce Este CSS Critic și De Ce Este Important Pentru Performanță?

CSS critic este o tehnică care extrage CSS-ul deasupra pliului pentru a afișa pagina cât mai repede posibil. Este ca și cum ai folosi CSS minim pentru a afișa conținutul vizualizat de un vizitator.

CSS critic situat deasupra pliului - Imagine Preluată-WP Rocket-800x800px
CSS critic situat deasupra pliului – Imagine Preluată – WP Rocket
Notă:
CSS critic te face să regândești modul în care browserul încarcă CSS: trebuie să prioritizezi CSS-ul pentru conținutul de deasupra paginii.

Cu alte cuvinte, CSS critic este cheia optimizării performanței. Înainte de a randa pagina, browserul dvs. trebuie să descarce și să analizeze fișierele CSS, făcând aceste fișiere o resursă de blocare a randării. Cu cât fișierele dvs. CSS sunt mai mari, cu atât va dura mai mult pentru ca browserul să le proceseze. Toate acele solicitări create de fișiere CSS grele vor crește timpul de încărcare a unei pagini web, supărând vizitatorii și Google.

Viteza paginii poate afecta, de asemenea performanța SEO din cauza noului factor de clasare, inclusiv Core Web Vitals. Sunt un set de factori implementați de Google pentru a măsura experiența utilizatorului, inclusiv cât de rapidă este o pagină. Cu cât experiența este mai bună, cu atât clasamentul tău va fi mai bun.

Sunteți familiarizat cu cele șase valori Lighthouse care măsoară performanța? Două dintre ele – First Contentful Paint (FCP) și First Input Delay (FID) – măsoară viteza percepută a site-ului dvs. web. Dacă aceste valori sunt în stare bună, la fel va fi măsurată experiența dvs. de utilizator de către Google. Cu toate acestea, dacă ambii KPI sunt în roșu, mai bine vă optimizați CSS-ul critic.

CSS Critic Explicat pe Înțelesul Tuturor

În limba română simplă, CSS critic este o sarcină de optimizare. Este ca și cum ai spune browserului tău să încarce numai CSS-ul vizualizat de vizitator. Acest lucru ajută la îmbunătățirea vitezei percepute, adică cât de rapid pare site-ul unui vizitator.

Să facem un exercițiu rapid cu imaginea de mai jos. Imaginați-vă că sunteți un utilizator mobil care accesează un site web.

  • Scenariul 1 – În partea de sus, există o pagină cu CSS care blochează randarea. Veți vedea o pagină goală până când întregul fișier CSS este încărcat.
  • Scenariul 2 – În partea de jos, CSS-ul critic este redat primul. Începeți să vedeți pagina mai devreme, deoarece browserul a început deja să încarce cea mai importantă foaie de stil.

Întrebare: Care scenariu vi se „pare” mai repede?

Sus o pagină cu blocarea randării CSS - CSS critic inline de jos se încarcă deasupra foldului
Sus o pagină cu blocarea randării CSS – CSS critic inline de jos se încarcă deasupra foldului

Răspuns: Suntem cu toții de acord că viteza percepută din scenariul 2  este mai bună.

Vizitatorul dvs. va simți o scădere percepută a timpului de încărcare a paginii datorită redării mai rapide a paginii atunci când este făcută corect.

De Ce Este Necesar CSS Critic?

Încărcarea unei foi de stil CSS este de obicei modul în care vă stilați site-ul WordPress. CSS este limbajul folosit pentru a descrie o pagină web, cum ar fi culorile, aspectul și fonturile. Fără CSS, web-ul ar arăta ca, coloana noastră din stânga de mai jos:

Site-ul WP Rocket fără CSS

Site-ul WP Rocket cu CSS

Ce Înseamnă Calea de Redare CSS Critică?

Calea critică de redare este seria de sarcini pe care browserul trebuie să le efectueze pentru a reda o pagină pe ecranul vizitatorului. De exemplu, aceste sarcini includ descărcarea de fotografii, fonturile și textul de afișat pe pagina web.

După cum s-a văzut anterior, browserul trebuie să descarce și fișierele dvs. CSS pentru a reda aspectul corect al paginii. Dacă fișierele dvs. sunt cu adevărat mari, vizitatorii vor ajunge să aștepte până când întregul fișier va fi descărcat.

Dar ce se întâmplă dacă browserul ar putea începe să randeze CSS pe măsură ce descărcarea progresează?

Imaginați-vă o modalitate de a atenua blocarea și de a începe livrarea CSS cât mai curând posibil. Această tehnică este cunoscută drept optimizarea căii critice de redare.

Calea de redare critică
Calea de redare critică – Imagine preluată – WP Rocket

Browserul urmează cinci pași până când redă pagina vizitatorilor. Se pot întâmpla multe în timpul acestui proces. De aceea ar trebui să ne asigurăm că fiecare pas este finalizat cât mai repede posibil.

Două întrebări apar acum: Cum să optimizați fiecare pas? Cum să ne asigurăm că avem cea mai eficientă livrare CSS?

Aceste întrebări ne duc la următoarea secțiune. Veți învăța cum să îmbunătățiți timpii de randare cu tehnica CSS critică (optimizați livrarea CSS) și să eliminați erorile CSS care blochează randarea.

3 Pași Pentru a Optimiza Livrarea CSS

CSS controlează formatarea vizuală și stilul site-ului dvs. WordPress, dar dacă fișierul CSS nu este livrat optim, este posibil să ajungeți să aveți o pagină web lentă.

Deci, una dintre cele mai bune modalități de a îmbunătăți performanța site-ului dvs. WordPress este prin optimizarea modului și a momentului în care este livrat codul CSS. Există trei pași principali pentru a optimiza livrarea CSS pentru site-ul dvs. WordPress, și anume:

Pasul 1: Găsiți și generați CSS-ul critic – care identifică codul CSS minim de care aveți nevoie pentru a afișa conținutul de deasupra paginii. Trebuie să aflați ce poate vedea utilizatorul în fereastra de vizualizare atunci când încarcă pagina pentru prima dată. Determinarea CSS-ului critic corect pentru o pagină poate fi complexă, deoarece vizitatorii folosesc multe dimensiuni diferite de ecran, cum ar fi desktop, tabletă și mobil.

Conținut diferent deasupra foldului - Sursă - Kinsta pentru Desktop Tabletă și Mobil
Conținut diferent deasupra foldului – Sursă – Kinsta pentru Desktop Tabletă și Mobil

Cum să găsiți CSS critic

WebDev vă oferă trei instrumente pe care le puteți utiliza pentru a identifica CSS critic:

  • Critic – extrage CSS de deasupra paginii (și de asemenea, inline și îl minimizează)
  • CriticalCSS – un alt modul care extrage CSS critic
  • Penthouse – o alegere bună dacă site-ul dvs. are o mulțime de CSS

Pasul 2: Aliniați acest CSS critic – adică adăugarea CSS-ului critic în <head> al documentului HTML pentru a elimina toate solicitările suplimentare de preluare a acestor stiluri.

În exemplul WebDev de mai jos, au introdus CSS-ul critic în fișierul <head>, astfel încât browserul să îl poată livra mai repede și să reda ceva utilizatorilor cât mai curând posibil.

CSS critic inline în HTML - Sursă - WebDev
CSS critic inline în HTML – Sursă – WebDev

Pasul 3: Încărcați restul CSS asincron – asta întârzie CSS-ul necritic, astfel încât să poată fi încărcat după ce vizitatorii dvs. pot vedea conținutul paginii dvs. web. Această tehnică este cunoscută și sub numele de „încărcare amânată”. WebDev explică foarte bine întregul proces manual.

Urmând acești trei pași manuali, îți vei optimiza livrarea CSS și calea critică de redare. Cu toate acestea, există metode mai simple pentru a optimiza livrarea CSS WordPress: prin utilizarea unui plugin WordPress!

Cum Să Generați CSS Critic și Să Optimizați Calea de Redare Critică cu Un Plugin

Din fericire, puteți optimiza livrarea CSS-ului dvs. critic și puteți amâna resurse mai puțin importante folosind un plugin WordPress. Acest lucru vă va economisi timp și va evita modificarea manuală a fișierelor de cod. Am alcătuit o listă, astfel încât să puteți testa ce instrument este cel mai bun pentru dvs.

  • WP Rocket – Cel mai complet plugin de cache care detectează CSS-ul dumneavoastră critic în linie și îl amână în cel mai simplu mod. Veți trece peste un exemplu practic în secțiunea următoare.
Opțiunea - Eliminați CSS Neutilizat - Sursă - WP Rocket
Opțiunea – Eliminați CSS Neutilizat – Sursă – WP Rocket
  • Autoptimize – Injectează CSS în capul paginii în mod implicit și poate să integreze și să amâne CSS critic.
Optimizare CSS cu Plugin-ul Autoptimize
Optimizare CSS cu Plugin-ul Autoptimize
  • Asset Clean-up – Fișiere CSS Inline (automat și prin specificarea căii către foile de stil).
Fișier CSS Inline cu Pluginul Asset Clean Up
Fișier CSS Inline cu Pluginul Asset Clean Up

Cum să Optimizați Livrarea CSS cu WP Rocket

În WP Rocket 3.10, opțiunea Load CSS Asynchronously abordează recomandarea privind viteza paginii pe care am văzut-o mai devreme: „Eliminați resursele care blochează randarea”. WP Rocket acoperă două optimizări CSS principale:

  1. Acesta generează CSS-ul critic necesar pentru a reda partea vizibilă a site-ului dvs. (conținutul de deasupra paginii).
  2. Încarcă toate celelalte fișiere CSS în mod asincron (prioritizând care ar trebui să fie încărcat primul).

Pentru a optimiza livrarea CSS, pur și simplu urmați acești pași din tabloul de bord al WP Rocket:

  • Accesați Setări > WP Rocket
  • Faceți clic pe fila Optimizare fișier.
  • Derulați în jos la secțiunea Fișiere CSS și faceți clic pe caseta etichetată Optimizați livrarea CSS.
  • Selectați opțiunea Eliminare CSS neutilizat (opțiune recomandată). Acest lucru va extrage doar CSS-ul necesar pe pagină și îl va include și în linie.
Eliminați CSS Neutilizat cu WP Rochet 3.10
Eliminați CSS Neutilizat cu WP Rochet 3.10

În mod alternativ, WP Rocket vă permite să încărcați CSS asincron și oferă o opțiune de rezervă pentru CSS-ul critic. Utilizați acest câmp alternativ în cazul în care pluginul nu poate genera CSS-ul critic corect.

Încărcare CSS Asincron
Încărcare CSS Asincron
Notă:
Eliminați CSS neutilizat este modalitatea recomandată de a elimina CSS care blochează redarea. Rețineți că nu este posibil să aveți ambele activate.

Nu în ultimul rând, WP Rocket abordează și recomandarea „Reduce CSS neutilizate” din PageSpeed Insights.

Reduceți CSS Neutilizat
Reduceți CSS Neutilizat

CSS neutilizat afectează timpul de încărcare a paginii, deoarece browserul încă trebuie să le încarce. Valorile de performanță Google, cum ar fi Largest Contentful Paint (LCP) și Total Blocking Time  (TBT) vor fi, de asemenea afectate. LCP și TBT au o pondere totală de 55% pe Google PageSpeed și Core Web Vitals, deci este esențial să menținem aceste valori sănătoase.

Scorul Lighthouse Calculat - Sursă - Lighthouse
Scorul Lighthouse Calculat – Sursă – Lighthouse

Să testăm acele opțiuni WP Rocket pe un site WordPress cu o notă proastă pe PSI (mobil). Veți vedea cum ne va ajuta WP Rocket în procesul nostru de optimizare a vitezei paginii.

Înainte de a optimiza CSS critic, nota de performanță a fost doar de 43/100, ceea ce a pus site-ul în versiunea de mobil pe roșu:

Scorul unui Site WordPress pe Mobil fără WP Rocket - Sursă PSI
Scorul unui Site WordPress pe Mobil fără WP Rocket – Sursă PSI

Primim și două avertismente: „Reduceți CSS neutilizat” și „Eliminați resursele care blochează randarea”.

Acum, să instalăm WP Rocket și să activăm opțiunea „Eliminați CSS neutilizat”.

Opțiunea Eliminați CSS Neutilizată - Sursă WP-Rocket-1
Opțiunea Eliminați CSS Neutilizată – Sursă WP-Rocket-1

Rezultatele de performanță sunt acum excelente pe mobil. A ajuns la 94/100 doar în câteva clicuri. WP Rocket a optimizat calea de randare și de asemenea, s-a ocupat de CSS-ul critic.

Rezultate Performanță cu WP Rocket
Rezultate Performanță cu WP Rocket

Avertismentele „Eliminați resursele care blochează redarea” și „Reduceți CSS neutilizat” sunt acum în secțiunea „audituri trecute”.

Audituri Trecute cu WP Rocket - Sursă PSI
Audituri Trecute cu WP Rocket – Sursă PSI

La fel ca în acest exemplu, puteți folosi WP Rocket pentru a optimiza livrarea CSS critic. Este un plugin de încredere și eficient care ne-a ajutat să atingem obiective uimitoare de performanță în câteva clicuri.

KPI-uri și secțiunea de audit de la PSI (mobil)

Fără WP Rocket

Cu WP Rocket

Nota generală

43/100

94/100

Largest Contentful Paint

10.2 s

0.7 s

Total Blocking Time

540 ms

0 ms

„Reduceți CSS neutilizat”

Probleme

Audit trecut

„Eliminați resursele care blochează redarea”

Probleme

Audit trecut

Concluzie

Optimizarea CSS critic pare descurajantă, dar nu trebuie să fie așa, datorită pluginurilor precum WP Rocket. Am văzut că WP Rocket a ajutat la eliminarea avertismentelor roșii legate de resursele de blocare a redării din Google PageSpeed Insights.

Veți economisi timp prețios deoarece WP Rocket aplică automat 80% din cele mai bune practici de performanță web – și veți vedea o îmbunătățire instantanee a vitezei la simpla activare.

În plus, puteți conta întotdeauna pe garanția lor de rambursare 100% a banilor. Deși nu crede că veți dori vreodată una, vă vor oferi cu plăcere o rambursare dacă o solicitați în termen de 14 zile de la cumpărare.

Recomandarea autorului:

S-ar putea să te intereseze și:

Despre Admin Staff

Comunitatea WordPress este un Blog strict Educativ pentru utilizatorii de WordPress. Nu este Agenție de WEB, Publicitate sau Marketing! Dacă sunteți firmă și aveți nevoie de sfaturi vă ajut cu plăcere, pentru contracte de colaborare, vă rog contactați agenții specializate, care vă pot oferi documentația fiscală necesară. Sunt pasionat de WordPress și tot ce se leagă de mediul online din 2011, scriu din pasiune și-mi place să ajut, doar prin prisma acestui fapt că-mi place să fac bine oamenilor care au aceeași pasiune. Blog-ul este monetizat prin link-uri de afiliere și Google Adsense, unde se plătesc taxe legale de către platformele respective. Dacă dorești să susții acest blog, sunt deschis pentru donații. Vă mulțumesc pentru înțelegere! George CRIȘAN , Administrator Comunitatea WordPress!

Lasă un comentariu