Perfmatters a adăugat o nouă funcție în versiunea sa 1.8.5 pe 19 ianuarie pentru a elimina CSS nefolosite. Nu voi obosi niciodată să vă recomand acest plugin care a devenit un must-have dacă doriți să îmbunătățiți performanța blogului dumneavoastră.
Pentru 25 de dolari puțini pe an oferă un instrument puternic la care se tot adaugă îmbunătățiri. Aici aveți un ghid de configurare.
L-am testat deja pe WordPress 5.8 și 5.9-RC și nu s-a stricat nimic până acum. Deși aveam deja CSS-ul nefolosit foarte bine controlat prin intermediul aplicației Script Manager al acestui plugin, simpla activare a acestei opțiuni economisește cel puțin câteva cereri și câțiva Kb.
de ce să ștergeți CSS nefolosit?
Avertizările obișnuite din PageSpeed avertizările "Remove unused CSS" sau"Reduce unusedCSScontent" (Elimină CSS nefolosit) apar, de obicei, atunci când CSS-ul încărcat de un plugin sau de un șablon nu este necesar sau nu este utilizat pe o anumită pagină.
De obicei, dezvoltatorii pun în coadă o foaie de stil doar dacă este utilizată. Cu toate acestea, de multe ori sunt adăugate și stiluri suplimentare care s-ar putea să nu fie necesare. Acest lucru duce la o mulțime de CSS nefolosite, ceea ce încetinește încărcarea.
Ocazional, aceasta poate avea ca rezultat și avertismente de tipul"Remove resources that block rendering"(Elimină resursele care blochează redarea).
Dincolo de efectul placebo al obținerii unui scor PageSpeed mai bun, eliminarea CSS nefolosite are un impact major asupra scăderii timpului necesar de la începutul încărcării paginii până când orice parte a conținutului paginii este redată pe ecran (FCP), a timpului necesar pentru ca conținutul principal al unei pagini web să se descarce și să fie complet pregătit pentru utilizator(LCP) și a timpului de la începutul încărcării paginii până când aceasta este complet interactivă(TTI). Oricum, știți, o parte importantă din istoria Core Web Vitals.
cum să găsiți CSS nefolosit?
Cel mai simplu mod de a găsi CSS nefolosit este de a testa URL-ul cu PageSpeed. Dacă există un CSS nefolosit, veți vedea avertismentul, care va fi declanșat doar dacă este peste pragul pe care Google îl consideră suficient de important pentru a avertiza, așa că dacă viteza de încărcare percepută (viteza reală pe care o experimentați) este bună nu vă faceți prea multe griji.
Cealaltă modalitate de a găsi CSS nefolosit este de a utiliza Chrome DevTools. Deschideți inspectorul în Chrome (Ctrl+Shift-I), apăsați Shitft+Control+P, tastați "Coverage" și acolo veți găsi octeții nefolosiți atât pentru CSS, cât și pentru JS. În roșu sunt cei nefolosiți, iar în albastru/verde cei utilizați.
Pornind de aici, și înțelegând că recunoașteți fiecare CSS, ce face și dacă îl puteți elimina sau dezactiva din pagina în care măsurați, există mai multe opțiuni, cum ar fi înlocuirea anumitor plugin-uri cu altele mai ușoare, revizuirea sau luarea în considerare a schimbării șablonului, utilizarea Script Manager pentru a dezactiva selectiv JS și CSS, etc.
Cel mai simplu mod de a elimina avertismentele PageSpeed este să activați funcția"Remove unused CSS" din Perfmatters, care face totul automat. Ei susțin că au testat-o pe sute de URL-uri (cu diferite șabloane și configurații) și raportează aceste rezultate:
Scădere medie a FCP de 15,20%.
Scădere medie a LCP de 19,66%.
Scădere medie a TTI de 14,95%.
Înainte de activarea
Perfmatters recomandă ca, înainte de a activa această opțiune, să eliminați orice preîncărcare CSS existentă care a fost configurată în Perfmatters (cu excepția foilor de stil locale din google Fonts) și să NU fuzionați CSS-ul.
Fuziunea CSS este o tehnică de optimizare depreciată de la HTTP/2. În unele cazuri, îmbinarea CSS poate chiar afecta performanța. Din nou, rețineți că fiecare pagină se va comporta diferit în funcție de configurația sa și că cel mai bine este să testați și să observați până când găsiți cel mai bun rezultat fără erori pentru cazul dvs.
De asemenea, trebuie să fiți atenți la posibilele configurații ale altor pluginuri de performanță sau de cache pe care le utilizați și care pot intra în conflict sau se pot anula reciproc prin activarea acelorași funcții.
Odată activat, veți găsi două opțiuni cu două configurații:
1- Metoda CSS utilizată
1.1- Inline (implicit): CSS-ul utilizat apare aliniat deasupra pliului în codul sursă al site-ului. Această opțiune este cea mai bună pentru scorurile PageSpeed.
1.2 -File: CSS-ul utilizat este plasat într-o foaie de stil CSS separată (fișier). Această opțiune este cea mai bună pentru utilizator și pentru performanța percepută, deoarece fișierul poate fi pus în memoria cache la vizite repetate și reduce dimensiunea documentului HTML.
2 - Comportamentul foii de stil
2. 1- Întârziere (implicit și recomandat).
CSS-ul dvs. este în linie și toate foile de stil CSS (CSS neutilizate) sunt întârziate și încărcate odată cu interacțiunea utilizatorului.
2.2- Async
CSS-ul dvs. utilizat devine inline, iar toate foile de stil CSS (CSS neutilizate) sunt încărcate asincron. Această metodă poate ajuta la evitarea pop-in, deoarece foile de stil sunt executate asincron în timp ce pagina se încarcă. Această metodă va avea ca rezultat un LCP/FCP ușor mai mare decât comportamentul de întârziere anterior.
2.3- Eliminați
CSS-ul utilizat devine inline, iar toate foile de stil CSS originale (CSS neutilizate) sunt eliminate. Aceasta este metoda cea mai agresivă, dar este, de asemenea, probabil să necesite adăugarea de excepții. Recomandată numai pentru utilizatorii avansați.
Odată activate, paginile și postările se vor comporta diferit.
Paginile tind să aibă o mulțime de CSS unice și, prin urmare, CSS-ul utilizat va fi generat și va deveni inline separat pentru fiecare pagină, la prima vizită.
Cu toate acestea, intrările, deoarece tind să împartă o mulțime de CSS, CSS-ul utilizat va fi generat o singură dată, la prima vizită, și va deveni inline. Diferența intrărilor în comparație cu paginile este că generarea CSS-ului utilizat are loc o singură dată.
Toate CSS-urile utilizate generate de Perfmatters vor fi stocate local în această cale:
/wp-content/cache/perfmatters/tudomain.com/css/
Iată cum arată CSS-ul generat de Perfmatters, pentru pagini, postări, categorii, tag-uri, căutări, pagina de start sau 404s.
În caseta"Excluded Stylesheets" (Foi de stilexcluse) puteți exclude anumite foi de stil specifice de la funcția "Remove unused CSS" (Elimină CSS nefolosit) adăugând URL-ul sursă complet(loquesea.css) sau adăugând o singură parte a URL-ului sursă. Format: unul pe linie.
În următoarea casetă"Excluded Selectors" (Selectoriexcluși) puteți exclude anumite CSS (selectori) din funcția "Remove unused CSS" adăugând id-ul elementului, numele clasei etc. (#id, .class). Formatare: una pe linie.
Este probabil ca la un moment dat să fie nevoie să ștergeți CSS utilizate. De exemplu, după reproiectarea unei pagini sau după adăugarea unui nou element. Pentru a șterge CSS-ul generat și pentru ca acesta să fie recreat după vizitele ulterioare, dați pur și simplu clic pe opțiunea din partea de jos a"Clear Used CSS" (Ștergeți CSS-ul utilizat).
Puteți exclude o postare individuală, o pagină sau un tip de postare personalizată de la utilizarea funcției Clear Unused CSS (Șterge CSS nefolosit). În editor, în partea dreaptă, debifați"Unused CSS".
Acest lucru va exclude întreaga pagină și poate fi util, de exemplu, pentru o pagină de coș, de checkout sau de contact care ar putea avea mai multe probleme decât restul site-ului.
De asemenea, puteți utiliza filtrul perfmatters_remove_unused_css pentru a schimba locul în care este eliminat CSS-ul nefolosit de pe site-ul dvs. Acest exemplu ar dezactiva CSS nefolosit doar pe pagini.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
