Løs "Remove unused CSS" i Lighthouse.

Hvad er ubrugt CSS?

Ubrugt CSS består af CSS-deklarationer, der ikke bruges nogen steder på en webside.
Det er helt normalt, at noget af CSS'en ikke bruges. For eksempel fordi nogle CSS-deklarationer er skrevet til en anden enhed som en desktop eller mobil. Nogle gange  fordi et element, der er beskrevet i stylesheetet (som en knap), ikke bruges på denne specifikke side.
Ubrugt CSS forekommer ofte, når du bruger et framework som bootstrap, hvor der som standard er beskrevet mange flere elementer i CSS'en, end du nogensinde vil bruge. Eller når du har redesignet din side, men glemte at fjerne de gamle CSS-elementer.

Hvorfor er ubrugt CSS dårligt for sidehastighed?

CSS bremser sideindlæsningen. Når en side indlæses, henter browseren først HTML'en fra denne side. Denne HTML konverteres til DOM-noder. Derefter henter browseren alle stylesheets. Stilene i disse CSS-filer konverteres også til et andet format, nemlig CSSOM. DOM'en og CSSOM'en kombineres til et renderingstræ. Først når dette renderingstræ er bygget, begynder browseren at male det første indhold.
På grund af denne mekanisme vil CSS-filer altid blokere renderingen af din webside. Når en CSS-fil er større, end den burde være, tager det længere tid at downloade denne fil, og det forårsager den første forsinkelse.  Når en CSS-fil indeholder ubrugt CSS, tager det længere tid at opbygge renderingstræet. 

Hvordan finder man ubrugt CSS manuelt?

I Google Chrome kan du se ubrugt CSS i Code Coverage-oversigten. Code Coverage er en del af Chrome DevTools. DevTools er en række indbyggede værktøjer, der er tilgængelige i enhver Chrome-browser. 

Åbn først DevTools med Ctrl-Shift-J genvejen. Tryk derefter Ctrl-Shift-P  for at åbne kommandopaletten. Skriv nu 'coverage'. Vælg coverage og genindlæs siden. Du vil nu se en oversigt over de CSS- og JavaScript-filer, der indlæses og bruges af siden. Derudover kan du se, hvor store filerne er, og hvor meget af koden der faktisk bruges.
Klik på en CSS-fil for at se, hvilke CSS-regler der bruges (grønne), og hvilke CSS-regler der ikke bruges (røde) på den aktuelle side. 

Sådan løser du advarslen 'remove unused CSS'

Der er flere måder at løse meddelelsen 'remove unused CSS' i Lighthouse. Hvis det af en eller anden grund ikke er muligt at løse advarslen, kan du optimere CSS-leveringen for at sikre, at ubrugt CSS har mindre indvirkning på indlæsningstiden for din side. Jeg vil kort gennemgå de muligheder, du har for at løse ubrugt CSS nedenfor.

1. Slet ubrugt CSS manuelt

Den mest logiske og bedste måde, men også den mest arbejdskrævende måde, er naturligvis manuelt at fjerne ubrugt CSS. Trinene er ligetil:

1. Tag backup af dine originale CSS-filer. Du fjerner måske for meget CSS.
2. Åbn fanen Code Coverage i Google Chrome, og se pr. CSS-fil, hvilke deklarationer du ikke har brug for.
3. Åbn CSS-filen på serveren (eller lokalt), og tjek hver ubrugt CSS-deklaration. Afgør, om den kan fjernes. Men vær forsigtig: en ubrugt CSS-deklaration betyder ikke, at du aldrig vil få brug for denne deklaration. Det skal du selv vurdere!
4. Tjek pr. CSS-deklaration, om den ikke er duplikeret i CSS'en. Duplikeret CSS vil også blive markeret som ubrugt. 
5. Tjek hver CSS-regel for shorthand-metoder.  Er det muligt at forkorte CSS'en? Så forkort den!

2. Opdel CSS'en i flere filer

Der er en simpel måde  hurtigt at reducere antallet af CSS-regler! Indlæs kun de styles, du har brug for til din enhed. Din side besøges ofte på mobil. Du behøver faktisk ikke at downloade stylene til desktop og print til denne mobile enhed. Ikke at downloade disse styles sparer tid og forkorter dermed den kritiske anmodningskæde i Lighthouse.

For at opnå dette skal du bruge media-attributten. Media-attributten sikrer, at et stylesheet kun bruges, hvis media-attributten matcher det medie, du i øjeblikket bruger.

<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. Brug et automatisk CSS-oprydningsværktøj

Der findes en række smarte værktøjer, der automatisk kan rydde op i dine CSS-filer og fjerne eventuelle ubrugte CSS-referencer.
Selvom værktøjerne fungerer utroligt godt, er de ikke fejlfrie. Nogle gange fjerner disse værktøjer for mange CSS-deklarationer. Så brug dem forsigtigt og tjek altid din CSS selv.
De bedste CSS-oprydningsværktøjer er PurifyCSS og PurgeCSS . Disse værktøjer kører på NodeJS. NodeJS er en JavaScript-runtime, hvor du kan køre JavaScript-scripts, baseret på V8 JavaScript-motoren fra Google selv.  Du kan også prøve purifyCSS online.

4.  Critical CSS

