🚀 Kuinka kutistaa Font Awesome 10 kilotavuun ja nopeuttaa verkkosivustoasi
Ikonit tekevät verkkosivustoista intuitiivisia. Navigaatio, some, toimintopainikkeet: kaikkialla tarvitset pieniä visuaalisia vihjeitä, jotka kävijä tunnistaa heti. Font Awesome on ratkaissut tämän ongelman 14 vuoden ajan yli 2000 ilmaisen ikonin kirjastolla, jotka yhdistät yhdellä rivillä. Ongelma on, että tuo yksi rivi tuo mukanaan satoja kilotavuja.
Font Awesome 7 Free -paketin pelkät webfont-tiedostot painavat noin 150 kt per tyyli, ilman CSS:ää. Lisää CSS (noin 100 kt minifioituna), ja jokainen ensimmäinen sivulataus toimittaa käyttäjälle yli 250 kt. Pahempaa: jos käytät 8-10 ikonia kahdestatuhannesta, selain lataa silti kaiken. Mobiilin 4G-verkossa se tarkoittaa 2-3 sekuntia ylimääräistä odottelua. Google PageSpeed rankaisee tällaisista siirtokuormista suoralla pistevähennyksellä.
Mutta ongelma on ratkaistavissa. Näytämme, miten poimit kirjastosta vain sivustollasi tosiasiallisesti käytetyt ikonit ja saat lopulliseksi kooksi 10-15 kt menettämättä toiminnallisuutta. Kaikki keinot käydään läpi: automaattisesta manuaaliseen, verkkotyökaluista komentorivityökaluihin. Ei taikuutta, vain toimivia tekniikoita.
💡 Pikaopas:
- Analysoi sivustosi ja kokoa lista tosiasiallisesti käytössä olevista Font Awesome -ikoneista
- Valitse tilanteeseesi sopiva optimointimenetelmä: FontCut-verkkotyökalu, fa-subset-komentorivityökalu tai virallinen Kit-mekanismi
- Maksimaalista hallintaa varten valitse manuaalinen reitti FontForgella tai IcoMoonilla: se vaatii vaivaa, mutta antaa täyden hallinnan lopullisesta tiedostosta
- Generoi karsittu webfont ja CSS, korvaa palvelimellasi oleva täysversio niillä
- Mittaa nopeus ennen ja jälkeen: tyypillinen PageSpeed Score -parannus on 20-40 pistettä
Miksi Font Awesomea ylipäätään karsisi?
Pääsyy on latausnopeus. Googlen tutkimus osoittaa, että 53% mobiilikävijöistä poistuu sivulta, jos sen latautuminen kestää yli 3 sekuntia. Jokainen ylimääräinen 100 kt kriittisellä renderöintipolulla pidentää aikaa First Contentful Paintiin.
Font Awesome Free 7 sisältää kolme tyyliä: Solid, Regular ja Brands. Yhteensä se on yli 2000 ikonia ja noin 450 kt pakattuja webfont-tiedostoja. Tyypillinen laskeutumissivu tai blogi käyttää 10-20 ikonia, alle 1% kirjastosta. Selain lataa kaiken muun turhaan.
Toinen syy on Core Web Vitals. LCP-mittari (Largest Contentful Paint) riippuu suoraan siitä, kuinka nopeasti selain vastaanottaa ja renderöi fontit. Karsimaton Font Awesome estää tekstin renderöinnin, kunnes webfont latautuu. Osajoukon muodostamisen jälkeen tiedostosta tulee niin pieni, että selain saa sen ensimmäisen verkkopyynnön aikana.
Kolmas syy on mobiililiikenne. Rajoitetun datapaketin käyttäjät eivät kiitä sinua ylimääräisestä 400 kt:sta jokaisella sivulla. Osajoukon muodostaminen palauttaa hallinnan latausbudjettiisi.
Tosielämän lukuja: webfont-tiedoston pienentäminen 345 kt:sta 14,5 kt:uun nosti Lighthouse Performance Score -pisteet 52:sta 89:ään yhdessä projektissa. Ero näkyy paljaalla silmällä: sivusta tulee interaktiivinen lähes välittömästi.
Tapa 1: virallinen Kit-mekanismi (suositeltu)
Yksinkertaisin ja tuetuin lähestymistapa on käyttää Font Awesome Kitiä, jossa on sisäänrakennettu osajoukon muodostus. Tämä tapa toimii ilmaisella tilillä eikä vaadi kolmannen osapuolen työkaluja.
Miten se toimii
Kit on personoitu Font Awesome -paketti, jonka määrittelet hallintapaneelissasi osoitteessa fontawesome.com. Kitin asetuksissa on "Icon Selection" -osio, jossa on kaksi tilaa:
- By Style: valitset tarvitsemasi tyylit (Solid, Regular, Brands), ja Kit lataa vain valitut. Jo tässä vaiheessa leikkaat kaksi kolmesta tyylistä pois, jos tarvitset vain Solidia.
- By Icon: määrittelet tietyt ikonit haun kautta, ja Kit generoi tiedoston, joka sisältää vain ne. Tämä tila tarjoaa maksimaalisen pakkauksen.
Asetusten tallentamisen jälkeen Kit kääntää paketin automaattisesti uudelleen. Saat <script>-tagin, jonka lisäät sivustosi <head>-osioon. Font Awesomen CDN toimittaa valmiiksi karsitun version. Ei paikallisia tiedostoja, ei manuaalista kääntämistä.
Kit-lähestymistavan edut
- Tiedostoja ei tarvitse ladata ja hostata itse: Font Awesomen CDN jakaa karsitun paketin maailmanlaajuisesti
- Kun lisäät uuden ikonin, päivität vain listan Kitin asetuksissa, ja uudelleenkäännös tapahtuu automaattisesti
- Toimii Font Awesome Pron kanssa, mukaan lukien Duotone- ja Sharp-tyylit
- Tukee sekä SVG+JS- että Webfonts+CSS-tiloja
Milloin Kit ei sovi
Ainoa rajoitus: karsittua Kitiä ei voi ladata omalle palvelimellesi ilmaisella tasolla. Jos fonttien hostaaminen paikallisesti on sinulle kriittistä (sisäverkko, tietoturvakäytäntö), Kit ei ole vaihtoehto. Silloin katso tapoja 2 ja 3.
Tapa 2: FontCut-verkkotyökalu
Jos et halua rekisteröityä Font Awesomeen tai haluat mieluummin valmiin ZIP-tiedoston, jonka voit laittaa repositorioosi, kokeile FontCut.comia. Se on ilmainen verkkogeneraattori, joka on suunniteltu erityisesti Font Awesome 6.4.0:lle ja Bootstrap Ikoneille.
Prosessissa on kolme vaihetta:
- Valitse ikonipaketti (Font Awesome Free 6.4.0, uusin saatavilla oleva versio)
- Valitse tarvitsemasi ikonit visuaalisesta ruudukosta
- Lataa ZIP-arkisto, jossa on CSS- ja webfont-tiedostot, siirrä palvelimellesi
Lopputulos on itsenäinen 10-15 kt:n paketti, jota hostaat itse. Työkalu ei vaadi rekisteröitymistä, ja esikatselu näyttää lopullisen koon reaaliajassa.
Rajoitus: FontCut käyttää FA 6.4.0:aa, ei nykyistä versiota 7.2.0. Useimmille projekteille ero on merkityksetön: solid-tyylin ikonit eivät muutu versioiden välillä. Mutta jos tarvitset FA 7:ssä lisättyjä ikoneita (Pro+-paketit), FontCut ei tarjoa niitä.
Tapa 3: fa-subset-komentorivityökalu (kehittäjille)
Käytettyjen ikonien automaattinen tunnistus on tarkin lähestymistapa. Fa-subset-työkalu (Python, BSD-2-Clause, ohjeet Dev.tossa) skannaa projektisi lähdekoodin, löytää kaikki fa-*-luokat ja generoi karsitun webfontin, joka sisältää vain tosiasiallisesti käytetyt ikonit.
Asennus:
1 pip install fonttools
Perusajo (analyysin kuiva-ajo):
1 python3 bin/fa-subset.py \ 2 --src ./src ./templates \ 3 --ext .html .php .twig .js \ 4 --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \ 5 --out ./optimised \ 6 --dry-run
Työkalu tulostaa listan löydetyistä ikoneista ja arvion karsitun tiedoston koosta. Ilman --dry-run-lippua se luo valmiin CSS:n ja webfontin ./optimised-kansioon.
fa-subsetin vahvuudet:
- Skannaa PHP-, HTML-, JS-, Blade-, Twig-, Vue-, React- ja kaikki tekstitiedostot projektissasi
- Ymmärtää duotone-ikonit (kaksoiskoodipisteet Font Awesome 6+:ssa)
- Voi tuottaa JSON-raportin CI/CD-putkia varten:
--report-json ./report.json --strict-styles - Toimii WordPress-teemojen, Laravel-pohjien ja React/Vue-komponenttien kanssa
Todellinen tuotantotulos: pakkaus 803 kt:sta (fontit + CSS) 14,5 kt:hon, eli 98%:n pienennys. Työkalu on ilmainen eikä ole sidoksissa Font Awesomen palveluihin.
Menetelmä 4: IcoMoon (visuaalinen fonttieditori)
IcoMoon on verkkosovellus omien ikonifonttien luomiseen. Se löytyy osoitteesta icomoon.io/app. Lähestymistapa on hieman monimutkaisempi kuin Kitit, mutta tarjoaa yhden ainutlaatuisen ominaisuuden: eri kirjastojen ikonien yhdistämisen yhteen tiedostoon.
Vaihe 1: valitse Font Awesome -paketti
Mene osoitteeseen icomoon.io/app, klikkaa "Add Icons From Library", etsi listasta Font Awesome ja klikkaa "Add".
Vaihe 2: merkitse tarvitsemasi ikonit
Valintaikkunassa merkitse kaikki sivustollasi käytetyt ikonit klikkaamalla kutakin. Voit valita useita kirjastoja kerralla (esimerkiksi Font Awesome + Material Icons) ja saada yhden tiedoston, joka sisältää molempien settien ikonit.
Vaihe 3: luo ja lataa fontti
Valinnan jälkeen klikkaa sivun alareunassa olevaa "Generate Font" -painiketta. IcoMoon näyttää kaikki valitut ikonit ja tarjoaa "Download"-painikkeen. ZIP-arkisto sisältää webfont-tiedostot (woff, woff2, eot, svg, ttf), style.css-tiedoston ja demo-demo.html-tiedoston.
Tallenna tiedostot sivustosi repositorioon ja liitä style.css <head>-osioon. Jos jokin meni pieleen, avaa arkiston demo.html: se näyttää tarkalleen, miten fontti liitetään ja miten sitä käytetään.
IcoMoon toimii hyvin, kun haluat sekoittaa eri settien ikoneja tai kun et periaatteessa halua olla riippuvainen Font Awesomen CDN:stä.
Tapa 5: manuaalinen karsiminen FontForgella
Työläin mutta myös hallituin menetelmä. Sopii tilanteisiin, joissa haluat ymmärtää lopullisen tiedoston jokaisen tavun tai työskennellä ympäristössä, jossa ei ole pääsyä ulkoisiin palveluihin.
Vaihe 1: ota fontti paikalliseen käyttöön
Lataa Font Awesome viralliselta sivustolta. Poista CDN-linkki <head>-osiosta, jos se oli siellä. Pura arkisto sivustosi repositorioon.
Yhdistä CSS paikallisesti:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Tyhjennä selaimen välimuisti ja lataa sivusto uudelleen. Kuvakkeiden pitäisi näkyä kuten ennenkin, mutta nyt hallitset tiedostoja omalla palvelimellasi.
Vaihe 2: poista tarpeettomat tiedostot
Kun olet purkanut Font Awesome -arkiston, näet seuraavan kansiorakenteen:
Toimintaan tarvitaan vain CSS- ja webfont-tiedostot. Nykyaikaiset selaimet tarvitsevat vain woff2-muodon, joten ttf-, eot- ja svg-tiedostot voi poistaa.
Poista Less- ja SCSS-lähdetiedostot, jos et aio kääntää niitä. Säilytä vain css/- ja fonts/-kansiot, joissa on fa-solid-900.woff2-tiedosto (tai versiotasi vastaava).
Vaihe 3: muokkaa webfonttia FontForgessa
Lataa ja asenna FontForge (ilmainen avoimen lähdekoodin fonttieditori). Avaa .woff2-tiedosto valikosta File → Open.
Etsi FontForgen käyttöliittymästä glyph-paneeli. Välttääksesi manuaalisen selaamisen valitse Encoding → Compact: kaikki käytössä olevat paikat siirtyvät alkuun.
Nyt kriittisin vaihe: pidä Shift-näppäintä pohjassa ja valitse kaikki glyphit, joita sivustosi EI käytä. Poista ne (Edit → Clear). Säilytä vain kuvakkeet, jotka todella esiintyvät merkinnöissäsi: some-kuvakkeet, nuolet, valikkokuvakkeet, brändilogot.
Tallenna tulos: File → Generate Fonts. Valitse Web Open Font Format (woff2) ja määritä tiedostonimi. Korvaa alkuperäinen webfont fonts/-kansiossa karsitulla versiolla.
Lataa sivusto uudelleen ja tarkista kaikki kuvakkeet. Jos jokin katosi, poistit tarvittavan glyphin: avaa FontForge uudelleen ja tee valinta huolellisemmin.
Tai ehkä vain vaihda kirjastoa?
Joskus paras optimointi ei ole Font Awesomen optimointi, vaan työkalun valinta, joka on kevyempi jo lähtökohtaisesti. Nykyaikaiset vaihtoehdot tarjoavat kuvakkeet SVG-muodossa ja tree-shakingin tuontitasolla: vain ne kuvakkeet, jotka eksplisiittisesti tuot, päätyvät bundleen.
Kolme harkitsemisen arvoista vaihtoehtoa:
Lucide Icons: yli 1460 kuvaketta, MIT-lisenssi, Feather Iconsin suora seuraaja. Kuvakkeet 24px-ruudukolla, tyylillisesti lähellä FA:ta, mutta paketti painaa tree-shakingin kanssa vain kilotavuja. Reactille/Vuelle/Sveltelle natiivit komponentit, joissa
size-,color- jastrokeWidth-propsit.Phosphor Icons: yli 1400 kuvaketta kuudessa tyylissä (thin, light, regular, bold, fill, duotone). Jokainen kuvake tuodaan erikseen:
import { House } from '@phosphor-icons/react'. Ei käyttämätöntä painolastia.Bootstrap Icons: yli 2000 SVG-kuvaketta, ilmainen, aktiivisesti kehitetty. Suora yhteensopivuus Bootstrap-ekosysteemin kanssa, mutta käytettävissä itsenäisesti. Erilliset SVG-tiedostot mahdollistavat kuvakkeiden upottamisen inline-muodossa ilman lisäpyyntöjä.
Jos sivustosi pyörii WordPressillä, katso oppaamme Font Awesomen lisäämisestä WordPressiin. Niille, jotka haluavat syventyä verkkofontteihin, löytyy erittely verkkofonttien lataamisesta renderöintiä estämättä.
⁉️🤔 Usein kysytyt kysymykset
Mitä ikonien osajoukkokäsittely tarkoittaa ja miksi sitä tarvitaan?
Osajoukkokäsittely tarkoittaa, että ikonifontista luodaan kevennetty versio, joka sisältää vain sivustolla todella käytetyt ikonit. Täysi Font Awesome 7 Free -paketti painaa pakattuna noin 450 kt. Tyypillinen sivusto käyttää 10-20 ikonia; osajoukkokäsittelyn jälkeen tiedosto kutistuu 10-15 kilotavuun. Latausnopeuden ero näkyy heti PageSpeed-pisteissä: tyypillinen parannus on 20-40 pistettä.
Kuinka monta ikonia selain lataa, jos liitin Font Awesomen CDN:n kautta?
Kaikki. CDN-linkki tiedostoon
all.min.cssvetää mukaan täyden kolmen tyylin paketin: Solid, Regular ja Brands. Selain lataa kaikki verkkofonttitiedostot, vaikka sivulla käytettäisiin vain yhtä ikonia. Juuri tästä syystä CDN-lähestymistapa ilman Kitiä on tavukustannuksiltaan kallein. Kit, jossa on "By Icon" -asetus, ratkaisee tämän ongelman: CDN toimittaa vain ne ikonit, jotka olet erikseen valinnut asetuksissa.
Mikä optimointitapa minun kannattaa valita WordPress-sivustolle?
Jos sivustosi on WordPressissä etkä halua käyttää komentoriviä, käytä virallista Kitiä (tapa 1). Asennus vie 5 minuuttia fontawesome.com-hallintapaneelissa, ja tulokset tarjoillaan heti CDN:n kautta. Jos tietoturvakäytäntö kieltää CDN:n käytön, FontCut (tapa 2) toimii: lataa ZIP, siirrä FTP:llä ja liitä
header.php-tiedostossa. Kehittäjille, jotka haluavat automaatiota, fa-subset (tapa 3) osaa skannata teemasi PHP-pohjat ja rakentaa fontin uudelleen jokaisen julkaisun yhteydessä.
Onko turvallista poistaa verkkofonttiformaatit ttf, eot ja svg?
Kyllä. Nykyaikaiset selaimet (Chrome, Firefox, Safari, Edge) ovat tukeneet woff2-muotoa vuodesta 2016 lähtien. Can I Use -datan mukaan tuki kattaa yli 98% maailman selainmarkkinoista. Woff2-formaatti tarjoaa paremman pakkauksen (keskimäärin 30% tiiviimpi kuin woff). Tiedostot eot (tarvitaan vain IE8:lle), ttf ja svg voi huoletta poistaa fonts-kansiosta. Säilytä vain woff2, ja jos tarvitset tukea vanhalle Safarille iOS 12:ssa ja sitä aiemmissa, lisää woff varavaihtoehdoksi.
Kannattaako Font Awesomea ylipäätään käyttää vuonna 2026?
Se riippuu projektista. Jos sinulla on jo Font Awesome käytössä ja käytät 5-10 ikonia, osajoukkokäsittely (millä tahansa yllä olevalla tavalla) ratkaisee paino-ongelman tunnissa. Jos projekti on uusi ja valitset kirjastoa puhtaalta pöydältä, harkitse Lucidea tai Phosphoria: ne on rakennettu alusta alkaen tree-shakingin ympärille ja tuottavat nollan ylimääräistä kuormaa. Font Awesome on edelleen johtava ikoniekosysteemin määrässä ja integraatioissa, mutta sen painokustannus ilman osajoukkokäsittelyä on suurempi kuin nykyaikaisilla SVG-vaihtoehdoilla.
Kannattaako muutamasta kymmenestä kilotavusta välittää?
Ehdottomasti kyllä. Jokainen optimoimaton kilotavu kriittisellä renderöintipolulla vähentää konversiota suoraan. Amazon laski, että 100 ms:n latausviive maksaa 1% myynnissä. Google rankaisee hitaita sivuja mobiilihakutuloksissa. Tämä ei ole perfektionismia, vaan suoraa taloutta.
Valitse tilanteeseesi sopiva tapa:
- Minimi vaiva: Kit By Icon -asetuksella. 5 minuuttia, tulos heti CDN:stä.
- Paikallinen hostaus, ei rekisteröitymisiä: FontCut. 10 minuuttia, ZIP palvelimellasi.
- CI/CD-automaatio: fa-subset. Skannaa koodin, rakentaa uudelleen julkaisun yhteydessä.
- Täysi hallinta: FontForge tai IcoMoon. Vie enemmän aikaa, mutta tunnet jokaisen glyyfin.
Pudotus 450 kilotavusta 15 kilotavuun muuttaa nopeuden tuntuman dramaattisesti. Kokeile yhdessä projektissa, mittaa PageSpeed ennen ja jälkeen. Tulos puhuu puolestaan.
Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.