Hvis WordPress-nettstedet ditt bruker et betalt WordPress-tema eller et populært fra det offisielle WordPress-temalageret, er det sannsynlig at temaet blir utviklet for en rekke brukstilfeller. Og du bruker kanskje bare et lite sett av alle funksjonene som er tilgjengelige i temaet.
I så fall laster nettstedet ditt en hel masse ubrukt CSS som ikke er nødvendig for å style sidene til nettstedet ditt. For eksempel kan WordPress-temaet du bruker ha stiler for WooCommerce-sider også, men hvis du bare kjører en blogg på WordPress-nettstedet ditt, bruker du ikke CSS-en som er inkludert for WooCommerce-sider på nettstedet ditt og serverer dermed ubrukt CSS til brukerne.
Hvis du har testet nettstedet ditt på Google Pagespeed-verktøyet, er du sannsynligvis allerede klar over at nettstedet ditt har ubrukte CSS-problemer. I denne veiledningen viser vi deg hvordan du kan se etter ubrukt CSS først, og deretter bruke et gratis verktøy for å fjerne ubrukt CSS fra WordPress-nettstedet ditt.
Hvordan sjekke ubrukt CSS
Google Chrome DevTools (den du ser når du klikker på "Inspiser"-alternativet i kontekstmenyen) har en dekningsfunksjon i Kilder-fanen. Du kan bruke alternativet Dekning for å finne ubrukte CSS og JS som nettstedet ditt laster inn.
- Åpne nettstedet ditt i Chrome på skrivebordet.
- Høyreklikk på et tomt mellomrom på nettstedet ditt, og velg Undersøke fra kontekstmenyen.
- Klikk på Kilder fanen, trykk Ctrl + Shift + P for å åpne et kommandovindu, og skriv deretter dekning og velg Start instrumentdekning og last inn siden på nytt fra tilgjengelige kommandoer.
- Under kategorien Dekning klikker du på URL-filter feltet og skriv inn nettstedets rotdomene her for å vise bare interne CSS/JS-filer.
└ Sjekk Ubrukte bytes kolonne for å se prosentandelen av data som lastes inn i en CSS/JS-fil fra temaet ditt.
- Klikk på en CSS-fil for å se den ubrukte CSS-en (merket med røde søyler) lastet av nettstedet ditt. CSS-en som brukes på den gjeldende siden vil vises med grønne søyler.
Når du har analysert all ubrukt CSS som lastes inn på nettstedet ditt, er det på tide å fjerne det. Det er flere gratis verktøy tilgjengelig for å fjerne ubrukt CSS fra nettsider. Nedenfor er et av de populære verktøyene jeg har testet og brukt på mine egne prosjekter.
Bruk PurifyCSS Online for å fjerne ubrukt CSS
Vanligvis kan du finne en plugin for nesten alt i WordPress. Men for å fjerne ubrukt CSS, er det dessverre ikke en eneste plugin tilgjengelig. Så vi kommer til å bruke manuelle ikke-wordpress-spesifikke verktøy for å fjerne ubrukt CSS fra nettstedet ditt.
PurifyCSS er mest vennlig ikke-utviklerverktøy du kan finne for å håndtere ubrukt CSS. Verktøyet har et enkelt brukergrensesnitt som lar brukere oppgi enten nettadressen ELLER HTML- og CSS-koden. For WordPress bruker vi URL-alternativet og gir lenker til alle typer sider på nettstedet ditt for å la verktøyet ta CSS fra alle og optimalisere for ubrukt CSS.
Her er en rask liste over sider du bør legge inn i verktøyet:
- Hjemmeside-URL
- Flere postside-URLer fra hver kategori på nettstedet ditt
└ Dette er for å sikre at CSS er inkludert for alle innleggselementer.
- Kontakt, Om, Personvern og alle slags forskjellige sider du kan ha på nettstedet ditt.
- Arkivside, Søkeside, Forfattersider
- Egendefinerte innleggstyper
Varmt tips: Lag et "funksjoner"-innlegg/-side med alle temaelementer som du bruker eller kan bruke i fremtiden, for eksempel en tabell, bildegalleri, kode, forhåndsordnede lister, uordnede lister, skjemaer, faner, trekkspill, Gutenberg-blokker som du vanligvis bruker , etc.
Bruk denne "funksjonene"-innleggs-URLen i PurifyCSS Online-verktøyet for å sikre at CSS for de ofte brukte elementene er inkludert.
Slå den Rydd opp i CSS når du har lagt til alle relevante URL-typer fra nettstedet ditt i PurifyCSS Online-verktøyet.
Kopier den nye CSS generert av verktøyet og bruk den på nettstedet ditt. Vær sikker på at du sikkerhetskopiere den originale style.css og andre CSS-filer i temaet ditt før du erstatter den nye CSS generert av PurifyCSS.
Tips: Du kan enten bruke den innebygde WordPress Theme Editor for å redigere temaets CSS-filer, eller du kan bruke et FTP/SFTP-program for å koble til serveren og enkelt redigere filer ved hjelp av en Notisblokk-editor.