Kuten lupasimme blogissamme viime viikolla, olemme tehneet Innotaan uusia hienoja ominaisuuksia. Päivitimme juuri Innotan, ja nyt tyylimäärittelyiden siirtäminen html-koodin sekaan ei voisi olla helpompaa
Miksi siirtää tyylimäärittelyt html-koodin sekaan?
Tähän on useampia syitä.
Tyylien siirtäminen html-koodiin voi parantaa käyttökokemusta tai esimerkiksi AMP HTML -sivujen tekeminen edellyttää, että kaikki tyylit on määritetty html-koodissa.
Mikä erillisissä tyylitiedostoissa on vikana?
Ongelma on, että minkä tahansa ulkoisen tyylitiedoston lataaminen head-tagin sisällä keskeyttää sivun renderöinnin. Selain keskyttää renderöinnin, kunnes kaikki erilliset tyylitiedostot on ladattu ja prosessoitu. Tiedostojen lataaminen eri palvelimilta voi olla hidasta ja ensimmäiseen sivun renderöintiin kuluu kauan.
Hitaus johtaa huonoon käyttäjäkokemukseen. Käyttäjän pitää tuijottaa tyhjää valkoista ruutua kun selain lataa tyylitiedostoja.
Ongelman ratkaisuun on pari eri vaihtoehtoa.
Ratkaisu 1: Siirretään kaikki css html-koodiin
Jos tyylimäärittelyjä on vähän, kannattaa harkita kaikkien tyylien siirtämistä style-tagiin head-osiossa. Tämä kasvattaa html-tiedoston kokoa, mutta loppukäyttäjä säästää yhden ylimääräisen palvelinpyynnön, kun erillisen tiedoston lataaminen jää pois.
Ratkaisu 2: Siirretään osa css:stä html-koodiin
Jos tyylimäärittelyjä on paljon, ei kaiken siirtämisessä head-tagin sisään ole välttämättä järkeä. Tässä tapauksessa voi olla parasta siirtää vain osa css:stä html-koodiin. Html-koodin seassa olevilla tyyleillä määritetään vain käyttäjälle ensin näkyvät tyylit, ja erillisessä tyylitiedostossa ladataan sivun loput tyylit.
Tällä tavalla selain voi renderöidä ensin näkyvän sisällön nopeasti ennen kuin erillinen tyylitiedosto on ladattu ja prosessoitu. Tämä nopeuttaa käyttökokemusta.
Innota ja tyylitiedostot
Tyylimäärittelyjen siirtäminen html-koodiin on todella helppoa Innotassa. Myös html-koodiin tuotujen tyylien kanssa voit käyttää samoja ominaisuuksia, kuten SCSS prosessointia ja tyylien minifointia.
Esimerkiksi critical.css-nimisen tiedoston tuominen head-tagin sisään onnistuu näin:
<style>{{ css_inline('critical.css') }}</style>
Funktio css_inline on hyvi yksinkertainen. Sille annetaan tiedoston nimi, ja sen tiedoston koko sisältö viedään SCSS prosessorin ja minifoinnin läpi, ja sisällytetään haluttuun kohtaan.
On mahdollista sisällyttää myös useampia tiedostoja samalla kertaa. css_inline-funktiolle voi antaa myös useampia tiedoton nimiä tähän tapaan:
<style>{{ css_inline(['reset.css', 'base.css']) }}</style>
Näin siällytetään sekä reset.css- että base.css -tiedostojen sisältö.
Lisätietoja löydät ohjeistamme.
Yhteenveto ja lisätietoja
Nopeiden verkkosivujen tekeminen vaatii sekä nopean palvelimen että sisällön, joka renderöityy noepasti. Jälkimmäinen unohtuu helposti, vaikka se on hyvä tärkempää heikkotehoisten mobiililaitteiden ja hitaiden verkkoyhteyksien takia.
Tässä on aiheeseen liittyvää luettavaa:
- Optimize CSS Delivery - Google PageSpeed Insights
- Optimize Content Efficiency - Google Web Fundamentals
