När du körde ett hastighetstest kanske du har lagt märke till PageSpeed Insights varnar för borttagning av oanvänd CSS. Vill du ta bort oanvänd CSS från din WordPress-webbplats för att ladda snabbare och få bättre prestandabetyg?
Det finns mycket CSS-kod som läggs till av WordPress-teman och plugins som du inte behöver. WordPress prestanda och användarupplevelsen kan förbättras genom att ta bort oanvänd CSS-kod. Vi visar i den här artikeln hur du enkelt kan ta bort oanvänd CSS från din WordPress-webbplats utan att din webbplats slutar fungera.
Ta bort oanvänd CSS i WordPress med olika sätt
Om du vill minska mängden oanvänd CSS på din WordPress-webbplats finns det några olika metoder du kan prova.
Även om det skulle vara möjligt att ta bort all onödig CSS i WordPress, skulle det vara en ganska svår uppgift. Dessutom, på grund av hur WordPress fungerar bakom kulisserna, kan det vara svårt för vissa användare att hitta och ta bort onödig CSS.
I så fall visar vi dig olika sätt att ta bort oanvänd CSS, och du kan välja den metod som bäst passar dina behov.
Hitta dina största CSS-filer
För att se dina mest omfattande CSS-filer, sortera din täckningsrapport efter " användningsvisualisering" i Chrome Dev Tools . URL:er innehåller vanligtvis namnet på plugin-programmet, temat eller tredjepartskod som genererade filen. Som ett resultat blir det nu enklare för dig att avgöra vad som behöver optimeras.
Ta bort oanvänd CSS med använd CSS i en separat fil
Det är snabbare att skapa en separat fil eftersom HTML-storleken inte ökar, och filen kan cachas, till skillnad från inlining. Den laddas också i en separat fil av LiteSpeed Caches CSS och FlyingPress. Dessutom WP Rocket för poäng snarare än besökare, till skillnad från de flesta andra plugins, som använder olika filer eftersom de är snabbare.
Undvik plugins som lägger till CSS
Verktyg som Query Monitor och WP Hive är bra, men de visar inte alltid om ett plugin lägger till extra CSS/JS i frontend. Som ett resultat kan pluginets fulla effekt bara observeras efter att du har testat din webbplats igen efter att du har lagt till innehåll i frontend. De vanligaste bovarna är gallerier, sliders, kontaktformulär, kommentarer, chatt, kalendrar och sidbyggarplugins relaterade till design.
Använd ett lättviktigt tema + sidbyggare.
Front-end-gränssnittet är överbelastat med CSS, JavaScript och typsnitt. Som ett resultat garanteras en långsam webbplats i kombination med extra sidbyggarplugins som Elementor Pro och Ultimate Addons.
Aktivera CSS-optimeringar i sidbyggare
Bland dessa inställningar finns Elementors experiment och Divis prestandainställningar, vilka inkluderar flera alternativ för att minska CSS-storleken (t.ex. förbättrad laddning av resurser och CSS i Elementor och dynamisk CSS i Divi). Generellt sett får du bättre resultat om du aktiverar högre prestanda.
Inaktivera ikoner om du inte använder dem
Om du inte använder Elementor-ikoner, stäng av dem. För Google Fonts + Font Awesome kan du göra detta i Perfmatters eller Elementors dokumentation.
Ta bort CSS i plugins för avlastning av resurser
Med Perfmatters kan du inaktivera CSS/JS (eller hela plugins) där de inte behövs, ta bort oanvänd CSS och ersätta YouTubes iframes med förhandsgranskningsbilder. Återstående oanvänd CSS kan göras mer tillgänglig med alla dessa metoder. CSS/JS-filer kan också inaktiveras med Asset CleanUp Plugin.
Lazy Load-bakgrundsbilder hittades i CSS
De flesta cache-plugins laddar inte bakgrundsbilder om de är packade i en separat CSS-fil.
Om du därför vill lazyloada bakgrundsbilder, vänligen se dokumentationen för ditt cache-plugin. FlyingPress levereras med en lazy-bg-hjälpklass som du kan lägga till i den extra CSS-klassen, till skillnad från WP Rocket som kräver inline HTML. En lazy-bg-hjälpklass kan läggas till manuellt, eller så har Optimole en lösning med CSS-selektorer.
Ta bort Gutenberg CSS
Anta att du kan ta bort Gutenberg-blockbiblioteket från kön om du inte använder Gutenberg-block. Använd kodavsnitt eller functions.php för att lägga till detta.
Kombinera CSS (eller inte)
CSS/JS-storleken bör inte överstiga 10 KB om du kombinerar dem. I de flesta fall bör CSS och JavaScript inte kombineras eftersom det är nästan omöjligt.
Inaktivera WooCommerce-stilar
Som standard laddar WooCommerce stilar över hela din webbplats. Om du bara använder dessa stilar på e-handelssidor kan du inaktivera dem överallt. WooCommerce har dokumentation, men vi rekommenderar att du inaktiverar WooCommerce Bloat, som har många fler inställningar för att ta bort bloat.
Hitta fler sådana artiklar på Seahawk Media .
