Hur man tar bort oanvända CSS och JS i WordPress (mycket enkelt)
Att ha mycket oanvänd CSS kan sakta ner din webbplats. Om du testar din webbplats med Google PageSpeed Insight kan du få en varning om att ta bort oanvänd CSS. Det finns ett enkelt sätt att göra det utan kodning och teknik.
Att ha mycket oanvänd CSS och JS på din webbplats kan skada laddningstiden för din webbplats. Om du driver din webbplats genom en verktyg för hastighetstestning såsom Google PageSpeed Insight, kan du få en varning om att ta bort oanvänd CSS.
Tack och lov finns det ett väldigt enkelt sätt att göra det på. Du behöver inte ha några speciella tekniska kunskaper för att kunna ta bort oanvända CSS och JS från din WordPress-sajt.
Detta är på grund av en fantastisk plugin känd som Asset CleanUp: Page Speed Booster. Med detta plugin är det lika enkelt att ta bort oanvänd CSS som att klicka på några knappar. Alternativt, om du inte har något emot att spendera några dollar om året, med WP Rocket, det finns en borttagen oanvänd CSS-knapp, aktivera den bara så tar plugin-programmet bort all oanvänd CSS automatiskt.
Checkout: Topp 7 hanterade WordPress-värd för Google Cloud
Vad är oanvänd CSS?
Oanvänd CSS är en CSS-fil som finns på en sida men som oftast inte behövs för att sidan ska laddas. När en besökare öppnar en webbplats måste webbläsaren vanligtvis ladda ner, analysera och bearbeta alla externa stilmallar på den besökta sidan innan den kan visa sidinnehållet för besökaren. Om någon CSS finns på en sådan sida som inte används på sidan kommer webbläsaren att slösa bort sin tid på den.
Ett klassiskt exempel på detta är de flesta kontaktformulärplugins som används. Dessa plugins används för det mesta endast på sidan Kontakta oss, men laddar dess CSS på hela webbplatsen. Det spelar ingen roll om det är hemsidan där den inte används, CSS kommer att laddas.
Om det finns för många CSS som inte behövs men som laddar och fördröjer webbläsarens tid att läsa och visa en sida, kan det bli ett problem.
Förutom plugins skriver temautvecklare en hel del saker i style.css som oftast inte behövs. Men oavsett om det behövs eller inte, de laddas närhelst din webbplats laddas!
En oanvänd CSS kanske inte är ett problem men mycket oanvänd CSS kan påverka laddningstiden för din webbplats.
Checkout: Topp 10 snabbaste och bästa WordPress-teman
Hur man identifierar oanvänd CSS
Att hitta oanvända CSS och JS är en mycket enkel sak att göra. Det finns två tillvägagångssätt som jag kommer att rekommendera.
En är att analysera din webbplats genom Google PageSpeed Insight. Kontrollera om din webbplats har ett problem med borttagning av oanvänd CSS. Klicka på den så kommer du att kunna identifiera den komponent på din webbplats som är ansvarig för det.
Du kan se ovanifrån att det finns ett fall av oanvänd CSS inspelad. Jag kan se plugin och platsen för den oanvända CSS genom att titta på detta.
Det andra alternativet är att få en mer detaljerad analys. Du kan uppnå detta genom att använda Chrome Dev-verktyg.
Öppna Chrome Dev-verktyg i din Chrome-webbläsare och gå sedan till täckning. Klicka sedan på omladdningsknappen i täckningsområdet. Du kan hitta en omfattande guide om hur du gör detta i Google Developers-verktyget.
Det andra alternativet är att använda jitbit för att skanna efter oanvända CSS-väljare. Du kan också använda PurifyCSS för att hitta oanvänd CSS
Hur man tar bort oanvänd CSS
Följ dessa steg för att ta bort oanvänd CSS från WordPress:
1. Installera Asset CleanUp
Gå till plugin och sedan Lägg till ny. Sedan skriver du "Asset CleanUp" i sökrutan på sidan Lägg till nytt plugin. Installera och aktivera plugin-programmet.
2. Gå till plugin-inställningar
För att komma åt plugin-inställningar, från WordPress instrumentpanel klicka på inställningar och klicka sedan på Asset CleanUp.
3. Ladda bort oönskad CSS och JS
På plugin-inställningarna kan du behöva acceptera att du vet hur plugin fungerar under stripping fat tap innan du börjar.
För att ladda ner CSS och JS klicka på CSS och JSS manager. Därifrån kan du ta bort alla CSS och JS som du inte behöver. Du kan ta bort den för bara startsidan, för hela webbplatsen eller för en specifik URL. Du kan också ta bort för inlägg, sidor eller kategorier.
Ett exempel är att ta bort alla kontaktformulär från att laddas för hela webbplatsen förutom kontakta oss-sidan
Ta dig tid och ladda ur alla CSS och JS som du vet inte behövs. Se till att du testar din webbplats när du är klar för att säkerställa att allt är bra.
Ta bort oanvända CSS WordPress-plugins
Här är några plugins du kan använda för att ta bort oanvänd CSS i WordpPress:
1. Asset CleanUp: Page Speed Booster
Asset CleanUp: Page Speed Booster gör det enkelt att ta bort oanvänd CSS och JSin WordPress även för nybörjare. Allt du behöver göra är att avaktivera en viss CSS som inte behövs för en viss sida.
Du kan också inaktivera enbart för enskilda inlägg. Med premiumversionen kan du avaktivera oanvänd CSS/JS med plugins.
Detta plugin är ett komplett prestandaplugin med många andra alternativ för att snabba upp WordPress. Att ta bort oanvänd CSS/JS är bara en del av det.
I det här inlägget använde jag detta plugin har en guide.
2. WP Rocket
WP Rocket är WordPress premiumprestandaplugin nummer ett. Om du är en noob, jag menar om du inte är erfaren eller bekväm med WordPress, så är WP Rocket det enklaste sättet att ta bort oanvänd CSS för.
Du måste köpa plugin-programmet, när du har gjort det kan du ladda ner det från ditt konto eller kontrollera din e-post för en nedladdningslänk.
Installera plugin-programmet via Dashboard>plugins>Add new>Upload.
Navigera bara till WP Rocket-inställningarna och klicka sedan på fliken "Filoptimering". Scrolla sedan ner och du kommer att se "Ta bort oanvänd CSS", markera rutan, spara och rensa cacheminnet.
3. Perfmatters
Perfmatters är ett premiumplugin utvecklat av Brian Jackson och hans bror, Brett Jackson. Denna plugin kan hjälpa till att ta bort oanvänd CSS mycket enkelt.
Först måste du köpa plugin. Installera den sedan. Aktivera licens. När du navigerar till inställningar aktiverar du skripthanteraren.
Gå bara till valfri sida eller inlägg på din webbplats, du kommer att se skripthanterarens ikon på instrumentpanelens meny, klicka på den. Du kommer att kunna ta bort oanvända CSS och JS från sidan eller globalt.
Detta plugin är ett prestandaplugin, kommer med många andra alternativ för att påskynda WordPress. Att ta bort oanvänd CSS/JS är en del av det.
4. CSS JS Manager
CSS JS Manager kan specifikt ta bort CSS eller JS från mobil eller skrivbord. Beroende på vad du vill uppnå.
Denna plugin kan också skjuta upp laddningen av CSS- eller JS-filer.
Slutsats
Om du har många oanvända CSS och JS kommer du att märka en stor förbättring i hastighet och prestandapoäng.
Det kan vara omöjligt att ta bort all oanvänd CSS men du kan få dem till ett minimum. Jag använder Asset CleanUp för att ta bort oanvänd CSS för TargetTrend.
Kom ihåg, optimera men var inte för besatt av det, om du inte vill att din webbplats ska se ut den snabbaste webbplatsen i världen.
Läs också:
Hur man eliminerar renderingsblockerande resurser i WordPress
Relaterade artiklar
