Cum se generează CSS critic în WordPress (2 metode)

Oamenii care vă vizitează site-ul web nu vor să aștepte mult pentru a vă vedea conținutul. Dacă nu vă optimizați codul, resursele de blocare a randării, cum ar fi CSS, pot contribui la percepția vizitatorilor asupra timpilor de încărcare mai lenți.

Din fericire, puteți genera cu ușurință CSS critic pentru site-ul dvs. Instalând un plugin precum Jetpack Boost, veți putea extrage tot CSS-ul necesar pentru afișarea conținutului de deasupra paginii. Acest lucru poate fi cheia pentru ca site-ul dvs. să apară mai rapid și mai ușor de utilizat.

În această postare, vom explica CSS critic și de ce ar trebui să luați în considerare generarea acestuia pentru site-ul dvs. web. Apoi, vă vom arăta două moduri diferite de a face acest lucru în WordPress.

Ce este CSS critic în WordPress?

Odată ce un vizitator face clic pe un link către site-ul dvs., browserul său trebuie să proceseze o serie de sarcini pentru a reda conținutul complet. Toți pașii implicați în descărcarea, procesarea și conversia codului în pixeli formează Calea critică de redare.

Browserul citește codul HTML, CSS și JavaScript al site-ului de sus în jos în timpul acestui proces de încărcare. Deoarece nu va ști automat care resurse sunt cele mai importante în redarea paginii, browserul s-ar putea bloca procesând cod inutil.

Dacă un anumit fișier CSS oprește redarea site-ului dvs., acesta devine o resursă care blochează redarea. Chiar dacă nu este necesar pentru afișarea paginii, vizitatorii nu vor vedea conținutul până când acest CSS care blochează randarea nu este procesat complet.

CSS critic se referă la codul CSS necesar pentru conținutul web de deasupra paginii. În esență, este codul minim de care are nevoie browserul pentru a afișa prima secțiune de conținut pentru vizitatori.

Beneficiile generării CSS critice

Generarea de CSS critice pentru paginile dvs. web implică eliminarea oricărui CSS care blochează randarea și permiterea browserului să proceseze doar ceea ce este necesar.

1. Optimizați livrarea conținutului

Când optimizați livrarea CSS pentru site-ul dvs. WordPress, aceasta poate îmbunătăți procesul de randare. Pentru un vizitator front-end, poate părea chiar că paginile dvs. se încarcă mai repede.

Când cineva ajunge pe site-ul dvs., primul lucru pe care îl va vedea este conținutul de deasupra paginii. Acesta este tot ce este afișat pe prima pagină fără a fi nevoie să derulați.

Prin extragerea CSS-ului critic, optimizați fișierele CSS necesare pentru afișarea acestei secțiuni inițiale. Fără el, utilizatorii pot vedea elemente parțiale care nu au fost redate complet.

O concepție greșită comună este că CSS critic reduce timpul de încărcare. Deși acest lucru nu este adevărat, tehnica de optimizare poate îmbunătăți performanța percepută .

În esență, utilizatorii vor crede că paginile dvs. se încarcă mai repede, deoarece browserul poate afișa pur și simplu elementele de deasupra paginii mai eficient.

Prin generarea CSS critică pentru WordPress, vizitatorii vor avea o experiență de utilizator (UX) mai bună pe site-ul dvs. Drept urmare, puteți reduce ratele de respingere și puteți încuraja vizitele de întoarcere.

2. Îmbunătățiți Core Web Vitals

Deși CSS critic pentru WordPress nu crește sau scade timpul de încărcare a paginii, acesta vă poate îmbunătăți Core Web Vitals. Aceste valori analizează experiența utilizatorului unui site web.

Iată principalele elemente vitale web:

• Cea mai mare vopsea de conținut (LCP) : performanța de încărcare a unui site web
• First Input Delay (FID) : interactivitatea unui site web
• Cumulative Layout Shift (CLS) : stabilitatea vizuală a unui site web

