Fiks «Remove unused CSS» i Lighthouse.

Hva er ubrukt CSS?

Ubrukt CSS består av CSS-deklarasjoner som ikke brukes noe sted på en nettside.
Det er helt normalt at noe av CSS-en ikke brukes. For eksempel fordi noen CSS-deklarasjoner er skrevet for en annen enhet som desktop eller mobil. Noen ganger  fordi et element som er beskrevet i stilarket (som en knapp) ikke brukes på denne spesifikke siden.
Ubrukt CSS oppstår ofte når du bruker et rammeverk som bootstrap, der det som standard er beskrevet mange flere elementer i CSS-en enn du noen gang vil bruke. Eller når du har redesignet siden din, men glemt å fjerne de gamle CSS-elementene.

Hvorfor er ubrukt CSS dårlig for sidehastighet?

CSS bremser sideinnlastingen. Når en side lastes, henter nettleseren først HTML-en fra denne siden. Denne HTML-en konverteres til DOM-noder. Deretter henter nettleseren alle stilark. Stilene som finnes i disse CSS-filene konverteres også til et annet format, nemlig CSSOM. DOM og CSSOM kombineres til et rendertre. Først når dette rendertreet er bygget, begynner nettleseren å tegne det første innholdet.
På grunn av denne mekanismen vil CSS-filer alltid blokkere renderingen av nettsiden din. Når en CSS-fil er større enn den burde være, tar det lengre tid å laste ned filen, og det forårsaker den første forsinkelsen.  Når en CSS-fil inneholder ubrukt CSS, tar det lengre tid å bygge rendertreet. 

Hvordan finne ubrukt CSS manuelt?

I Google Chrome kan du se ubrukt CSS i Code Coverage-oversikten. Code Coverage er en del av Chrome DevTools. DevTools er en serie innebygde verktøy som er tilgjengelige i alle Chrome-nettlesere. 

Først åpner du DevTools med Ctrl-Shift-J -snarveien. Deretter trykker du Ctrl-Shift-P  for å åpne kommandopaletten. Skriv nå «coverage». Velg coverage og last siden på nytt. Du vil nå se en oversikt over CSS- og JavaScript-filene som lastes og brukes av siden. I tillegg kan du se hvor store filene er og hvor mye av koden som faktisk brukes.
Klikk på en CSS-fil for å se hvilke CSS-regler som brukes (grønn) og hvilke CSS-regler som ikke brukes (rød) på gjeldende side. 

Hvordan løse advarselen «remove unused CSS»

Det finnes flere måter å løse meldingen «remove unused CSS» i Lighthouse. Hvis det av en eller annen grunn ikke er mulig å fikse advarselen, kan du optimalisere CSS-leveringen for å sikre at ubrukt CSS har mindre innvirkning på lastetiden til siden din. Nedenfor vil jeg kort diskutere alternativene du har for å fikse ubrukt CSS.

1. Slett ubrukt CSS for hånd

Den mest logiske og beste måten, men også den mest arbeidskrevende, er selvfølgelig å manuelt fjerne ubrukt CSS. Stegene er enkle:

1. Ta sikkerhetskopi av de originale CSS-filene dine. Du kan komme til å fjerne for mye CSS.
2. Åpne Code Coverage-fanen i Google Chrome og se per CSS-fil hvilke deklarasjoner du ikke trenger.
3. Åpne CSS-filen på serveren (eller lokalt) og sjekk hver ubrukte CSS-deklarasjon. Avgjør om den kan fjernes. Men vær forsiktig: en ubrukt CSS-deklarasjon betyr ikke at du aldri vil trenge denne deklarasjonen. Det må du vurdere selv!
4. Sjekk per CSS-deklarasjon om den er duplisert i CSS-en. Duplisert CSS vil også bli flagget som ubrukt. 
5. Sjekk hver CSS-regel for forkortelsesmetoder.  Er det mulig å forkorte CSS-en? Da forkorter du den!

2. Del CSS-en opp i flere filer

Det finnes en enkel måte  å raskt redusere antall CSS-regler! Last bare inn stilene du trenger for enheten din. Siden din besøkes ofte på mobil. Du trenger egentlig ikke å laste ned stilene for desktop og print for denne mobile enheten. Å ikke laste ned disse stilene sparer tid og forkorter dermed den kritiske forespørselskjeden i Lighthouse.

For å oppnå dette, bruk media-attributtet. Media-attributtet sikrer at et stilark kun brukes hvis media-attributtet samsvarer med mediet du bruker for øyeblikket.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" 
 media="screen and (min-device-width: 1024px)">

3. Bruk et automatisk CSS-oppryddingsverktøy

Det finnes en rekke smarte verktøy som automatisk kan rydde opp i CSS-filene dine og fjerne eventuelle ubrukte CSS-referanser.
Selv om verktøyene fungerer fantastisk bra, er de ikke feilfrie. Noen ganger fjerner disse verktøyene for mange CSS-deklarasjoner. Så bruk dem forsiktig og sjekk alltid CSS-en din selv.
De beste CSS-oppryddingsverktøyene er PurifyCSS og PurgeCSS . Disse verktøyene kjører på NodeJS. NodeJS er en JavaScript-kjøretid der du kan kjøre JavaScript-skript, basert på V8 JavaScript-motoren fra Google selv.  Du kan også prøve purifyCSS online.

4.  Critical CSS

