Stiililehe suuruse vähendamine 55% ja veelgi enam

Enne pikemasse vastusesse ing laskumist uurige, miks stiililehe suurus on veebikogemuse seisukohast üks olulisemaid tegureid.

Üldiselt on stiilileht lihtsalt hunnik reegleid / valijaid, mida saab määratleda:

  • Välised failid.
  • Stiilisildid.
  • Sisekujunduse atribuudid.

️ Iga lähenemisviisi plusside ja miinuste üle on palju arutelusid ja see väljub selle artikli ulatusest, kuid kui teil on huvi, võite lugeda siit.

Veebilehe kuvamiseks peab brauser konstrueerima DOM (meie HTML) ja CSSOM (meie stiililehed) puud, nagu alloleval pildil. See tähendab, et CSSOM-i ehitamine on renderduse blokeerimine, seetõttu mida suurem on faili suurus ja mida rohkem meil on CSS-i reegleid, seda aeglasem on meie veebisait.

Foto: HPBN

Alustame siis meie teekonna hõrenemist. Minu arvates võime jagada kahte kategooriasse:

  • Stiililehe minimeerimine.
  • Kasutamata CSS-i valijate eemaldamine.

️ Tsiteerin minimist, kuna ma ei leia paremat sõna, et kirjeldada järgmises jaotises seda, mida see teeb.

Minimeerimine

Mis on minifitseerimine? Selles jaotises teeb see kahte erinevat asja:

  • Tehke teisendused (aka CSS Minifier).
  • Css-klassi nime lõikamine.

CSS minifier

CSS Minifiers teeb põhimõtteliselt kolme asja:

  • Puhastamine (dubleeritud / tühjade reeglite ja kommentaaride eemaldamine).
  • Tihendamine (lühem vorm värvi, fondi, tausta jaoks).
  • Ümberkorraldamine (deklaratsioonide, reeglite ja nii edasi liitmine).

Allolev pilt on CSS-minifiiride etalon

Halvim - Keskmine - Parim

Nagu ülaltoodud pildil on näha, on olemas hunnik css-minifitseerijaid, julgustan teid funktsioonide ja ökosüsteemi osas kasutama kahte populaarsemat css-minifiisrit cssnano või csso. Saate neid oma moodulite komplektis kasutada järgmisel viisil:

  • Webpack ss csso-webpack-plugin, css-loader (lubage minimeerimine).
  • Koondamine ⤑ koondnupp-plugin-postkaabel.
  • Gulp ⤑ gulp-postcss.
  • Grunt ⤑ grunt-postcss.

Css-klassi nime lõikamine