După ce vă scanați site-ul web pentru un raport Core Web Vitals, este posibil să vedeți valori suplimentare, cum ar fi First Contentful Paint (FCP) sau Time to First Byte (TTFB). Acestea influențează LCP și joacă un rol important în procesul de încărcare.

CSS critic afectează direct FCP. Mai simplu, FCP măsoară timpul necesar pentru redarea primului element pe o pagină web după ce începe să se încarce. Dacă site-ul dvs. are un scor FCP slab, vizitatorii vor vedea adesea o pagină goală pentru o perioadă.

În calitate de proprietar de site web WordPress, ar trebui să urmăriți să obțineți FCP sub 1,8 secunde, dar multe elemente pot avea un impact negativ asupra acestui scor, inclusiv:

• JavaScript și CSS care blochează randarea
• Un server lent
• Fișiere cu fonturi voluminoase
• Dimensiunea modelului obiectului document mare (DOM).

Deoarece blocarea redării CSS contribuie la FCP, generarea de CSS critice poate îmbunătăți acest scor. În timpul acestui proces, veți introduce toate CSS-urile necesare pentru a reda conținutul de deasupra paginii.

Cum să testați site-ul dvs. pentru CSS care blochează randarea

Înainte de a genera CSS critic WordPress, va trebui să știți dacă este necesar pentru site-ul dvs. Deoarece fișierele CSS mari sunt considerate resurse care blochează randarea, le puteți scana cu un instrument de optimizare a vitezei.

Pentru a începe, introduceți adresa URL a site-ului dvs. în PageSpeed ​​Insights. Acest software Google va analiza performanța site-ului dvs. cu diverse audituri de viteză.

În partea de sus a paginii, veți vedea evaluarea Core Web Vitals. Include valori pentru cea mai mare vopsea cu conținut, întârziere pentru prima introducere, schimbare cumulativă a aspectului, prima vopsea cu conținut, interacțiune cu următorul pictură și timp până la primul octet.

După cum ați învățat mai devreme, CSS de blocare a randării este strâns legat de scorul FCP. Asigurați-vă că rezultatele evaluării atât pe dispozitive mobile, cât și pe cele desktop sunt de 1,8 secunde sau mai puțin.

Dacă primiți un scor slab, este posibil să aveți fișiere CSS voluminoase, neoptimizate pe site-ul dvs. Pentru a verifica dacă acest lucru este adevărat, derulați în jos la Oportunități . Această secțiune oferă sugestii specifice pentru a îmbunătăți timpul de încărcare a site-ului dvs.

Aici, este posibil să observați o alertă care vă spune să eliminați resursele care blochează redarea . Deși acest mesaj se poate referi la un fișier JavaScript, ar putea semnala, de asemenea, că trebuie să generați CSS critic.

Cum se generează CSS critic în WordPress

Acum că înțelegeți mai multe despre CSS critic WordPress și de ce este important, este timpul să îl generați! Indiferent de nivelul dvs. de calificare, puteți învăța cu ușurință cum să optimizați livrarea CSS în WordPress, urmând tutorialul nostru pentru începători.

Metoda 1: Generați CSS critic cu un plugin

Deși l-ați putea genera singur, optimizarea livrării CSS cu un plugin WordPress este adesea mai ușoară. Instrumentul potrivit poate amâna automat CSS mai puțin important. În plus, nu va trebui să editați niciun cod manual.

Jetpack Boost poate îmbunătăți rapid performanța de încărcare a site-ului dvs. După un proces simplu de configurare, puteți utiliza acest plugin pentru a genera CSS critic, a amâna JavaScript neesențial și multe altele.

Pentru a începe să utilizați Jetpack Boost, instalați-l și activați-l în WordPress. Apoi, veți primi un scor bazat pe performanța actuală a site-ului dvs. web.

Cu pluginul gratuit, veți vedea o opțiune pentru a optimiza încărcarea CSS . Alternativ, puteți face upgrade la un abonament plătit pentru a genera automat CSS critic. Acest lucru va ajuta la evitarea nevoii de a regenera CSS de fiecare dată când faceți o schimbare.

