Om din WordPress-webbplats använder ett betalt WordPress-tema eller ett populärt från det officiella WordPress-temanförrådet, är det troligt att temat utvecklas för en mängd olika användningsfall. Och du kanske bara använder en liten uppsättning av alla funktioner som finns i temat.
I så fall laddar din webbplats en hel del oanvänd CSS som inte krävs för att utforma din webbplatss sidor. Till exempel kan WordPress-temat du använder ha stilar för WooCommerce-sidor också, men om du bara kör en blogg på din WordPress-webbplats använder du inte den CSS som ingår för WooCommerce-sidor på din webbplats och tjänar därmed oanvända CSS till användarna.
Om du har testat din webbplats med Google Pagespeed-verktyget är du förmodligen redan medveten om att din webbplats har oanvända CSS-problem. I den här guiden visar vi dig hur du letar efter oanvänd CSS först och använder sedan ett gratisverktyg för att ta bort oanvänd CSS från din WordPress-webbplats.
Hur man kontrollerar oanvänd CSS
Google Chrome DevTools (det du ser när du klickar på alternativet "Inspektera" i snabbmenyn) har en täckningsfunktion på fliken Källor. Du kan använda alternativet Täckning för att hitta oanvända CSS och JS som din webbplats laddar.
- Öppna din webbplats i Chrome på skrivbordet.
- Högerklicka på ett tomt utrymme på din webbplats och välj Inspektera från snabbmenyn.
- Klicka på Källor flik, tryck Ctrl + Shift + P för att öppna ett kommandofönster, skriv sedan rapportering och välj Starta instrumentering och ladda om sidan från tillgängliga kommandon.
- Under fliken Täckning klickar du på URL-filter och ange din webbplats rotdomän här för att endast visa interna CSS/JS-filer.
└ Kontrollera Oanvända bytes kolumnen för att se procentandelen data som laddas i en CSS/JS-fil från ditt tema.
- Klicka på en CSS-fil för att se den oanvända CSS (markerad med röda staplar) som laddas av din webbplats. CSS som används på den aktuella sidan kommer att visas med gröna staplar.
När du har analyserat all oanvänd CSS som laddas på din webbplats är det dags att ta bort den. Det finns flera gratisverktyg tillgängliga för att ta bort oanvänd CSS från webbsidor. Nedan är ett av de populära verktygen som jag har testat och använt i mina egna projekt.
Använd PurifyCSS Online för att ta bort oanvänd CSS
Vanligtvis kan du hitta ett plugin för nästan allt i WordPress. Men för att ta bort oanvänd CSS finns det tyvärr inte ett enda plugin tillgängligt. Så vi kommer att använda manuella icke-wordpress-specifika verktyg för att ta bort oanvänd CSS från din webbplats.
PurifyCSS är mest vänligt verktyg för icke-utvecklare du kan hitta för att hantera oanvänd CSS. Verktyget har ett enkelt användargränssnitt för att låta användare ange antingen webbadressen ELLER HTML- och CSS-koden. För WordPress kommer vi att använda URL-alternativet och tillhandahålla länkar till alla typer av sidor på din webbplats för att låta verktyget ta CSS från alla och optimera för oanvänd CSS.
Här är en snabb lista över sidor du bör lägga in i verktyget:
- Hemsida URL
- Flera webbadresser för inläggssidor från varje kategori på din webbplats
└ Detta för att säkerställa att CSS ingår för alla postelement.
- Kontakt, Om, Sekretess och alla möjliga olika sidor du kan ha på din sida.
- Arkivsida, Söksida, Författarsidor
- Anpassade sidor för inläggstyp
Hett tips: Skapa ett inlägg/sida med "funktioner" med alla temaelement som du använder eller kan komma att använda i framtiden, såsom en tabell, bildgalleri, kod, förhandslistor, beställda listor, oordnade listor, formulär, flikar, dragspel, Gutenbergblock som du vanligtvis använder , etc.
Använd denna inläggs-URL för "funktioner" i PurifyCSS Online-verktyget för att säkerställa att CSS för de vanligaste elementen ingår.
Slå Rensa upp CSS när du har lagt till alla relevanta URL-typer från din webbplats i PurifyCSS Online-verktyget.
Kopiera den nya CSS som genereras av verktyget och använd den på din webbplats. Se till att du säkerhetskopiera den ursprungliga style.css och andra CSS-filer i ditt tema innan du ersätter den nya CSS som genereras av PurifyCSS.
Dricks: Du kan antingen använda den inbyggda WordPress Theme Editor för att redigera ditt temas CSS-filer, eller så kan du använda ett FTP/SFTP-program för att ansluta till servern och bekvämt redigera filer med en Notepad-redigerare.