Kui hiilida Gmaili HTML-i lehele (sama on ka teiste Google'i platvormide puhul: G +, draiver ...), näete midagi sellist

See tundub liiga kole , eks? kuna sellel pole tähendusrikkaid klassinimesid, õpetati meile, et loetavuse ja hooldatavuse parandamiseks peaksime programmeerimisel kasutama tähendusrikkaid nimesid, see läheb vastuollu. Miks Google seda teeb? Kuna lühem klassinimi tähendab:

  • väiksemad delivery vähem baite kättetoimetamiseni ⟷ meie veebisait on kiirem .
  • kiirem reegli pärimisel .

Probleem, mida peame lahendama, et saavutada seda, mida soovime:

  • Sildimise hõlbustamiseks arendamisel tähendusliku klassinime hoidmine → järgime lihtsalt parimaid tavasid (BEM, SMACSS, OOCSS ...) või teie enda reegleid, kui see on järjepidevus teie meeskonnas .
  • Kvaliteetse ja kiire laadimisega toodangu jaoks kole / lühikese klassi nime väljastamine ← siin see karm ️‍.

Inetu / lühima klassinime väljastamine: vajame tööriista, mis muudab klasside nimesid ja hoiab neid ka meie lähtekoodi kompileerimisel muudes kohtades sünkroonis. Ma kasutan praegu Webpackit, õnneks on ühel Webpacki laaduritel nimega css-loader sisseehitatud funktsioon getLocalIdent, mis aitab meil sellest takistusest üle saada.

Kui olete veebipaketi konfiguratsiooniga tuttav, on see astme nime 0, 1, 2 ... simple lihtne versioon

See on idee, võite kirjutada parema versiooni kui mina, eks?

Kasutamata css-selektorite eemaldamine

Kasutamata selektorite eemaldamiseks peame teadma, milliseid osi kasutatakse ja milliseid mitte, seetõttu on esimene samm kasutamata selektorite tuvastamine. Kuidas? Kasutamata asjade tuvastamiseks kasutajaliidese koodil on kaks traditsioonilist viisi:

  • Kestus: käivitage oma veebileht, skannige läbi HTML-, CSS- ja js-failid, et kontrollida, milliseid valijaid HTML / javascriptis kasutatakse. Kasutatud selektoritest saate tööriistad / tööriistad need välistada ja saada kasutamata selektorid.
  • Ehituse aeg: moodulipaketi kaudu saame importida CSS-faile ja täpsustada, milliseid valijaid valida. Selle moodulipurustaja teabe põhjal saame tuvastada kasutamata selektorid (see kõlab hästi, eks?)

Kestus

Kasutamata CSS-i selektorite kontrollimiseks on kolm populaarset viisi:

  • Käsurida: käitate käsurida CSS / HTML / js failide asukohaga, kuna sisend ja väljund on kasutatud / kasutamata CSS. Tööriistu on palju, kuid kolm populaarsemat on purgecss, uncss ja purifycss.
  • Veebisait: üsna sarnane käsureale, kuid veebisaidil. Sisestate oma Webpacki URL-i ja see teeb oma ülesande .
    Näiteks: https://www.jitbit.com/unusedcss/, https://unused-css.com/, https://uncss-online.com/…
  • Chrome'i koodi katvus: Allolev pilt näitab koodide katvust mitte ainult CSS-failide, vaid ka js-failide jaoks

Koodide katvuse avamine:

  • 1. samm: avage Chrome Dev Tools
  • 2. samm: vajutage Cmd + Shift + P (Mac) või Ctrl + Shift + P (Windows, Linux), tippige katvus
  • 3. samm: klõpsake nuppu Salvesta

Ehitage aega

Nagu ma eespool mainisin. See kõlab lihtsalt, eks? Jah, see on ülilihtne, kui teie moodulite komplekteerija toetab nimelist eksporti, vastasel juhul võib see olla keeruline cha. Kasutan praegu Webpacki ja kahjuks ei toeta Webpack ja selle ökosüsteem (css-loader) nimelist eksporti, kuna liikumine commonjsist es6-nimelisele ekspordile on murranguline muudatus, näete, miks selle lõime kaudu.

Järsust mäest üles ronimiseks on vaja teha kaks sammu:

  • 1. samm: toetage css ← es6-css-laaduri staatilist importi / eksporti (see põhineb Webpacki ametlikel laaduritel, mida nimetatakse stiililaaduril ja mini-css-väljavõtte-pistikprogrammil).
  • 2. samm: pistikprogramm, mis ühendab Webpacki loomise protsessi, et kuvada kasutamata css-selektorid ← webpack-deadcode-plugin.

Tegin demo demonstreerimaks, kuidas kasutada kahte ülaltoodud pluginat, siin on lähtekood.

Demo käitamisel näeb väljund välja nagu alloleval pildil

Järeldus

Pärast ülaltoodud lahenduste rakendamist vähendatakse meie CSS-i kimbu suurust Bokios 286 KB-lt 130 KB-ni, isegi kui me pole veel rakendanud kasutamata selektoreid ehituse ajal. Uuendan meie lõpptulemust, kui oleme optimeerimise lõpetanud .

️ Mõlemad arvud 286 KB ja 130 KB arvutatakse enne tihendamist (näiteks gzip, brotli…).

Ressursid

  • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
  • https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
  • https://medium.com/@MQuy90/wtf-is-deadcode-elimination-how-to-do-it-by-yourself-d1e1e26b0ed0