Pentru a activa CSS critic, pur și simplu utilizați comutatorul din partea stângă. În mod similar, puteți amâna JavaScript neesențial și puteți activa încărcarea leneră pentru imagini. Combinate, aceste setări pot reduce semnificativ timpul de încărcare a paginii și pot permite vizitatorilor să vă vadă conținutul mai devreme.

Metoda 2: generați manual CSS critic

Dacă nu doriți să utilizați un plugin, puteți genera manual și CSS critic. Este important să rețineți că această metodă presupune editarea codului site-ului dvs., astfel încât poate fi un proces mai complicat pentru începători.

Pasul 1: faceți o copie de rezervă a site-ului dvs

Pentru a începe, veți dori să creați o copie de rezervă a site-ului dvs. WordPress. Dacă faceți o greșeală în fișierele site-ului dvs., puteți reveni cu ușurință la această versiune salvată. În acest fel, nu veți pierde date importante.

Dacă aveți nevoie să vă gestionați cu ușurință backup-urile, puteți instala pluginul Jetpack VaultPress Backup. Acest instrument stochează copiile de rezervă în afara site-ului și oferă restaurări cu un singur clic, chiar dacă site-ul dvs. este complet oprit.

Iată cum să începeți:

Accesați Pluginuri → Adăugați nou în tabloul de bord WordPress. Căutați „Jetpack VaultPress Backup” și faceți clic pe Instalare acum → Activare .

Apoi, veți vedea o nouă fereastră care vă va permite să configurați pluginul. Faceți clic pe Configurați Jetpack .

Apoi, conectează-ți site-ul la contul tău WordPress.com. După ce sunteți redirecționat înapoi la site-ul dvs., faceți clic pe Upgrade acum pentru a vedea mai multe opțiuni pentru planurile Jetpack VaultPress Backup.

Cel puțin, veți avea nevoie de planul Backup, dar Security and Complete oferă instrumente suplimentare pentru protejarea, creșterea și accelerarea site-ului dvs.

Prima ta copie de rezervă va începe automat și poți să-i verifici progresul accesând Jetpack → Backup în tabloul de bord WordPress.

Dacă apar greșeli în următorii câțiva pași, pur și simplu reveniți la această pagină și apăsați Restabiliți până la acest punct . Astfel, site-ul dvs. va reveni la versiunea mai veche, eliminând orice erori apărute.

Pasul 2: Utilizați un generator CSS critic

Odată ce știți că site-ul dvs. are copii de rezervă, puteți începe să generați CSS-ul dvs. critic. Una dintre cele mai simple moduri de a face acest lucru este cu un generator CSS critic. Acest instrument va produce automat CSS-ul dvs. critic, împiedicându-vă să creați manual codul.

Mai întâi, deschideți CoreWebVitals Critical CSS Generator. Introduceți adresa URL a site-ului dvs. web sau a unei anumite pagini pe care doriți să o optimizați. Apoi, apăsați Generare CSS critic .

Odată ce s-a terminat de încărcat, veți vedea codul CSS generat în caseta de text. Copiați acest cod.

După ce salvați acest cod, îl puteți introduce pe site-ul dvs. web!

Pasul 3: CSS critic inline

Când cineva vă vizitează site-ul web, browserul său va prelua fișierele site-ului dvs. de pe server. Mai întâi va verifica secțiunea <head> pentru conținutul necesar în timpul procesului de analiză. Apoi, va continua redarea conținutului <body>.

Pentru a prioritiza CSS critic, plasați-l în secțiunea <head> a fișierelor dvs. Aceasta se numește inlining. Când introduceți CSS, browserul solicită ca această foaie de stil să fie preluată înainte de a randa restul paginii.

În esență, inlining CSS va plasa codul acolo unde trebuie utilizat. Deci, browserul unui vizitator nu va trebui să analizeze fișierele care blochează randarea înainte de a afișa conținutul țintă.

După ce ați copiat CSS-ul critic generat, îl puteți introduce în fișierele dvs. Navigați la folderul public_html prin FTP. Apoi, accesați wp-content → teme → tema dvs. activă și deschideți fișierul header.php .

