Korjaa "Remove unused CSS" -varoitus Lighthouse-työkalussa.

Mitä on käyttämätön CSS?

Käyttämätön CSS koostuu CSS-määrittelyistä, joita ei käytetä missään verkkosivulla.
On täysin normaalia, että osaa CSS:stä ei käytetä. Esimerkiksi siksi, että jotkin CSS-määrittelyt on kirjoitettu toiselle laitteelle, kuten työpöydälle tai mobiililaitteelle. Joskus  siksi, että tyylitiedostossa kuvattu elementti (kuten painike) ei ole käytössä tällä tietyllä sivulla.
Käyttämätöntä CSS:ää esiintyy usein, kun käytät kehystä kuten Bootstrap, jossa CSS:ssä on oletusarvoisesti paljon enemmän elementtejä kuin koskaan tulet käyttämään. Tai kun olet uudistanut sivusi, mutta unohdit poistaa vanhat CSS-elementit.

Miksi käyttämätön CSS on haitallista sivun nopeudelle?

CSS hidastaa sivun latautumista. Kun sivu ladataan, selain hakee ensin sivun HTML:n. Tämä HTML muunnetaan DOM-solmuiksi. Sen jälkeen selain hakee kaikki tyylitiedostot. Näissä CSS-tiedostoissa olevat tyylit muunnetaan myös toiseen muotoon, nimittäin CSSOM:ksi. DOM ja CSSOM yhdistetään renderöintipuuksi. Vasta kun tämä renderöintipuu on rakennettu, selain alkaa piirtää ensimmäistä sisältöä.
Tämän mekanismin vuoksi CSS-tiedostot estävät aina verkkosivusi renderöinnin. Kun CSS-tiedosto on suurempi kuin sen pitäisi olla, sen lataaminen kestää kauemmin ja se aiheuttaa ensimmäisen viiveen.  Kun CSS-tiedosto sisältää käyttämätöntä CSS:ää, renderöintipuun rakentaminen kestää kauemmin. 

Miten löytää käyttämätön CSS manuaalisesti?

Google Chromessa voit tarkastella käyttämätöntä CSS:ää Code Coverage -näkymässä. Code Coverage on osa Chrome DevToolsia. DevTools on sarja sisäänrakennettuja työkaluja, jotka ovat saatavilla jokaisessa Chrome-selaimessa. 

Avaa ensin DevTools Ctrl-Shift-J -pikanäppäimellä. Kirjoita sitten Ctrl-Shift-P  avataksesi komentopaletin. Kirjoita nyt 'coverage'. Valitse coverage ja lataa sivu uudelleen. Näet nyt yleiskatsauksen sivun lataamista ja käyttämistä CSS- ja JavaScript-tiedostoista. Lisäksi näet, kuinka suuria tiedostot ovat ja kuinka paljon koodista todella käytetään.
Napsauta CSS-tiedostoa nähdäksesi, mitkä CSS-säännöt ovat käytössä (vihreä) ja mitkä eivät ole (punainen) nykyisellä sivulla. 

Miten korjata 'remove unused CSS' -varoitus

On useita tapoja ratkaista 'remove unused CSS' -viesti Lighthouse-työkalussa. Jos varoituksen korjaaminen ei jostain syystä ole mahdollista, voit optimoida CSS:n toimituksen varmistaaksesi, että käyttämättömällä CSS:llä on vähemmän vaikutusta sivusi latausaikaan. Käyn alla lyhyesti läpi vaihtoehdot käyttämättömän CSS:n korjaamiseen.

1. Poista käyttämätön CSS käsin

Loogisin ja paras, mutta myös työläin tapa on tietenkin käyttämättömän CSS:n manuaalinen poistaminen. Vaiheet ovat suoraviivaiset:

1. Varmuuskopioi alkuperäiset CSS-tiedostosi. Saatat poistaa liikaa CSS:ää.
2. Avaa Code Coverage -välilehti Google Chromessa ja tarkastele CSS-tiedostokohtaisesti, mitä määrittelyjä et tarvitse.
3. Avaa CSS-tiedosto palvelimella (tai paikallisesti) ja tarkista jokainen käyttämätön CSS-määrittely. Selvitä, voidaanko se poistaa. Mutta ole varovainen: käyttämätön CSS-määrittely ei tarkoita, ettet koskaan tarvitsisi tätä määrittelyä. Sinun on arvioitava se itse!
4. Tarkista CSS-määrittelykohtaisesti, onko se kopioitu CSS:ssä. Myös päällekkäinen CSS merkitään käyttämättömäksi. 
5. Tarkista jokainen CSS-sääntö lyhennysmenetelmien varalta.  Onko CSS:ää mahdollista lyhentää? Lyhennä se!

