Perfmatters január 19-én az 1.8.5-ös verziójában új funkciót adott hozzá a nem használt CSS eltávolításához. Soha nem fáradok bele, hogy ajánljam ezt a plugint, amely kötelezővé vált, ha javítani akarod a blogod teljesítményét.
A 25 dollár rövid egy évre egy hatékony eszközt kínál, amelyhez folyamatosan fejlesztéseket adnak hozzá. Itt van egy konfigurációs útmutató.
Én már teszteltem WordPress 5.8 és 5.9-RC rendszeren és eddig semmi sem romlott el. Bár én már a nem használt CSS-t is nagyon jól kontrolláltam a Script Manager ennek a pluginnak, csak ennek az opciónak az aktiválása legalább néhány kérést és néhány Kb-t megspórol.
miért kell törölni a nem használt CSS-t?
A szokásos figyelmeztetések a PageSpeed a "Nem használt CSS eltávolítása" vagy a"Nem használt CSS-tartalom csökkentése" figyelmeztetések általában akkor jelennek meg, ha egy plugin vagy sablon által betöltött CSS-re nincs szükség, vagy nem használják egy adott oldalon.
A fejlesztők általában csak akkor állítanak sorba egy stílustáblát, ha használják. Sokszor azonban olyan további stílusokat is hozzáadnak, amelyekre nem feltétlenül van szükség. Ez rengeteg nem használt CSS-t eredményez, ami lassítja a betöltést.
Alkalmanként a"Remove resources that block rendering" figyelmeztetéseket is eredményezheti.
A jobb PageSpeed pontszám eléréséhez szükséges placebón túlmenően a nem használt CSS eltávolítása jelentős hatással van az oldal betöltésének kezdetétől az oldal tartalmának bármely részének a képernyőn való megjelenítéséig eltelt idő(FCP), a weboldal fő tartalmának letöltéséhez és a felhasználó számára való teljes elkészüléséhez szükséges idő(LCP), valamint az oldal betöltésének kezdetétől a teljes interaktivitásig eltelt idő(TTI) csökkentésére. Mindenesetre, tudod, a történelem fontos része a Core Web Vitals.
hogyan lehet megtalálni a fel nem használt CSS-t?
A legegyszerűbb módja a nem használt CSS megtalálásának, ha az URL-t a PageSpeed segítségével teszteli. Ha van nem használt CSS, akkor látni fogja a figyelmeztetést, amely csak akkor lép működésbe, ha a Google elég fontosnak tartja a figyelmeztetéshez szükséges küszöbérték felett van, így ha az érzékelt betöltési sebesség (a ténylegesen tapasztalt sebesség) jó, ne akadjon fenn túlságosan rajta.
A másik módja a nem használt CSS megtalálásának a Chrome DevTools használata. Nyisd meg a Chrome-ban az inspektort (Ctrl+Shift-I), nyomd meg a Shitft+Control+P billentyűkombinációt, írd be a "Coverage" szót, és ott megtalálod a CSS és a JS nem használt bájtjait. Pirossal a fel nem használt, kékkel/zölddel pedig a használt.
Innen, és ha megérted, hogy felismered az egyes CSS-eket, hogy mit csinálnak, és hogy el tudod-e távolítani vagy letiltani az oldalról, ahol a mérést végzed, akkor több lehetőség is van, például bizonyos pluginok lecserélése más könnyebbekre, a sablon felülvizsgálata vagy a sablon megváltoztatásának megfontolása, a Script Manager használata a JS és CSS szelektív letiltására stb.
A PageSpeed figyelmeztetések kiküszöbölésének legegyszerűbb módja a Perfmattersben a"Fel nem használt CSS eltávolítása" funkció aktiválása, amely mindezt automatikusan elvégzi. Állításuk szerint több száz URL-en tesztelték (különböző sablonokkal és konfigurációkkal), és ezekről az eredményekről számolnak be:
Átlagos LCP csökkenés 19,66%.
Átlagos TTI csökkenés 14,95%.
Az aktiválás előtt
A Perfmatters azt ajánlja, hogy mielőtt aktiválná ezt az opciót, távolítsa el a Perfmattersben konfigurált CSS előtöltést (kivéve a helyi stíluslapokat a következőktől google betűtípusok), és NEM egyesíteni a CSS-t.
A CSS egyesítése a HTTP/2 óta elavult optimalizálási technika. Bizonyos esetekben a CSS egyesítés még a teljesítményt is ronthatja. Ismét ne feledje, hogy minden oldal másképp viselkedik a konfigurációjától függően, és a legjobb, ha addig tesztel és megfigyel, amíg meg nem találja a legjobb hibamentes eredményt az Ön esetében.
Figyelnie kell az Ön által használt egyéb teljesítmény- vagy gyorsítótárazási bővítmények lehetséges konfigurációira is, amelyek konfliktusba kerülhetnek vagy felülírhatják egymást azáltal, hogy ugyanazokat a funkciókat aktiválják.
Aktiválás után két opciót talál két konfigurációval:
1- A használt CSS módszer
1.1- Inline (alapértelmezett): a használt CSS a webhely forráskódjában a hajtás fölé igazítva jelenik meg. Ez az opció a legjobb a PageSpeed pontszámok szempontjából.
1.2 -Fájl: a használt CSS egy külön CSS-stíluslapban (fájlban) kerül elhelyezésre. Ez a beállítás a legjobb a felhasználó és az érzékelt teljesítmény szempontjából, mivel a fájl ismételt látogatások esetén gyorsítótárba helyezhető, és csökkenti a HTML-dokumentum méretét.
2- A stíluslap viselkedése
2. 1- Késleltetés (az alapértelmezett és ajánlott).
A CSS szokott inline lenni, és az összes CSS stíluslap (nem használt CSS) késleltetve és a felhasználói interakcióval töltődik be.
2.2- Aszinkron
A használt CSS-ed inline lesz, és az összes CSS stíluslap (nem használt CSS) aszinkron módon töltődik be. Ez a módszer segíthet elkerülni a pop-in-t, mivel a stíluslapok aszinkron módon kerülnek végrehajtásra, miközben az oldal betöltődik. Ez a módszer valamivel magasabb LCP/FCP értéket eredményez, mint az előző késleltetési viselkedés.
2.3- A eltávolítása
A használt CSS soron belülivé válik, és az összes eredeti CSS stíluslap (nem használt CSS) eltávolításra kerül. Ez a legagresszívabb módszer, de valószínűleg kivételek hozzáadását is igényli. Csak haladó felhasználóknak ajánlott.
Ha engedélyezve van, az oldalak és a bejegyzések másképp fognak viselkedni.
Az oldalak általában sok egyedi CSS-t tartalmaznak, ezért a használt CSS az első látogatáskor oldalanként külön-külön generálódik és inline lesz.
A bejegyzések azonban, mivel általában sok CSS-t osztanak meg, a használt CSS csak egyszer, az első látogatáskor generálódik és inline lesz. A bemenetek és az oldalak közötti különbség az, hogy a használt CSS generálása csak egyszer történik meg.
A Perfmatters által generált összes használt CSS lokálisan tárolódik ebben az elérési útvonalban:
/wp-content/cache/perfmatters/tudomain.com/css/
Így néz ki a Perfmatters által generált CSS az oldalak, bejegyzések, kategóriák, címkék, keresések, a kezdőlap vagy a 404-es oldalak esetében.
A"Excluded Stylesheets" mezőben kizárhat bizonyos stíluslapokat a "Remove unused CSS" funkcióból a teljes forrás URL(loquesea.css) vagy a forrás URL egy részének hozzáadásával. Formátum: soronként egy.
A következő"Excluded Selectors" mezőben az elem azonosítójának, osztálynevének stb. hozzáadásával (#id, .class) kizárhat bizonyos CSS-eket (szelektorokat) a "Remove unused CSS" funkcióból. Formázás: soronként egy.
Valószínű, hogy egy bizonyos ponton szükség lesz a használt CSS törlésére. Például egy oldal újratervezése vagy egy új elem hozzáadása után. A generált CSS törléséhez és a későbbi látogatások után történő újbóli létrehozásához egyszerűen kattintson a"Clear Used CSS" (Használt CSS törlése) opcióra az oldal alján.
Kizárhat egy egyedi bejegyzést, egy oldalt vagy egy egyéni bejegyzéstípust a Fel nem használt CSS törlése funkció használatából. A szerkesztőben, a jobb oldalon, törölje a"Fel nem használt CSS" jelölőnégyzetet.
Ez kizárja az egész oldalt, és hasznos lehet például egy kosár, pénztár vagy kapcsolatfelvételi oldal esetében, ahol több probléma merülhet fel, mint az oldal többi részén.
A perfmatters_remove_unused_css szűrővel azt is megváltoztathatja, hogy a nem használt CSS hol kerül eltávolításra az oldalon. Ez a példa csak az oldalakon tiltaná le a nem használt CSS-t.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