Critical CSS er en samling af CSS-regler, der er nødvendige i viewporten (den synlige del) af din hjemmeside. Med andre ord:  Critical CSS er den CSS, der kræves for at rendere den synlige del af din side.

Der er en række værktøjer, der kan filtrere og udtrække CSS fra din side. Den Critical CSS placeres derefter inline i head'en på din side, mens de originale CSS-filer indlæses asynkront (til browseren at bruge senere).

Dette løser ikke helt problemet med ubrugt CSS. Til sidst vil den ubrugte CSS blive indlæst og parset, men din browser vil ikke blive 'generet' af den under den første renderingsfase.

Det mest brugte værktøj til at finde og udtrække critical CSS er NodeJS-scriptet Critical . Der er også onlineværktøjer som Critical Path CSS Generator og endnu en Critical Path CSS Generator

5. Minificer CSS-filerne

Ubrugt CSS bremser en side, som du læste ovenfor, på 2 måder. Den første er, fordi CSS-filerne er større og derfor tager længere tid at downloade. 

Vi kan modvirke dette problem ved at reducere CSS-filstørrelsen ved at minificere CSS-filerne. Det gøres med en CSS-minifier.  En CSS-minifier formindsker CSS-filer ved at fjerne mellemrum, kommentarer og formatering. Desuden kan en CSS-minifier omskrive variabler og CSS-kode, så det optager færre bytes at overføre.

Et velkendt CSS-minificeringsværktøj er css-minify . Minificer alle dine CSS-filer via kommandolinjen med kommandoen css-minify -f filename. Der findes også forskellige online CSS-minifiers som cssminifier.com

6. Genkompiler dit CSS-framework

Bruger du et CSS-framework som bootstrap CSS? Det er et CSS-framework, som du kan style hele din side med. Dette framework er så komplet, at du sandsynligvis aldrig vil bruge store dele af det.

Heldigvis har skaberne af bootstrap og andre CSS-frameworks taget højde for dette. Dette framework er skrevet i SASS. Det er et sprog, der minder meget om CSS. Det består af flere små SASS-filer, der kan bruge simple variabler og funktioner. Dette gør det nemt at tilpasse og personalisere  frameworket selv med en lille smule viden. Du kan bare udelade dele, du ikke bruger, og nemt kompilere det til 1 endelig CSS-fil.

Sørg også for, at du ikke indlæser et CSS-framework uændret fra den standard CDN. Download frameworket og kompiler det med SASS præcis, som du vil have det, med kun de CSS-klasser, du bruger.

7. Overvej en anden CSS-strategi

Vil du virkelig være hurtig? Så kan det være en idé at genoverveje din CSS-strategi. Hvordan det gøres, afhænger af din side. Der er flere veje, der fører til Rom.

Lad os tage vores side som eksempel. Vi indlæser kun den CSS, vi faktisk  har brug for pr. side. CSS-klasserne importeres automatisk af vores CMS, kun når de er nødvendige. Vi placerer CSS'en inline (i head'en på siden). Det sparer os for en ekstra netværksanmodning. Denne løsning er lynhurtig og nem at vedligeholde.

En opmærksom læser tænker måske: "Hvad med CSS-caching? CSS er hurtigere, når de endelige CSS-filer er cached. Ja, det er rigtigt. Derfor preloader vi alle links i den synlige viewport, så en side altid hentes fra cachen, inklusive CSS.

Løs 'remove unused CSS' i WordPress

Er du klar til at fjerne ubrugt CSS? Sådan kommer du i gang i WordPress. I WordPress kan CSS tilføjes på 3 måder:

• Direkte i skabelonen . I din skabelonmappe er der en fil, der hedder header.php. I denne fil er der ofte skabelonspecifikke CSS-filer. Du kan ændre disse CSS-filer, som jeg beskrev ovenfor. Glem ikke at tage backup af dine originale CSS-filer, og husk, at en temaopdatering kan overskrive dine CSS-filer.
• CSS tilføjet af et plugin . Plugins i WordPress kan tilføje ubegrænsede CSS-filer til din HTML. Disse plugins bruger funktionerne wp_register_style og wp_enqueue_style. De fleste plugins gider ikke tjekke, om de er aktive på den aktuelle side. De indsætter bare CSS på hver side, selvom der ikke er brug for det pluginspecifikke CSS på den side. Det støder jeg på hver dag. Hvis det er tilfældet, kan du bruge funktionerne wp_dequeue_style og wp_deregister_style til at fjerne disse styles fra siderne. Det er et præcist stykke arbejde. Hvis du er usikker på, hvordan du løser dette, så henvend dig til din udvikler eller bed mig om hjælp. Du kan også bruge Asset CleanUp-pluginnet, hvormed du kan indstille pr. sidetype, hvilke plugins, styles og scripts der må indlæses.
• CSS tilføjet af JavaScript . Det er også muligt at 'indsætte' stylesheets på siden ved hjælp af JavaScript. Ligesom stylesheets kan du deaktivere disse scripts pr. side med wp_dequeue_script-funktionen. Når JavaScript'en ikke indlæses, vil stylesheetet heller ikke blive indsat.
  Hvis du har brug for scriptet og stylesheetet, men ikke direkte efter indlæsning, er det muligt at udskyde indlæsningen af JavaScript via script defer-attributten. Gør det ved at tilføje denne kode 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 );