Korjaa Lighthousen "Remove unused CSS" -varoitus.

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

Käyttämätön CSS koostuu CSS-määrityksistä, joita ei käytetä missään verkkosivulla.
On aivan normaalia, että osaa CSS:stä ei käytetä. Esimerkiksi siksi, että jotkut CSS-määritykset on kirjoitettu toista laitetta, kuten työpöytää tai mobiilia, varten. Joskus  siksi, että tyylitiedostossa kuvattua elementtiä (kuten painiketta) ei käytetä kyseisellä sivulla.
Käyttämätöntä CSS:ää esiintyy usein, kun käytät kehystä, kuten bootstrap, jossa CSS:ssä on oletuksena paljon enemmän kuvattuja elementtejä kuin tulet koskaan 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 latausta. 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, tiedoston lataaminen kestää kauemmin, mikä 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 pikanäppäimellä Ctrl-Shift-J . Paina 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 tiedostojen koon ja kuinka paljon koodista on todella käytössä.
Napsauta CSS-tiedostoa nähdäksesi, mitkä CSS-säännöt ovat käytössä (vihreä) ja mitkä eivät (punainen) nykyisellä sivulla. 

Miten korjata 'remove unused CSS' -varoitus

Lighthousen 'remove unused CSS' -viestin korjaamiseen on useita tapoja. 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 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äärityksiä et tarvitse.
3. Avaa CSS-tiedosto palvelimella (tai paikallisesti) ja tarkista jokainen käyttämätön CSS-määritys. Selvitä, voidaanko se poistaa. Mutta ole varovainen: käyttämätön CSS-määritys ei tarkoita, ettet koskaan tarvitsisi sitä. Sinun täytyy arvioida se itse!
4. Tarkista CSS-määrityksittäin, onko CSS:ssä duplikaatteja. Duplikaatti-CSS merkitään myös 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. Sivullasi vieraillaan usein mobiililla. Sinun ei tarvitse ladata tyylejä desktop- ja print-laitteille tälle mobiililaitteelle. Näiden tyylien lataamatta jättäminen säästää aikaa ja lyhentää siten Lighthousen kriittistä pyyntöketjua.

Tämän saavuttamiseksi käytä media-attribuuttia. Media-attribuutti varmistaa, että tyylitiedostoa käytetään vain, jos media-attribuutti vastaa käytössä olevaa 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-puhdistustyökalua

On olemassa useita älykkäitä työkaluja, jotka voivat automaattisesti siistiä 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 liikaa CSS-määrityksiä. Käytä niitä siis varovasti ja tarkista CSS aina itse.
Parhaat CSS-puhdistustyökalut ovat PurifyCSS ja PurgeCSS . Nämä työkalut toimivat NodeJS:llä. NodeJS on JavaScript-ajoympäristö, jossa voit suorittaa JavaScript-skriptejä, perustuen 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 näkymässä (näkyvässä osassa). Toisin sanoen:  Critical CSS on CSS, jota tarvitaan sivusi näkyvän osan renderöintiin.

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äinen CSS-tiedosto ladataan asynkronisesti (selaimen myöhempää käyttöä varten).

Tämä ei ratkaise käyttämättömän CSS:n ongelmaa kokonaan. Lopulta käyttämätön CSS ladataan ja jäsennetään, mutta selaintasi ei 'häiritä' sillä ensimmäisen renderöintivaiheen aikana.

Yleisin 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. Minifioi CSS-tiedostot

Käyttämätön CSS hidastaa sivua, kuten edellä luit, kahdella tavalla. Ensimmäinen on se, että CSS-tiedostot ovat suurempia ja niiden lataaminen vie enemmän aikaa. 

Voimme torjua tämän ongelman pienentämällä CSS-tiedostojen kokoa minifioimalla ne. Se tehdään CSS-minifioijalla.  CSS-minifioija pienentää CSS-tiedostoja poistamalla välilyöntejä, kommentteja ja muotoiluja. Lisäksi CSS-minifioija voi kirjoittaa muuttujat ja CSS-koodin uudelleen niin, että se vie vähemmän tavuja siirtää.

Tunnettu CSS-minifiointityökalu on css-minify . Minifioi kaikki CSS-tiedostosi komentorivillä komennolla css-minify -f filename. On myös erilaisia 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 muistuttaa paljon CSS:ää. Se koostuu useista pienistä SASS-tiedostoista, jotka voivat käyttää yksinkertaisia muuttujia ja funktioita. Tämä tekee helpoksi mukauttaa ja personoida  kehystä itse pienellä tietämyksellä. Voit jättää pois osat, joita et käytä, 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 erilaista 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 meidän sivustomme. Lataamme vain sen CSS:n, jota todella  tarvitsemme kullakin sivulla. CSS-luokat tuodaan automaattisesti CMS:mme toimesta vain tarvittaessa. 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:n välimuistitus? CSS on nopeampaa, kun lopulliset CSS-tiedostot ovat välimuistissa." Kyllä, se pitää paikkansa. Siksi esilataamme kaikki linkit näkyvässä näkymässä, 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 teemaan . Teemakansiossasi on tiedosto nimeltä header.php. Tässä tiedostossa on usein teemakohtaisia CSS-tiedostoja. Voit muokata näitä CSS-tiedostoja edellä kuvatulla tavalla. Älä unohda varmuuskopioida alkuperäisiä CSS-tiedostojasi ja muista, että teemapäivitys voi ylikirjoittaa CSS-tiedostosi.
• Lisäosan lisäämä CSS . WordPressin 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 kyseisen lisäosan CSS:ää ei tarvita kyseisellä sivulla. Törmään tähän 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 määrittää sivutyypeittäin, mitkä lisäosat, tyylit ja skriptit saa ladata.
• JavaScriptin lisäämä CSS . On myös mahdollista 'lisätä' tyylitiedostoja sivulle JavaScriptin avulla. Aivan kuten tyylitiedostoja, voit poistaa nämä skriptit sivukohtaisesti käytöstä wp_dequeue_script-funktiolla. Kun JavaScript ei lataudu, myöskään tyylitiedostoa ei lisätä.
  Jos tarvitset skriptin ja tyylitiedoston mutta et heti latauksen jälkeen, on mahdollista lykätä JavaScriptin latausta 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 );