Critical CSS er en samling CSS-regler som trengs i viewporten (den synlige delen) av nettstedet ditt. Med andre ord:  Critical CSS er den CSS-en som kreves for å rendere den synlige delen av siden din.

Det finnes en rekke verktøy som kan filtrere og ekstrahere CSS fra siden din. Critical CSS plasseres deretter inline, i head-delen av siden din, mens den opprinnelige CSS-filen lastes asynkront (for nettleseren å bruke senere).

Dette løser ikke problemet med ubrukt CSS fullstendig. Til slutt vil den ubrukte CSS-en bli lastet og analysert, men nettleseren din vil ikke bli «plaget» av det under den første renderfasen.

Det mest brukte verktøyet for å finne og ekstrahere critical CSS er NodeJS-skriptet Critical . Det finnes også nettbaserte verktøy som Critical Path CSS Generator og en annen Critical Path CSS Generator

5. Minifiser CSS-filene

Ubrukt CSS bremser en side, som du leste ovenfor, på 2 måter. Den første er fordi CSS-filene er større og derfor tar lengre tid å laste ned. 

Vi kan motvirke dette problemet ved å redusere CSS-filstørrelsen ved å minifisere CSS-filene. Det gjøres med en CSS-minifiserer.  En CSS-minifiserer krymper CSS-filer ved å fjerne mellomrom, kommentarer og formatering. En CSS-minifiserer kan også omskrive variabler og CSS-kode slik at det tar færre bytes å overføre.

Et velkjent CSS-minifiseringsverktøy er css-minify . Minifiser alle CSS-filene dine via kommandolinjen med kommandoen css-minify -f filename. Det finnes også diverse nettbaserte CSS-minifiserere som cssminifier.com

6. Kompiler CSS-rammeverket ditt på nytt

Bruker du et CSS-rammeverk som bootstrap CSS? Det er et CSS-rammeverk du kan bruke til å style hele nettstedet ditt. Dette rammeverket er så komplett at sjansen er stor for at du aldri vil bruke store deler av det.

Heldigvis har skaperne av bootstrap og andre CSS-rammeverk tatt hensyn til dette. Dette rammeverket er skrevet i SASS. Det er et språk som ligner veldig på CSS. Det består av flere små SASS-filer som kan bruke enkle variabler og funksjoner. Dette gjør det enkelt å justere og tilpasse  rammeverket selv med litt kunnskap. Du kan bare utelate deler du ikke bruker og enkelt kompilere det til 1 endelig CSS-fil.

Sørg også for at du ikke laster inn et CSS-rammeverk umodifisert fra standard-CDN. Last ned rammeverket og kompiler det med SASS nøyaktig slik du vil ha det, med bare CSS-klassene du bruker.

7. Vurder en annen CSS-strategi

Vil du virkelig være rask? Da kan det være en idé å revurdere CSS-strategien din. Hvordan det gjøres avhenger av nettstedet ditt. Det finnes flere veier som fører til Roma.

La oss ta nettstedet vårt som eksempel. Vi laster bare inn CSS-en vi faktisk  trenger per side. CSS-klassene importeres automatisk av CMS-et vårt bare når de trengs. Vi plasserer CSS-en inline (i head-delen av siden). Det sparer oss for en ekstra nettverksforespørsel. Denne løsningen er lynrask og enkel å vedlikeholde.

En oppmerksom leser tenker kanskje: «Hva med CSS-caching? CSS er raskere når de endelige CSS-filene er cachet.» Ja, det stemmer. Derfor forhåndslaster vi alle lenker i det synlige viewporten, slik at en side alltid hentes fra cache, inkludert CSS.

Fiks «remove unused CSS» i WordPress

Er du klar til å fjerne ubrukt CSS? Slik kommer du i gang i WordPress. I WordPress kan CSS legges til på 3 måter:

• Direkte i malen . I malmappen din er det en fil som heter header.php. I denne filen er det ofte malspesifikke CSS-filer. Du kan endre disse CSS-filene slik jeg beskrev ovenfor. Ikke glem å ta sikkerhetskopi av de originale CSS-filene dine, og husk at en temaoppdatering kan overskrive CSS-filene dine.
• CSS lagt til av en plugin . Plugins i WordPress kan legge til ubegrensede CSS-filer i HTML-en din. Disse pluginene bruker funksjonene wp_register_style og wp_enqueue_style. De fleste plugins bryr seg ikke om å sjekke om de er aktive på gjeldende side. De injiserer bare CSS på hver side, selv om det ikke er behov for den pluginspesifikke CSS-en på den siden. Det kommer jeg over hver dag. Hvis det er tilfellet, kan du bruke funksjonene wp_dequeue_style og wp_deregister_style for å fjerne disse stilene fra sidene. Det er et presist arbeid. Hvis du er usikker på hvordan du fikser dette, kontakt utvikleren din eller spør meg om hjelp. Du kan også bruke Asset CleanUp-pluginen der du kan angi per sidetype hvilke plugins, stiler og skript som kan lastes.
• CSS lagt til av JavaScript . Det er også mulig å «injisere» stilark på siden ved hjelp av JavaScript. Akkurat som stilark kan du deaktivere disse skriptene per side med wp_dequeue_script-funksjonen . Når JavaScript-et ikke lastes, vil heller ikke stilarket bli injisert.
  Hvis du trenger skriptet og stilarket, men ikke umiddelbart etter lasting, er det mulig å utsette lastingen av JavaScript via script defer-attributtet. Gjør det ved å legge til denne koden i functions.php

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );