Hvis dit WordPress-websted bruger et betalt WordPress-tema eller et populært et fra det officielle WordPress Themes-lager, er der sandsynlighed for, at temaet udvikles til en række forskellige anvendelsessager. Og du bruger muligvis kun et lille sæt af alle de tilgængelige funktioner i temaet.
I så fald indlæser dit websted en hel masse ubrugt CSS, som ikke er påkrævet for at style dit websteds sider. For eksempel kan det WordPress-tema, du bruger, også have stilarter til WooCommerce-sider, men hvis du kun kører en blog på dit WordPress-websted, bruger du ikke den CSS, der er inkluderet til WooCommerce-sider på dit websted og serverer dermed ubrugt CSS til brugerne.
Hvis du har testet dit websted på Google Pagespeed-værktøjet, er du sikkert allerede klar over, at dit websted har ubrugte CSS-problemer. I denne vejledning viser vi dig, hvordan du tjekker for ubrugt CSS først, og brug derefter et gratis værktøj til at fjerne ubrugt CSS fra dit WordPress-websted.
Sådan tjekker du ubrugt CSS
Google Chrome DevTools (den du ser, når du klikker på "Inspicer"-indstillingen i kontekstmenuen) har en dækningsfunktion på fanen Kilder. Du kan bruge Dækningsindstillingen til at finde ubrugte CSS og JS, som dit websted indlæser.
- Åbn dit websted i Chrome på skrivebordet.
- Højreklik på et tomt hvidt område på dit websted, og vælg Inspicere fra kontekstmenuen.
- Klik på Kilder fanen, tryk på Ctrl + Shift + P for at åbne et kommandovindue, og skriv derefter dækning og vælg Start instrumentdækning og genindlæs siden fra tilgængelige kommandoer.
- Under fanen Dækning skal du klikke på URL-filter og indtast dit websteds roddomæne her for kun at vise interne CSS/JS-filer.
└ Kontroller Ubrugte bytes kolonne for at se procentdelen af data, der indlæses i en CSS/JS-fil fra dit tema.
- Klik på en CSS-fil for at se den ubrugte CSS (markeret med røde bjælker), der er indlæst af dit websted. Den CSS, der bliver brugt på den aktuelle side, vil blive vist med grønne bjælker.
Når du har analyseret al ubrugt CSS, der bliver indlæst på dit websted, er det tid til at fjerne det. Der er flere gratis værktøjer tilgængelige til at fjerne ubrugt CSS fra websider. Nedenfor er et af de populære værktøjer, som jeg har testet og brugt på mine egne projekter.
Brug PurifyCSS Online til at fjerne ubrugt CSS
Normalt kan du finde et plugin til næsten alt i WordPress. Men for at fjerne ubrugt CSS er der desværre ikke et enkelt plugin tilgængeligt. Så vi vil bruge manuelle ikke-wordpress-specifikke værktøjer til at fjerne ubrugt CSS fra dit websted.
PurifyCSS er den mest venligt ikke-udviklerværktøj du kan finde for at håndtere ubrugt CSS. Værktøjet har en simpel brugergrænseflade, så brugerne kan angive enten webstedets URL ELLER HTML- og CSS-koden. Til WordPress bruger vi URL-indstillingen og giver links til alle slags sider på dit websted for at lade værktøjet fange CSS fra alle og optimere til ubrugt CSS.
Her er en hurtig liste over sider, du bør sætte ind i værktøjet:
- Hjemmeside URL
- Flere postside-URL'er fra hver kategori på dit websted
└ Dette er for at sikre, at CSS er inkluderet for alle post-elementer.
- Kontakt, Om, Privatliv og alle mulige forskellige sider, du måtte have på dit websted.
- Arkivside, Søgeside, Forfattersider
- Tilpassede indlægstype sider
Hot Tip: Opret et "funktions"-indlæg/-side med alle temaelementer, som du bruger eller kan bruge i fremtiden, såsom en tabel, billedgalleri, kode, forud, bestilte lister, uordnede lister, formularer, faner, harmonikaer, Gutenberg-blokke, som du generelt bruger , etc.
Brug denne "funktioner"-indlægs-URL i PurifyCSS Online-værktøjet for at sikre, at CSS for de almindeligt anvendte elementer er inkluderet.
Tryk på Ryd op i CSS knappen, når du har tilføjet alle relevante URL-typer fra dit websted til PurifyCSS Online-værktøjet.
Kopier den nye CSS genereret af værktøjet og brug den på dit websted. Vær sikker på at du sikkerhedskopiere den originale style.css og andre CSS-filer i dit tema, før du erstatter den nye CSS genereret af PurifyCSS.
Tip: Du kan enten bruge den indbyggede WordPress Theme Editor til at redigere dit temas CSS-filer, eller du kan bruge et FTP/SFTP-program til at oprette forbindelse til serveren og nemt redigere filer ved hjælp af en Notepad-editor.