2. Jaa CSS useisiin tiedostoihin

On yksinkertainen tapa  vähentää nopeasti CSS-sääntöjen määrää! Lataa vain ne tyylit, joita tarvitset laitteellesi. Sivuasi käytetään usein mobiililaitteella. Et oikeastaan tarvitse ladata tyylejä työpöydälle ja tulostukselle tälle mobiililaitteelle. Näiden tyylien lataamatta jättäminen säästää aikaa ja lyhentää siten kriittistä pyyntöketjua Lighthouse-työkalussa.

Toteuta tämä käyttämällä media-attribuuttia. Media-attribuutti varmistaa, että tyylitiedostoa käytetään vain, jos media-attribuutti vastaa parhaillaan käyttämääsi mediaa.

<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. Käytä automaattista CSS-siivoustyökalua

On olemassa useita älykkäitä työkaluja, jotka voivat automaattisesti siivota CSS-tiedostosi ja poistaa käyttämättömät CSS-viittaukset.
Vaikka työkalut toimivat hämmästyttävän hyvin, ne eivät ole virheettömiä. Joskus nämä työkalut poistavat liian monta CSS-määrittelyä. Käytä niitä siis varovasti ja tarkista CSS aina itse.
Parhaat CSS-siivoustyökalut ovat PurifyCSS ja PurgeCSS . Nämä työkalut toimivat NodeJS:llä. NodeJS on JavaScript-ajoympäristö, jossa voit suorittaa JavaScript-skriptejä, ja se perustuu Googlen omaan V8 JavaScript -moottoriin.  Voit myös kokeilla purifyCSS:ää verkossa.

4.  Critical CSS

Critical CSS on kokoelma CSS-sääntöjä, joita tarvitaan verkkosivustosi viewport-alueella (näkyvä osa). Toisin sanoen:  Critical CSS on CSS, jota tarvitaan sivusi näkyvän osan renderöimiseen.

On olemassa useita työkaluja, jotka voivat suodattaa ja poimia CSS:n sivultasi. Critical CSS sijoitetaan sitten inline-muodossa sivusi head-osioon, kun taas alkuperäiset CSS-tiedostot ladataan asynkronisesti (selaimen myöhempää käyttöä varten).

Tämä ei ratkaise käyttämättömän CSS:n ongelmaa täysin. Lopulta käyttämätön CSS ladataan ja jäsennetään, mutta selain ei häiriinny siitä ensimmäisen renderöintivaiheen aikana.

Yleisimmin käytetty työkalu Critical CSS:n löytämiseen ja poimimiseen on NodeJS-skripti Critical . On myös verkkotyökaluja, kuten Critical Path CSS Generator ja toinen Critical Path CSS Generator

5. Pienennä CSS-tiedostot

Käyttämätön CSS hidastaa sivua, kuten edellä luit, kahdella tavalla. Ensimmäinen syy on, että CSS-tiedostot ovat suurempia ja siksi niiden lataaminen kestää kauemmin. 

Voimme torjua tämän ongelman pienentämällä CSS-tiedostojen kokoa minifioimalla CSS-tiedostot. Se tehdään CSS-minifioijalla.  CSS-minifioija pienentää CSS-tiedostoja poistamalla välilyöntejä, kommentteja ja muotoilua. CSS-minifioija voi myös kirjoittaa muuttujat ja CSS-koodin uudelleen niin, että siirtämiseen tarvitaan vähemmän tavuja.

Tunnettu CSS-minifiointityökalu on css-minify . Minifioi kaikki CSS-tiedostosi komentorivillä komennolla css-minify -f filename. On myös useita verkossa toimivia CSS-minifioijia, kuten cssminifier.com

6. Käännä CSS-kehyksesi uudelleen

Käytätkö CSS-kehystä, kuten Bootstrap CSS:ää? Se on CSS-kehys, jolla voit tyylitellä koko sivustosi. Tämä kehys on niin kattava, että todennäköisesti et koskaan käytä suuria osia siitä.

