🚀 Kuidas kahandada Font Awesome 10 KB-ni ja kiirendada oma veebisaiti
Ikoonid muudavad veebisaidid intuitiivseks. Navigatsioon, sotsiaalmeedia, tegevusnupud: igal pool on vaja väikeseid visuaalseid vihjeid, mille külastajad koheselt ära tunnevad. Font Awesome on seda probleemi lahendanud 14 aastat, pakkudes üle 2000 tasuta ikooniga teeki, mis ühendub ühe reaga. Probleem on selles, et see üks rida toob kaasa sadu kilobaitte.
Täielik Font Awesome 7 Free pakett kaalub ainult veebifondifailide osas umbes 150 KB stiili kohta, ilma CSS-ita. Lisage CSS (veel ~100 KB minifitseeritult) ja iga esimene lehe laadimine edastab kasutajale 250+ KB. Hullem veel: kui kasutate kahest tuhandest ikoonist 8-10, laadib brauser ikkagi kõik alla. Mobiilses 4G-võrgus tähendab see 2-3 lisasekundit ootamist. Google PageSpeed karistab sellist andmemahtu otsese skoori vähendamisega.
Kuid probleem on lahendatav. Näitame teile, kuidas eraldada teegist ainult teie saidil tegelikult kasutatavad ikoonid ja saavutada lõplikuks mahuks 10-15 KB, kaotamata funktsionaalsust. Kõik meetodid on kaetud: automaatsest kuni manuaalseni, veebitööriistadest kuni CLI-utiliitideni. Ei mingit maagiat, ainult toimivad tehnikad.
💡 Kiirülevaade:
- Analüüsige oma saiti ja koostage nimekiri tegelikult kasutatavatest Font Awesome ikoonidest
- Valige oma olukorrale sobiv optimeerimismeetod: FontCut veebitööriist, fa-subset CLI-utiliit või ametlik Kit-mehhanism
- Maksimaalse kontrolli saavutamiseks valige manuaalne tee FontForge'i või IcoMooni kaudu: see nõuab pingutust, kuid annab teile täieliku kontrolli lõppfaili üle
- Genereerige kärbitud veebifont ja CSS, asendage nendega oma serveris täisversioon
- Mõõtke kiirust enne ja pärast: tüüpiline PageSpeed Score'i paranemine on 20-40 punkti
Milleks Font Awesome'i üldse kärpida?
Peamine põhjus on laadimiskiirus. Google'i uuring näitab, et 53% mobiilikülastajatest lahkub lehelt, kui selle laadimine võtab kauem kui 3 sekundit. Iga täiendav 100 KB kriitilisel renderdusteel suurendab esimese sisulise renderduse (First Contentful Paint) aega.
Font Awesome Free 7 sisaldab kolme stiili: Solid, Regular ja Brands. Kokku on see üle 2000 ikooni ja umbes 450 KB pakitud veebifondifaile. Tüüpiline maandumisleht või blogi kasutab 10-20 ikooni, mis on vähem kui 1% teegist. Brauser laadib kogu ülejäänu asjatult alla.
Teine põhjus on Core Web Vitals. LCP (Largest Contentful Paint) mõõdik sõltub otseselt sellest, kui kiiresti brauser fonte vastu võtab ja renderdab. Kärpimata Font Awesome blokeerib teksti renderdamise seni, kuni veebifont laadib. Pärast alamhulga loomist muutub fail piisavalt väikeseks, et brauser saab selle kätte esimese võrgupäringuga.
Kolmas põhjus on mobiililiiklus. Piiratud andmemahuga pakettide kasutajad ei tänagi teid iga lehe kohta täiendava 400 KB eest. Alamhulga loomine tagastab kontrolli teie laadimiseelarve üle.
Reaalsed numbrid: ühes projektis tõstis veebifondifaili vähendamine 345 KB-lt 14,5 KB-le Lighthouse Performance Score'i 52-lt 89 punktile. Erinevus on palja silmaga nähtav: leht muutub interaktiivseks peaaegu silmapilkselt.
1. Meetod: ametlik Kit-mehhanism (soovitatav)
Lihtsaim ja enim toetatud lähenemine on sisseehitatud alamhulga loomisega Font Awesome Kiti kasutamine. See meetod töötab tasuta kontoga ega vaja kolmandate osapoolte tööriistu.
Kuidas see töötab
Kit on isikupärastatud Font Awesome'i pakett, mille seadistate oma armatuurlaual saidil fontawesome.com. Kiti seadetes on jaotis "Icon Selection" kahe režiimiga:
- Stiili järgi: märgite vajalikud stiilid (Solid, Regular, Brands) ja Kit laadib ainult need valitud stiilid. Juba selle sammuga välistate kolmest stiilist kaks, kui vajate ainult Solid-stiili.
- Ikooni järgi: määrate otsingu kaudu konkreetsed ikoonid ja Kit genereerib ainult neid sisaldava faili. See režiim tagab maksimaalse tihenduse.
Pärast seadete salvestamist ehitab Kit paketi automaatselt ümber. Saate <script>-sildi, mille sisestate oma saidi <head>-ossa. Font Awesome'i CDN edastab juba kärbitud versiooni. Ei mingeid kohalikke faile ega käsitsi ehitamist.
Kit-lähenemise eelised
- Pole vaja faile alla laadida ja hostida: Font Awesome'i CDN levitab kärbitud paketti ülemaailmselt
- Uue ikooni lisamisel uuendate lihtsalt nimekirja Kiti seadetes ja ümberehitamine toimub automaatselt
- Töötab Font Awesome Proga, sealhulgas Duotone ja Sharp stiilidega
- Toetab nii SVG+JS kui ka Webfonts+CSS režiime
Millal Kit ei sobi
Ainus piirang: kärbitud Kiti ei saa tasuta tasemel oma serverisse alla laadida. Kui fontide kohalik hostimine on teie jaoks kriitiline (sisevõrk, turbepoliitika), ei ole Kit valik. Sel juhul vaadake meetodeid 2 ja 3.
2. Meetod: FontCut veebitööriist
Kui te ei soovi Font Awesome'is registreeruda või eelistate valmis ZIP-faili, mille saate oma repositooriumisse panna, proovige FontCut.com. See on tasuta veebigeneraator, mis on spetsiaalselt loodud Font Awesome 6.4.0 ja Bootstrap Icons'i jaoks.
Protsess koosneb kolmest sammust:
- Valige ikoonikomplekt (Font Awesome Free 6.4.0, uusim saadaolev versioon)
- Märgistage visuaalses ruudustikus vajalikud ikoonid
- Laadige alla ZIP-arhiiv CSS-i ja veebifondifailidega, laadige oma serverisse
Tulemuseks on eraldiseisev 10-15 KB pakett, mida ise hostite. Tööriist ei nõua registreerimist ja eelvaade näitab lõplikku mahtu reaalajas.
Piirang: FontCut kasutab FA 6.4.0, mitte praegust versiooni 7.2.0. Enamiku projektide puhul on erinevus tühine: solid-stiilis ikoonid versioonide vahel ei muutu. Kuid kui vajate FA 7-s lisatud ikoone (Pro+ paketid), ei paku FontCut neid.
3. Meetod: fa-subset CLI-utiliit (arendajatele)
Kasutatud ikoonide automaatne tuvastamine on kõige täpsem lähenemine. Utiliit fa-subset (Python, BSD-2-Clause, juhised Dev.to-s) skannib teie projekti lähtekoodi, leiab kõik fa-* klassid ja genereerib kärbitud veebifondi, mis sisaldab ainult tegelikult kasutatud ikoone.
Paigaldamine:
1 pip install fonttools
Lihtne käivitamine (kuivkäivitus analüüsiks):
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
Utiliit väljastab leitud ikoonide nimekirja ja kärbitud faili prognoositava suuruse. Ilma --dry-run liputa genereerib see valmis CSS-i ja veebifondi kausta ./optimised.
fa-subseti tugevused:
- Skannib PHP, HTML, JS, Blade, Twig, Vue, React ja mis tahes tekstifaile sinu projektis
- Mõistab duotone-ikoone (kaks koodipunkti Font Awesome 6+ puhul)
- Oskab CI/CD torustike jaoks väljastada JSON-raportit:
--report-json ./report.json --strict-styles - Töötab WordPressi teemade, Laraveli mallide ning Reacti/Vue komponentidega
Reaalne tootmistulemus: pakkimine 803 KB (fondid + CSS) → 14,5 KB, 98% vähenemine. Utiliit on tasuta ega ole seotud Font Awesome'i teenustega.
Meetod 4: IcoMoon (visuaalne fondiehitaja)
IcoMoon on veebirakendus kohandatud ikoonifontide loomiseks. See on saadaval aadressil icomoon.io/app. Lähenemine on pisut keerukam kui Kit'ide puhul, kuid pakub ühte ainulaadset võimalust: erinevatest teekidest pärit ikoonide segamist ühte faili.
1. Samm: vali Font Awesome'i pakett
Mine lehele icomoon.io/app, klõpsa „Add Icons From Library", leia loendist Font Awesome ja klõpsa „Add".
2. Samm: märgi vajalikud ikoonid
Valikuaknas märgi kõik oma saidil kasutatavad ikoonid, klõpsates igaühel neist. Saad valida mitu teeki korraga (näiteks Font Awesome + Material Icons) ja saada ühe faili, mis sisaldab mõlema komplekti ikoone.
3. Samm: genereeri ja laadi font alla
Pärast valiku tegemist klõpsa lehe allservas nuppu „Generate Font". IcoMoon kuvab kõik valitud ikoonid ja pakub nuppu „Download". ZIP-arhiiv sisaldab veebifondifaile (woff, woff2, eot, svg, ttf), faili style.css ja demo demo.html.
Salvesta failid oma saidi repositooriumisse ja ühenda style.css <head> sektsioonis. Kui midagi läks valesti, ava arhiivist demo.html: see näitab täpselt, kuidas font on ühendatud ja kasutusel.
IcoMoon töötab hästi, kui on vaja segada erinevatest komplektidest ikoone või kui sa põhimõtteliselt ei soovi sõltuda Font Awesome'i CDN-ist.
Meetod 5: käsitsi kärpimine FontForge’i abil
Kõige töömahukam, kuid samas ka kõige kontrollitavam meetod. See sobib juhtudeks, kui soovid mõista lõppfaili iga baiti või töötad keskkonnas, kus puudub ligipääs välistele teenustele.
1. Samm: fondi lokaliseerimine
Laadi Font Awesome alla ametlikult veebisaidilt. Eemalda <head>-ist CDN-i link, kui see seal oli. Paki arhiiv oma saidi repositooriumisse lahti.
Ühenda CSS lokaalselt:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Tühjenda brauseri vahemälu ja laadi sait uuesti. Ikoonid peaksid kuvama nagu varem, kuid nüüd kontrollid sa faile oma serveris.
2. Samm: mittevajalike failide eemaldamine
Pärast Font Awesome’i arhiivi lahtipakkimist näed järgmist kaustastruktuuri:
Tööks on vaja ainult CSS-i ja veebifondi faile. Kaasaegsed brauserid vajavad ainult woff2 vormingut, seega ttf, eot ja svg failid võib kustutada.
Kustuta Lessi ja SCSS-i lähtefailid, kui sa ei plaani neid kompileerida. Jäta alles ainult css/ ja fonts/ koos fa-solid-900.woff2 failiga (või selle ekvivalendiga sinu versiooni puhul).
3. Samm: veebifondi muutmine FontForge’is
Laadi alla ja paigalda FontForge (tasuta avatud lähtekoodiga fondiredaktor). Ava .woff2 fail File → Open kaudu.
FontForge’i liideses leia glüüfide paneel. Käsitsi kerimise vältimiseks mine Encoding → Compact: kõik hõivatud positsioonid liiguvad algusesse.
Nüüd kõige kriitilisem osa: hoia all Shift ja vali kõik glüüfid, mida sinu sait EI kasuta. Kustuta need (Edit → Clear). Jäta alles ainult need ikoonid, mis on tegelikult sinu märgendis olemas: sotsiaalmeedia, nooled, menüüikoonid, brändilogod.
Salvesta tulemus: File → Generate Fonts. Vali Web Open Font Format (woff2) ja määra failinimi. Asenda originaalne veebifont kaustas fonts/ kärbitud versiooniga.
Laadi sait uuesti ja kontrolli kõiki ikoone. Kui mõni kadus, kustutasid vajaliku glüüfi: ava FontForge uuesti ja korda valikut hoolikamalt.
Või äkki lihtsalt vahetada teeki?
Mõnikord ei ole parim optimeerimine Font Awesome’i optimeerimine, vaid algusest peale kergema tööriista valimine. Kaasaegsed alternatiivid pakuvad ikoone SVG-vormingus koos puurapudusega (tree-shaking) impordi tasemel: lõppkomplekti jõuavad ainult need ikoonid, mille sa selgesõnaliselt impordid.
Kolm kaalumist väärivat varianti:
Lucide Icons: 1460+ ikooni, MIT litsents, Feather Iconsi otsene järeltulija. Ikoonid 24px ruudustikul, stiililt FA-le lähedased, kuid pakett kaalub puurapudusega vaid kilobaite. Reacti/Vue/Svelte jaoks olemas natiivsed komponendid koos
size,colorjastrokeWidthatribuutidega.Phosphor Icons: 1400+ ikooni kuues stiilis (õhuke, kerge, tavaline, paks, täide, duotoon). Iga ikoon imporditakse eraldi:
import { House } from '@phosphor-icons/react'. Ei mingit kasutamata ballasti.Bootstrap Icons: 2000+ SVG-ikooni, tasuta, aktiivselt arenduses. Otsene ühilduvus Bootstrapi ökosüsteemiga, kuid kasutatav ka iseseisvalt. Eraldi SVG-failid võimaldavad ikoone manustada reasiseselt ilma täiendavate päringuteta.
Kui teie sait töötab WordPressis, vaadake meie juhendit Font Awesome’i lisamine WordPressi. Neile, kes soovivad veebifontidesse süvitsi minna, on olemas ülevaade veebifontide laadimisest ilma renderdamist blokeerimata.
⁉️🤔 Korduma kippuvad küsimused
Mis on ikoonide alamhulkadeks jagamine ja miks seda vaja on?
Alamhulkadeks jagamine on protsess, mille käigus luuakse vähendatud versioon ikoonifondist, mis sisaldab ainult saidil tegelikult kasutatavaid ikoone. Täielik Font Awesome 7 Free pakett kaalub tihendatud veebifondifailidena umbes 450 KB. Tüüpiline sait kasutab 10-20 ikooni; pärast alamhulkadeks jagamist kahaneb fail 10-15 KB-ni. Laadimise erinevus kajastub koheselt PageSpeedi skooris: tüüpiline paranemine on 20-40 punkti.
Kui palju ikoone brauser laadib, kui ühendasin Font Awesome’i CDN-i kaudu?
Kõik. CDN-i link failile
all.min.csstõmbab kaasa kõik kolm stiili: Solid, Regular ja Brands. Brauser laadib kõik veebifondifailid, isegi kui lehel kasutatakse ainult ühte ikooni. Just seepärast on CDN-i lähenemine ilma Kitita kõige mahukam. „By Icon" seadistusega Kit lahendab selle probleemi: CDN edastab ainult need ikoonid, mille olete seadetes selgesõnaliselt valinud.
Millise optimeerimismeetodi peaksin WordPressi saidi jaoks valima?
Kui teie sait töötab WordPressis ja te ei soovi käsureaga tegeleda, kasutage ametlikku Kiti (1. meetod). Seadistamine võtab fontawesome.com armatuurlaual aega 5 minutit ja tulemusi serveeritakse kohe CDN-i kaudu. Kui turvapoliitika keelab CDN-i kasutamise, töötab FontCut (2. meetod): laadige ZIP alla, laadige FTP kaudu üles, ühendage failis
header.php. Arendajatele, kes soovivad automatiseerimist, suudab fa-subset (3. meetod) skannida teie teema PHP malle ja ehitada fondi uuesti iga juurutamise ajal.
Kas veebifondivorminguid ttf, eot ja svg on ohutu kustutada?
Jah. Kaasaegsed brauserid (Chrome, Firefox, Safari, Edge) on woff2 toetanud alates 2016. aastast. Can I Use andmetel katab tugi üle 98% ülemaailmsest brauseriturust. Woff2-vorming pakub paremat tihendust (keskmiselt 30% kompaktsem kui woff). Failid eot (vajalik ainult IE8 jaoks), ttf ja svg võib fondikaustast ohutult kustutada. Jätke alles ainult woff2 ja kui vajate tuge vanale Safarile iOS 12 ja vanemates versioonides, lisage varuvariandina woff.
Kas Font Awesome’i tasub 2026. aastal üldse kasutada?
See sõltub projektist. Kui teil on Font Awesome juba rakendatud ja kasutate 5-10 ikooni, lahendab alamhulkadeks jagamine (ükskõik milline ülaltoodud meetod) mahuprobleemi tunniga. Kui projekt on uus ja valite teeki nullist, kaaluge Lucide’i või Phosphori: need on algusest peale üles ehitatud puu-raputamise (tree-shaking) põhimõttel ega tekita üleliigset koormust. Font Awesome jääb ikoonide ökosüsteemi mahu ja integratsioonide poolest liidriks, kuid selle mahukulu ilma alamhulkadeks jagamiseta on suurem kui kaasaegsetel SVG alternatiividel.
Kas mõnekümne kilobaidi pärast tasub vaeva näha?
Kindlasti jah. Iga optimeerimata kilobait kriitilisel renderdusteel vähendab otseselt konversiooni. Amazon arvutas välja, et 100 ms laadimisviivitust maksab 1% müügist. Google karistab aeglasi lehti mobiilsetes otsingutulemustes. See ei ole perfektsionism, vaid otsene majanduslikkus.
Valige oma olukorrale sobiv meetod:
- Minimaalne pingutus: Kit „By Icon" seadistusega. 5 minutit, tulemus kohe CDN-is.
- Kohalik majutus, registreerimisteta: FontCut. 10 minutit, ZIP teie serveris.
- CI/CD automatiseerimine: fa-subset. Skannib koodi, ehitab juurutamisel uuesti.
- Täielik kontroll: FontForge või IcoMoon. Võtab kauem aega, kuid teate iga glüüfi.
Vähendamine 450 KB-lt 15 KB-le muudab kiiruse tajumist dramaatiliselt. Proovige seda ühe projekti peal, mõõtke PageSpeedi enne ja pärast. Tulemus räägib enda eest.
Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.