Înțelegerea CSS WordPress
Înainte de a ne aprofunda, să înțelegem cum funcționează CSS obișnuit în WordPress.
Fiecare temă WordPress constă din style.css, care conține tot codul necesar pentru a vă stila site-ul. Dezvoltatorii de teme ar trebui să accepte toate funcțiile WordPress, care includ postări de blog, comentarii, pagina de produse, pagina de membru, formulare etc. Alte plugin-uri pe care le instalați pot adăuga, de asemenea, foi de stil CSS similare.
Acest lucru poate face fișierele CSS umflate și mari în dimensiune de 200 kb sau chiar mai mult.
Ce este Critical Path CSS?
Pe măsură ce fișierele dvs. CSS cresc, browserul trebuie să descarce acele fișiere mari, să le analizeze și să le redea. Cunoscut și sub denumirea de blocare a randării. De asemenea, va crește prima randare semnificativă și prima randare semnificativă.
Critical Path CSS este CSS-ul necesar pentru redarea conținutului de mai sus pe fiecare pagină web. După cum sugerează și numele, CSS „critic”, care ajută browserul să-l deseneze și să îl redeze rapid înainte de a încărca fișiere CSS complete.
De obicei, css-ul căii critice este încorporat în antet, iar fișierul sursă css este încărcat asincron sau în subsol pentru ușurință de utilizare.
De ce este atât de important Critical Path CSS?
Trebuie să fi văzut deja un avertisment de la instrumente precum Google PageSpeed Insights sau GTmetrix care spunea „optimizează livrarea css” sau „amână css neutilizat”.
CSS critic nu are nimic de-a face cu timpul de încărcare a paginii. Nu mărește/descrește timpul de încărcare. Dar oferă o experiență mult mai bună pentru utilizator. Ajută la „redarea” sau „colorarea” rapidă a unei pagini web.
- Îmbunătățește primul conținut extras (FCP)
- Îmbunătățește prima plată semnificativă (FMP)
- Eliminați CSS neutilizat (din punct de vedere tehnic, nu îl eliminați, dar acordați prioritate CSS-ului „util”)
Iată două capturi de ecran ale blogului meu cu și fără CSS critic.
După cum puteți vedea în secțiunea „fără cale css critică”, a durat aproape 5 secunde pentru a arăta utilizatorului ceva util pe un dispozitiv mobil. Browserul trebuie să facă o cerere HTTP suplimentară la fișierul css, să îl descarce, să îl analizeze pentru a începe randarea. Dar atunci când utilizați CSS critic, toate CSS necesare trebuie să fie inline, iar browserul poate începe redarea imediat după încărcarea fișierului HTML într-o secundă sau mai puțin.
Cum se creează CSS critic în WordPress?
Există mai multe moduri de a genera CSS critic în WordPress.
Folosind pluginuri de cache
WP Rocket este un plugin de cache premium care funcționează foarte bine.
Unul dintre motivele pentru care folosesc WP Rocket pe fiecare site este generația critică CSS în sine. Ei generează CSS critic separat pentru pagina de pornire, pagina de postări, pagina de categorie, pagina de produs etc. și îl încorporează. Ei vor restaura CSS critic dacă există modificări ale temei sau ale setării.
Totul se poate face prin atingerea unui buton.
Alte pluginuri de cache care pot genera CSS critic
Swift Performance și LiteSpeed (necesită server LiteSpeed/OpenLiteSpeed) sunt pluginuri similare care pot genera CSS critic. Ambele plugin-uri au cloud și cache complet încorporate în serverele lor.
Folosind Autoptimize + Generator CSS critic gratuit
Există instrumente online ale terților care oferă css importante prin introducerea adresei URL a site-ului dvs. pegasaas este un instrument gratuit atât de grozav.
Iată cum să o faci:
Pasul 1. Accesați https://pegasaas.com/critical-path-css-generator/ și introduceți adresa URL. Copiați „Critical Path CSS” generat.
Pasul 2 În setările de optimizare automată (activați setările avansate), sub „Opțiuni CSS”, bifați „Inline și Defer CSS” și inserați CSS-ul copiat.
Pro:
- Este gratuit
Minusuri:
- Fără CSS critic separat pentru diferite tipuri de pagini (de exemplu: pagina de pornire, pagina de postări, pagina de categorie, pagina de produs etc.)
- Nu reconstruiți automat după modificarea temei/setărilor
De ce WordPress în sine nu poate genera CSS critic?
După cum probabil ați observat, crearea unei căi critice css permite servicii externe. Deci, de ce nu poate WordPress-ul însuși să-l genereze?
Crearea Critical CSS este posibilă prin proiecte open source, cum ar fi Critical (de la Google), CriticalCSS sau penthouse. Toate aceste proiecte sunt bazate pe NodeJS, nu pe PHP. Deci, trebuie să instalați NodeJS pe serverul dvs. Majoritatea furnizorilor de găzduire partajată/administrată nu permit acest lucru din mai multe motive.