Onneksi Bootstrapin ja muiden CSS-kehysten tekijät ovat ottaneet tämän huomioon. Tämä kehys on kirjoitettu SASS:lla. Se on kieli, joka on hyvin samankaltainen kuin CSS. Se koostuu useista pienistä SASS-tiedostoista, jotka voivat käyttää yksinkertaisia muuttujia ja funktioita. Tämä tekee kehyksen mukauttamisesta ja personoinnista helppoa  pienellä tietämyksellä. Voit jättää käyttämättömät osat pois ja kääntää sen helposti yhdeksi lopulliseksi CSS-tiedostoksi.

Varmista myös, ettet lataa CSS-kehystä muokkaamattomana vakio-CDN:stä. Lataa kehys ja käännä se SASS:lla juuri haluamallasi tavalla, vain käyttämilläsi CSS-luokilla.

7. Harkitse eri CSS-strategiaa

Haluatko todella olla nopea? Silloin voisi olla hyvä idea miettiä CSS-strategiaasi uudelleen. Miten se tehdään, riippuu sivustostasi. Monta tietä johtaa Roomaan.

Otetaan esimerkiksi oma sivustomme. Lataamme vain CSS:n, jota todella  tarvitsemme sivukohtaisesti. CMS tuo CSS-luokat automaattisesti vain silloin, kun niitä tarvitaan. Sijoitamme CSS:n inline-muodossa (sivun head-osioon). Se säästää ylimääräisen verkkopyynnön. Tämä ratkaisu on salamannopea ja helppo ylläpitää.

Tarkkaavainen lukija saattaa ajatella: "Entä CSS-välimuisti, CSS on nopeampaa, kun lopulliset CSS-tiedostot ovat välimuistissa. Kyllä, se on totta. Siksi esiladaamme kaikki linkit näkyvässä viewport-alueella, jotta sivu haetaan aina välimuistista, CSS mukaan lukien.

Korjaa 'remove unused CSS' WordPressissä

Oletko valmis poistamaan käyttämättömän CSS:n? Näin pääset alkuun WordPressissä. WordPressissä CSS:ää voidaan lisätä kolmella tavalla:

• Suoraan malliin . Mallikansiossasi on tiedosto nimeltä header.php. Tässä tiedostossa on usein mallikohtaisia CSS-tiedostoja. Voit muokata näitä CSS-tiedostoja kuten edellä kuvasin. Älä unohda varmuuskopioida alkuperäisiä CSS-tiedostojasi ja muista, että teemapäivitys voi ylikirjoittaa CSS-tiedostosi.
• Lisäosan lisäämä CSS . WordPress-lisäosat voivat lisätä rajattomasti CSS-tiedostoja HTML:ään. Nämä lisäosat käyttävät funktioita wp_register_style ja wp_enqueue_style. Useimmat lisäosat eivät vaivaudu tarkistamaan, ovatko ne aktiivisia nykyisellä sivulla. Ne vain lisäävät CSS:n jokaiselle sivulle, vaikka kyseiselle lisäosakohtaiselle CSS:lle ei olisi tarvetta sillä sivulla. Kohtaan tätä joka päivä. Jos näin on, voit käyttää funktioita wp_dequeue_style ja wp_deregister_style poistaaksesi nämä tyylit sivuilta. Se on tarkkaa työtä. Jos et ole varma miten korjata tämä, käänny kehittäjäsi puoleen tai pyydä minulta apua. Voit myös käyttää Asset CleanUp -lisäosaa, jolla voit asettaa sivutyyppikohtaisesti, mitkä lisäosat, tyylit ja skriptit saa ladata.
• JavaScript lisäämä CSS . On myös mahdollista 'injektoida' tyylitiedostoja sivulle JavaScript avulla. Aivan kuten tyylitiedostot, voit poistaa nämä skriptit käytöstä sivukohtaisesti wp_dequeue_script-funktiolla. Kun JavaScript ei lataudu, myöskään tyylitiedostoa ei injektoida.
  Jos tarvitset skriptin ja tyylitiedoston, mutta et heti latauksen jälkeen, JavaScript lataamista on mahdollista lykätä script defer -attribuutilla. Tee se lisäämällä tämä koodi functions.php-tiedostoon

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 );