Pienennä ja pakkaa CSS-tyylisivut välittömästi selaimessasi. Poista kommentit, pienennä välilyöntejä ja pienennä tiedostokokoa. Ilmainen ja yksityinen.
Tukee .css-tiedostoja. Tai liitä CSS yllä.
CSS-pienennys poistaa välilyönnit, kommentit ja tarpeettomat merkit tyylitaulukosta pienentääkseen sen kokoa ennen näyttämistä selaimissa. Varsinaiset säännöt ovat ennallaan: pienennetty tyylitaulukko renderöi sivut identtisesti pienentämättömän lähteen kanssa. Säästöt syntyvät rivienvaihtojen, ylimääräisten puolipisteiden, kommenttien, kuusiväristen pikakirjoitusmahdollisuuksien ja nollayksikön pikanäppäimien poistamisesta (korvaa 0px nollalla).
Nykyaikaisilla verkkosivuilla, joissa on kymmeniä tyylisääntöjä, tyypillinen vähennys on 20–40 % rajoittamattomaan lähteeseen verrattuna. Yhdessä gzip-pakkauksen kanssa palvelimella marginaaliset säästöt pienenevät – gzip pakkaa jo toistuvaa tekstiä tehokkaasti – mutta yhdistelmä päihittää silti yksin pakkauksen, varsinkin kun tyylisivut tallennetaan välimuistiin ja niitä tarjotaan monta kertaa useille vierailijoille.
Tämä minifier käsittelee CSS:n yhdellä kertaa, poistaa kommentit url()-arvojen ulkopuolelta, tiivistää välilyönnit, poistaa tarpeettomat puolipisteet ennen aaltosulkeiden sulkemista, käyttää nollayksikön pikakirjoitusta ja muuntaa kuusinumeroiset heksadesimaalivärit kolminumeroisiksi mahdollisuuksien mukaan (#ffffff → #fff). Tulos on edelleen voimassa oleva CSS, jonka mikä tahansa selain jäsentää oikein.
Pienemmät CSS-tiedostot latautuvat nopeammin ja renderöinnin estoaika laskee, mikä molemmat parantavat First Contentful Paint- ja Largest Contentful Paint -pisteitä. Sivustoilla, joilla Core Web Vitals vaikuttaa haun sijoitukseen, jokainen renderöinnin estävän CSS:n kilotavu on vaivan arvoinen.
Kaistanleveyden kustannuksilla on myös merkitystä mittakaavassa. Sivustot, jotka tarjoavat miljoonia sivun näyttökertoja, säästävät mitattavissa olevia määriä ulospääsyä, kun niiden tyylisivut ovat 30 % pienempiä. CDN-laskut, mobiilidatan käyttö ja energiankulutus hyödyttävät hieman. Pienentäminen on käytännössä ilmaista – kertaluonteinen rakennusvaihe ilman ylläpitokustannuksia.
Liitä CSS, hanki pienennetty versio.
CSS-pienentäminen on enimmäkseen konservatiivista välilyöntien poistoa. Valitsimien, ilmoitusten ja arvojen sisällä säilytetään tyhjää tilaa, jos se on tärkeää; tyhjä tila ulkopuolella on tiivistetty. Kommentit poistetaan, elleivät ne ala /*! (lisenssin säilyttämistä koskevat kommentit).
Yleiset pikanäppäimet: 0px, 0em ja vastaavista nollayksiköiden arvoista tulee 0; kuusinumeroisista heksadesimaaliväreistä, joissa on numeropari (#ffffff, #336699), tulee kolminumeroisia (#fff, #369); viimeinen puolipiste ennen } poistetaan. Värien nimiä ei muunneta heksadesimaalimuotoisiksi automaattisesti, koska hex on joskus pidempi (punainen on lyhyempi kuin #f00; #ff0000 on pidempi kuin punainen).
Tulosteen tulee läpäistä kaikki CSS-validaattorit, jotka hyväksyvät syötteen. Selaimen tuki on ennallaan – pienentäminen ei muuta itse sääntöjä, vain niiden tekstiesitystä.