În acest fișier antet, găsiți eticheta <title>. Dedesubt, adăugați CSS-ul critic folosind etichetele <style>. În cele din urmă, selectați Actualizare fișier .

Întrebări frecvente (FAQs)

Până acum, am discutat despre CSS critic și cum să-l generăm. Dacă mai aveți întrebări despre integrarea CSS pe site-ul dvs., le vom răspunde aici!

Generarea de CSS critice poate distruge aspectul site-ului dvs.?

Dacă este făcută incorect, generarea de CSS critic ar putea avea un impact negativ asupra aspectului și aspectului site-ului dvs. Din fericire, puteți anula orice modificare restabilind pur și simplu o copie de rezervă salvată a site-ului dvs. WordPress. Folosind Jetpack VaultPress Backup, puteți vizualiza un jurnal de activitate și puteți restaura versiunile vechi ale site-ului dvs. cu un singur clic.

În plus, puteți folosi un plugin precum Jetpack Boost pentru a activa și dezactiva CSS critic ori de câte ori este necesar. Aceste setări simple au fost construite în conformitate cu cele mai bune practici WordPress, astfel încât este mai puțin probabil să vă afecteze site-ul pe front-end.

Ce altceva pot face pentru a-mi optimiza codul CSS?

Dacă doriți să optimizați în continuare CSS pe site-ul dvs., luați în considerare reducerea acestuia. Veți elimina codul inutil în timpul minimizării CSS pentru a reduce dimensiunile fișierelor CSS.

Codul dvs. CSS are probabil spații și întreruperi de rând pentru a fi mai ușor de citit. Deoarece un browser poate procesa cod fără aceste elemente suplimentare, le puteți șterge. Acest lucru reduce resursele și timpul necesar pentru a rula fișierele.

De asemenea, puteți elimina complet CSS neutilizat. Prin reducerea fișierelor la codul necesar, site-ul dvs. web va începe să se încarce mai repede.

Ce altceva pot face pentru a-mi îmbunătăți viteza paginii?

Una dintre cele mai bune modalități de a vă accelera site-ul este îmbunătățirea Core Web Vitals. Folosind un instrument precum PageSpeed ​​Insights, puteți identifica elemente neoptimizate, cum ar fi resursele de blocare a redării.

Deoarece browserele încarcă codul site-ului dvs. de sus în jos, procesul de încărcare poate fi întrerupt cu ușurință de JavaScript. Amânând analiza JavaScript, vizitatorii nu vor trebui să aștepte încărcarea scripturilor înainte de a vă vedea conținutul.

În plus, luați în considerare implementarea încărcării leneșe pentru imagini. Cu această setare în Jetpack Boost, imaginile de sub fold nu se vor încărca până când vizitatorii derulează în jos. Acest lucru poate împiedica site-ul dvs. să încarce fiecare imagine simultan, întârziind procesul de randare.

În cele din urmă, o rețea de livrare de conținut (CDN) poate accelera semnificativ site-ul dvs. În loc să se bazeze pe un singur server, un CDN folosește un sistem de centre de date din întreaga lume. O opțiune precum CDN-ul Jetpack poate îmbunătăți livrarea de conținut pentru imagini și fișiere statice.

Optimizați livrarea CSS în WordPress

Dacă încercați să îmbunătățiți difuzarea conținutului site-ului dvs., este important să eliminați orice resurse care blochează redarea. Deoarece CSS neoptimizat poate întârzia procesul de randare, merită să generați CSS critic. Deși acest lucru nu va îmbunătăți în mod direct timpul de încărcare, va permite vizitatorilor să vadă mult mai rapid conținutul de deasupra paginii.

Pentru a revizui, iată cum să generați CSS critic în WordPress:

1. Generați CSS critic cu un plugin precum Jetpack Boost.
2. Utilizați un generator CSS critic.

Cu Jetpack Boost, puteți optimiza CSS fără a edita niciun cod. După descărcarea și activarea pluginului, veți putea genera CSS critic cu un singur clic!