Perfmatters lade till en ny funktion i sin version 1.8.5 den 19 januari för att ta bort oanvänd CSS. Jag kommer aldrig att tröttna på att rekommendera detta plugin, som har blivit ett måste om du vill förbättra prestandan på din blogg.
För den 25 dollar kort ett år erbjuder det ett kraftfullt verktyg som de fortsätter att lägga till förbättringar. Här har du en konfigurationsguide.
Jag har redan testat den på WordPress 5.8 och 5.9-RC och ingenting har gått sönder hittills. Även om jag redan hade den oanvända CSS:en mycket kontrollerad genom den Script Manager av detta plugin, sparar bara att aktivera det här alternativet åtminstone ett par förfrågningar och några Kb.
varför ta bort oanvänd CSS?
De vanliga varningarna i PageSpeed varningarna "Ta bort oanvänd CSS" eller"Minska oanvänt CSS-innehåll" visas vanligtvis när CSS som laddas av ett insticksprogram eller en mall inte behövs eller inte används på en viss sida.
Utvecklare brukar bara ställa ett formatmallblad i kö om det används. Många gånger läggs dock ytterligare stilar till som kanske inte är nödvändiga. Detta resulterar i en massa oanvänd CSS, vilket gör att laddningen blir långsammare.
Ibland kan det också resultera i varningar för"Ta bort resurser som blockerar rendering".
Förutom att det ger bättre PageSpeed-poäng har avlägsnande av oanvänd CSS en stor inverkan på att minska tiden från det att sidan börjar laddas till dess att någon del av sidans innehåll återges på skärmen(FCP), den tid det tar för huvudinnehållet på en webbsida att laddas ner och vara helt klart för användaren(LCP) och tiden från det att sidan börjar laddas till dess att den är helt interaktiv(TTI). En viktig del av historien om den nya webbplatsen Kärnan i webben.
hur hittar man oanvänd CSS?
Det enklaste sättet att hitta oanvänd CSS är att testa webbadressen med PageSpeed. Om det finns oanvänt CSS kommer du att se varningen, som bara utlöses om den ligger över tröskelvärdet för vad Google anser vara tillräckligt viktigt för att varna, så om den upplevda laddningshastigheten (den faktiska hastigheten som du upplever) är bra ska du inte göra dig för mycket lustig över det.
Det andra sättet att hitta oanvänd CSS är att använda Chrome DevTools. Öppna inspektören i Chrome (Ctrl+Shift-I), tryck på Shitft+Control+P, skriv "Coverage" och där hittar du oanvända bytes för både CSS och JS. I rött de oanvända och i blått/grönt de använda.
Härifrån, och under förutsättning att du känner igen varje CSS, vad den gör och om du kan ta bort eller inaktivera den från den sida där du mäter, finns det flera alternativ, t.ex. att ersätta vissa plugins med andra lättare plugins, se över eller överväga att ändra mallen, använda Script Manager för att selektivt inaktivera JS och CSS osv.
Det enklaste sättet att eliminera PageSpeed-varningar är att aktivera funktionen"Remove unused CSS" i Perfmatters, som gör allt automatiskt. De hävdar att de har testat den på hundratals webbadresser (med olika mallar och konfigurationer) och rapporterar dessa resultat:
Genomsnittlig FCP-minskning på 15,20 %.
Genomsnittlig LCP-minskning på 19,66 %.
Genomsnittlig TTI-minskning på 14,95 %.
Före aktivering
Perfmatters rekommenderar att du, innan du aktiverar det här alternativet, tar bort all befintlig CSS-förladdning som har konfigurerats i Perfmatters (exklusive lokala formatmallar från google Fonts) och INTE sammanfogar CSS:en.
CSS-merge är en föråldrad optimeringsteknik sedan HTTP/2. I vissa fall kan CSS-merge till och med försämra prestandan. Kom återigen ihåg att varje sida beter sig olika beroende på dess konfiguration och att det är bäst att testa och observera tills du hittar det bästa felfria resultatet för ditt fall.
Du bör också vara medveten om eventuella konfigurationer av andra prestandapluggins eller cachingplugins som du använder och som kan komma i konflikt med varandra eller åsidosätta varandra genom att ha samma funktioner aktiverade.
När du har aktiverat den hittar du två alternativ med två konfigurationer:
1- CSS-metod som används
1.1- Inline (standard): Den CSS som används visas uppradad ovanför viken i webbplatsens källkod. Det här alternativet är bäst för PageSpeed-poängen.
1.2 -Fil: Den CSS som används placeras i ett separat CSS-formatblad (fil). Det här alternativet är bäst för användaren och den upplevda prestandan, eftersom filen kan cachelagras vid upprepade besök och minskar storleken på HTML-dokumentet.
2- Beteende för formatmallarna
2. 1- Fördröjning (standard och rekommenderat).
Din CSS brukade vara inline och alla CSS-stilblad (CSS som inte används) fördröjs och laddas med användarinteraktion.
2.2- Asynk
Din använda CSS blir inline och alla CSS-formatblad (oanvända CSS) laddas asynkront. Den här metoden kan bidra till att undvika pop-in, eftersom formatbladen utförs asynkront medan sidan laddas. Denna metod kommer att resultera i en något högre LCP/FCP än det tidigare fördröjningsbeteendet.
2.3- Ta bort
Din använda CSS blir inline, och alla ursprungliga CSS-formatblad (oanvända CSS) tas bort. Detta är den mest aggressiva metoden, men kräver sannolikt också att undantag läggs till. Rekommenderas endast för avancerade användare.
När den är aktiverad kommer sidor och inlägg att bete sig annorlunda.
Sidor tenderar att ha mycket unik CSS, och därför kommer den använda CSS:en att genereras och bli inline separat per sida vid första besöket.
Men eftersom poster tenderar att dela mycket CSS kommer den använda CSS:en att genereras endast en gång, vid första besöket, och bli inline. Skillnaden mellan ingångar och sidor är att genereringen av använd CSS endast sker en gång.
All använd CSS som genereras av Perfmatters kommer att lagras lokalt i denna sökväg:
/wp-content/cache/perfmatters/tudomain.com/css/
Så här ser den CSS som genereras av Perfmatters ut för sidor, inlägg, kategorier, taggar, sökningar, startsidan eller 404:or.
I rutan"Excluded Stylesheets" kan du utesluta specifika formatmallar från funktionen "Remove unused CSS" genom att lägga till hela käll-URL:n(loquesea.css) eller genom att lägga till en enskild del av käll-URL:n. Format: en per rad.
I nästa ruta"Excluded Selectors" kan du utesluta specifika CSS (selektorer) från funktionen "Remove unused CSS" genom att lägga till elementets id, klassnamn etc. (#id, .class). Formatering: en per rad.
Det är troligt att du vid något tillfälle kommer att behöva ta bort använd CSS. Till exempel efter att du har gjort om en sida eller lagt till ett nytt element. Om du vill radera den genererade CSS:en och få den återskapad vid efterföljande besök klickar du helt enkelt på alternativet längst ner i"Clear Used CSS".
Du kan utesluta ett enskilt inlägg, en sida eller en anpassad posttyp från att använda funktionen Rensa oanvänd CSS. I redigeringsverktyget, på höger sida, avmarkerar du"Unused CSS" (oanvänd CSS).
Detta kommer att utesluta hela sidan och kan vara användbart för till exempel en kundvagns-, kassa- eller kontaktsida som kan ha fler problem än resten av webbplatsen.
Du kan också använda filtret perfmatters_remove_unused_css för att ändra var oanvänd CSS tas bort på din webbplats. Det här exemplet skulle inaktivera oanvänd CSS endast på sidor.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
