🚀 Jak skompresować Font Awesome do 10 KB i przyspieszyć ładowanie strony
Ikonki sprawiają, że strona jest zrozumiała. Nawigacja, media społecznościowe, przyciski akcji, wszędzie potrzebne są małe graficzne podpowiedzi, które odwiedzający odczytuje natychmiast. Font Awesome rozwiązuje to zadanie już od 14 lat: biblioteka z ponad 2000 darmowych ikon, podłączanych jednym wierszem kodu. Problem w tym, że ten wiersz ciągnie za sobą setki kilobajtów.
Pełny pakiet Font Awesome 7 Free waży około 150 KB na styl, same pliki webfont, bez CSS. Proszę dodać CSS (kolejne ~100 KB zminifikowanego kodu), a każde pierwsze ładowanie strony przekaże użytkownikowi ponad 250 KB. Co gorsza: jeśli używają Państwo 8-10 ikon z dwóch tysięcy, przeglądarka i tak ładuje wszystko. Na mobilnym 4G to 2-3 dodatkowe sekundy oczekiwania. Google PageSpeed karze takie dostarczanie zasobów bezpośrednim obniżeniem wyniku.
Ale problem jest do rozwiązania. Pokażemy, jak wyciąć z biblioteki tylko te ikony, które są faktycznie używane na Państwa stronie, i uzyskać końcowy rozmiar 10-15 KB bez utraty funkcjonalności. Rozłożono na czynniki pierwsze wszystkie sposoby: od automatycznych po ręczne, od narzędzi online po narzędzia CLI. Żadnej magii, tylko działające techniki.
💡 Szybki przegląd:
- Proszę przeanalizować stronę i sporządzić listę faktycznie używanych ikon Font Awesome
- Proszę wybrać metodę optymalizacji odpowiednią do swojej sytuacji: narzędzie online FontCut, narzędzie CLI fa-subset lub oficjalny mechanizm Kitów
- Dla maksymalnej kontroli proszę wybrać ścieżkę ręczną przez FontForge lub IcoMoon: wymaga wysiłku, ale daje pełną władzę nad plikiem wynikowym
- Proszę wygenerować okrojony webfont i CSS, zastąpić nimi pełną wersję na serwerze
- Proszę zmierzyć szybkość przed i po: typowy przyrost wyniku PageSpeed Score to 20-40 punktów
Po co w ogóle ciąć Font Awesome?
Główny powód to szybkość ładowania. Badanie Google pokazuje: 53% odwiedzających mobilnych opuszcza stronę, jeśli ładuje się ona dłużej niż 3 sekundy. Każde dodatkowe 100 KB na ścieżce krytycznej renderowania wydłuża czas do First Contentful Paint.
Font Awesome Free 7 zawiera trzy style: Solid, Regular i Brands. Łącznie to ponad 2000 ikon i około 450 KB skompresowanych plików webfont. Typowy landing page lub blog używa 10-20 ikon, czyli mniej niż 1% biblioteki. Całą resztę przeglądarka ładuje niepotrzebnie.
Drugi powód to Core Web Vitals. Metryka LCP (Largest Contentful Paint) zależy bezpośrednio od tego, jak szybko przeglądarka pobiera i wyświetla czcionki. Nieprzycięty Font Awesome blokuje wyświetlanie tekstu, dopóki webfont się nie załaduje. Po subsecie plik staje się tak mały, że przeglądarka otrzymuje go w ramach pierwszego żądania sieciowego.
Trzeci powód to transfer mobilny. Użytkownicy na limitowanych taryfach nie podziękują Państwu za dodatkowe 400 KB na każdej stronie. Subseting przywraca kontrolę nad budżetem ładowania.
Liczby z rzeczywistych przypadków: zmniejszenie pliku webfont z 345 KB do 14,5 KB dało przyrost wyniku Lighthouse Performance Score z 52 do 89 punktów w jednym z projektów. Różnicę widać gołym okiem: strona staje się interaktywna niemal natychmiast.
Sposób 1: oficjalny mechanizm Kitów (zalecany)
Najprostsza i wspierana ścieżka to użycie Font Awesome Kit z wbudowanym subsetingiem. Metoda działa z darmowym kontem i nie wymaga instalowania narzędzi zewnętrznych.
Jak to działa
Kit to osobisty pakiet Font Awesome, który konfigurują Państwo w panelu klienta na fontawesome.com. W ustawieniach Kitu znajduje się sekcja „Icon Selection" z dwoma trybami:
- By Style, zaznaczają Państwo haczykami potrzebne style (Solid, Regular, Brands), a Kit ładuje tylko wybrane. Już na tym etapie odcina się dwa z trzech stylów, jeśli potrzebują Państwo tylko Solid.
- By Icon, wskazują Państwo konkretne ikony przez wyszukiwanie, a Kit tworzy plik zawierający tylko je. To właśnie ten tryb daje maksymalną kompresję.
Po zapisaniu ustawień Kit automatycznie przebudowuje pakiet. Otrzymują Państwo tag <script>, który wstawia się w <head> strony. CDN Font Awesome dostarcza już przyciętą wersję. Żadnych plików lokalnych, żadnego ręcznego składania.
Zalety podejścia Kit
- Nie trzeba pobierać i hostować plików: CDN Font Awesome dystrybuuje przycięty pakiet globalnie
- Przy dodawaniu nowej ikony po prostu aktualizują Państwo listę w ustawieniach Kitu, przebudowa następuje automatycznie
- Działa z Font Awesome Pro, włącznie ze stylami Duotone i Sharp
- Obsługuje tryby SVG+JS i Webfonts+CSS
Kiedy Kit nie jest odpowiedni
Jedyne ograniczenie: przycięty Kit nie jest dostępny do pobrania na własny serwer w taryfie darmowej. Jeśli krytyczne jest dla Państwa hostowanie czcionek lokalnie (sieć wewnętrzna, polityka bezpieczeństwa), Kit nie wchodzi w grę. Wtedy proszę spojrzeć na sposoby 2 i 3.
Sposób 2: narzędzie online FontCut
Jeśli nie chcą się Państwo rejestrować w Font Awesome lub wolą gotowy plik ZIP, który można umieścić w repozytorium, odpowiedni będzie FontCut.com. Darmowy generator online, wyspecjalizowany pod kątem Font Awesome 6.4.0 i Bootstrap Icons.
Proces składa się z trzech kroków:
- Wybierają Państwo zestaw ikon (Font Awesome Free 6.4.0, najnowsza dostępna wersja)
- Zaznaczają Państwo haczykami potrzebne ikony w siatce wizualnej
- Pobierają Państwo archiwum ZIP z CSS i plikami webfont, wgrywają na swój serwer
Rezultat to autonomiczny pakiet o wielkości 10-15 KB, który hostują Państwo samodzielnie. Narzędzie nie wymaga rejestracji, a podgląd pokazuje końcowy rozmiar w czasie rzeczywistym.
Ograniczenia: FontCut używa FA 6.4.0, a nie aktualnej wersji 7.2.0. Dla większości projektów różnica jest niezauważalna: ikony w stylu solid nie zmieniają się między wersjami. Ale jeśli potrzebują Państwo ikon dodanych w FA 7 (pakiety Pro+), FontCut ich nie zaoferuje.
Sposób 3: narzędzie CLI fa-subset (dla deweloperów)
Automatyczne wykrywanie używanych ikon to najdokładniejsze podejście. Narzędzie fa-subset (Python, BSD-2-Clause, instrukcja na Dev.to) skanuje kod źródłowy projektu, znajduje wszystkie klasy fa-* i generuje przycięty webfont zawierający tylko faktycznie używane ikony.
Instalacja:
1 pip install fonttools
Uruchomienie podstawowe (dry-run do analizy):
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
Narzędzie wypisuje listę znalezionych ikon i przewidywany rozmiar przyciętego pliku. Bez flagi --dry-run generuje gotowy CSS i webfont w folderze ./optimised.
Mocne strony fa-subset:
- Skanuje PHP, HTML, JS, Blade, Twig, Vue, React, dowolne pliki tekstowe projektu
- Rozumie ikony duotone (podwójne codepointy w Font Awesome 6+)
- Potrafi generować raport JSON dla pipeline'ów CI/CD:
--report-json ./report.json --strict-styles - Działa z motywami WordPress, szablonami Laravel, komponentami React/Vue
Rzeczywisty wynik na stronie produkcyjnej: kompresja z 803 KB (fonts + CSS) do 14,5 KB, redukcja o 98%. Narzędzie jest bezpłatne i nie jest powiązane z usługami Font Awesome.
Sposób 4: IcoMoon (wizualny konstruktor fontów)
IcoMoon to aplikacja webowa do tworzenia niestandardowych fontów ikonowych. Dostępna pod adresem icomoon.io/app. Podejście jest nieco bardziej złożone niż w przypadku Kitów, ale daje jedną unikalną możliwość: mieszanie ikon z różnych bibliotek w jednym pliku.
Krok 1: proszę wybrać pakiet Font Awesome
Proszę wejść na icomoon.io/app, kliknąć „Add Icons From Library", znaleźć Font Awesome na liście i kliknąć „Add".
Krok 2: proszę zaznaczyć potrzebne ikony
W oknie wyboru proszę zaznaczyć wszystkie ikony używane na Pana/Pani stronie, klikając każdą z nich. Można wybrać kilka bibliotek jednocześnie, na przykład Font Awesome + Material Icons, i otrzymać pojedynczy plik z ikonami z obu zestawów.
Krok 3: proszę wygenerować i pobrać font
Po dokonaniu wyboru proszę kliknąć przycisk „Generate Font" na dole strony. IcoMoon pokaże wszystkie wybrane ikony i udostępni przycisk „Download". Archiwum ZIP zawiera pliki webfont (woff, woff2, eot, svg, ttf), plik style.css oraz demonstracyjny demo.html.
Proszę zapisać pliki w repozytorium strony i podłączyć style.css w <head>. Jeśli coś poszło nie tak, proszę otworzyć demo.html z archiwum: jest tam pokazane, jak dokładnie podłącza się i używa fontu.
IcoMoon sprawdza się dobrze, gdy potrzebują Państwo zmieszać ikony z różnych zestawów lub gdy z zasady nie chcą Państwo polegać na CDN Font Awesome.
Sposób 5: ręczne przycinanie przez FontForge
Najbardziej pracochłonna, ale i dająca największą kontrolę metoda. Sprawdza się, gdy chcą Państwo rozumieć każdy bajt końcowego pliku lub pracują w środowisku bez dostępu do zewnętrznych serwisów.
Krok 1: proszę zlokalizować font
Proszę pobrać Font Awesome z oficjalnej strony. Proszę usunąć odnośnik CDN z <head>, jeśli był. Proszę rozpakować archiwum do repozytorium strony.
Proszę podłączyć CSS lokalnie:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Proszę wyczyścić pamięć podręczną przeglądarki i ponownie załadować stronę. Ikony powinny wyświetlać się jak dotychczas, ale teraz kontrolują Państwo pliki na serwerze.
Krok 2: proszę usunąć zbędne pliki
Po rozpakowaniu archiwum Font Awesome zobaczą Państwo strukturę katalogów:
Do działania potrzebne są tylko CSS i pliki webfont. Współczesnym przeglądarkom wystarczy format woff2: dlatego pliki ttf, eot i svg można usunąć.
Źródła Less i SCSS proszę usunąć, jeśli nie planują Państwo ich kompilować. Proszę zostawić tylko css/ oraz fonts/ z plikiem fa-solid-900.woff2 (lub analogicznym dla Państwa wersji).
Krok 3: proszę wyedytować webfont w FontForge
Proszę pobrać i zainstalować FontForge (darmowy edytor fontów o otwartym kodzie źródłowym). Proszę otworzyć plik .woff2 przez menu File → Open.
W interfejsie FontForge proszę znaleźć panel glifów. Aby nie przewijać ręcznie, proszę przejść do Encoding → Compact: wszystkie zajęte pozycje zostaną ściągnięte na początek.
Teraz najważniejsza część: proszę przytrzymać Shift i zaznaczyć wszystkie glify, których Państwa strona NIE używa. Proszę je usunąć (Edit → Clear). Proszę zostawić tylko ikony, które faktycznie występują w układzie strony: media społecznościowe, strzałki, ikony menu, logotypy marek.
Proszę zapisać wynik: File → Generate Fonts. Proszę wybrać format Web Open Font Format (woff2) i wskazać nazwę pliku. Proszę zastąpić źródłowy webfont w folderze fonts/ przyciętą wersją.
Proszę ponownie załadować stronę i sprawdzić wszystkie ikony. Jeśli jakaś zniknęła, usunęli Państwo potrzebny glif, proszę otworzyć FontForge ponownie i powtórzyć selekcję dokładniej.
A może po prostu zmienić bibliotekę?
Czasem najlepszą optymalizacją jest nie optymalizować Font Awesome, tylko sięgnąć po narzędzie, które od początku jest lżejsze. Współczesne alternatywy dają ikony w formacie SVG z tree-shakingiem na poziomie importu: do paczki trafiają tylko te ikony, które jawnie Państwo zaimportowali.
Trzy warianty warte rozważenia:
Lucide Icons, 1460+ ikon, licencja MIT, bezpośredni następca Feather Icons. Ikony na siatce 24px, stylistycznie zbliżone do FA, ale pakiet waży zaledwie kilka kilobajtów przy tree-shakingu. Dla React/Vue/Svelte, natywne komponenty z właściwościami
size,coloristrokeWidth.Phosphor Icons, 1400+ ikon w sześciu stylach (thin, light, regular, bold, fill, duotone). Każda ikona jest importowana indywidualnie:
import { House } from '@phosphor-icons/react'. Żadnego nieużywanego balastu.Bootstrap Icons, 2000+ ikon SVG, bezpłatnie, aktywnie rozwijane. Bezpośrednia kompatybilność z ekosystemem Bootstrap, ale mogą być używane również osobno. Oddzielne pliki SVG pozwalają osadzać ikony inline bez dodatkowych żądań.
Jeśli Pana/Pani strona działa na WordPress, proszę zajrzeć do naszego poradnika dodawania Font Awesome w WordPress. A dla tych, którzy chcą zgłębić temat fontów internetowych, mamy analizę ładowania fontów internetowych bez blokowania renderowania.
⁉️🤔 Często zadawane pytania
Czym jest subsetowanie ikon i do czego służy?
Subsetowanie to proces tworzenia pomniejszonej wersji fontu z ikonami, która zawiera tylko te ikony, które są faktycznie używane na stronie. Pełny pakiet Font Awesome 7 Free waży około 450 KB w skompresowanych plikach webfont. Typowa strona używa 10-20 ikon, po subsetowaniu plik zmniejsza się do 10-15 KB. Różnica w ładowaniu natychmiast przekłada się na wynik PageSpeed: typowy wzrost to 20-40 punktów.
Ile ikon ładuje przeglądarka, jeśli podłączę Font Awesome przez CDN?
Wszystkie. Link CDN do
all.min.csspobiera pełny zestaw trzech stylów: Solid, Regular i Brands. Przeglądarka ładuje wszystkie pliki webfont, nawet jeśli na stronie użyto tylko jednej ikony. Dlatego właśnie podejście CDN bez Kitu jest najbardziej kosztowne bajtowo. Kit z ustawieniem „By Icon" rozwiązuje ten problem: CDN dostarcza tylko te ikony, które jawnie wybrano w ustawieniach.
Jaką metodę optymalizacji wybrać dla strony na WordPress?
Jeśli strona jest na WordPress i nie chce Pan/Pani zawracać sobie głowy CLI, proszę użyć oficjalnego Kitu (sposób 1). Konfiguracja zajmuje 5 minut w panelu klienta na fontawesome.com, wynik dostarczany jest przez CDN. Jeśli ze względów bezpieczeństwa nie można użyć CDN, sprawdzi się FontCut (sposób 2): pobiera Pan/Pani ZIP, wgrywa przez FTP, podłącza w
header.php. Dla programistów, którzy chcą automatyzacji, fa-subset (sposób 3) potrafi skanować szablony PHP motywu i przebudowywać font przy każdym wdrożeniu.
Czy bezpiecznie jest usuwać formaty webfont ttf, eot i svg?
Tak. Współczesne przeglądarki (Chrome, Firefox, Safari, Edge) obsługują woff2 od 2016 roku. Według danych Can I Use wsparcie wynosi ponad 98% globalnego rynku przeglądarek. Format woff2 zapewnia lepszą kompresję (średnio o 30% mniejszy niż woff). Pliki eot (potrzebny tylko dla IE8), ttf i svg można bezpiecznie usunąć z folderu fonts. Proszę zostawić tylko woff2, a jeśli potrzebna jest obsługa starych Safari na iOS 12 i starszych, proszę dodać woff jako fallback.
Czy w ogóle warto używać Font Awesome w 2026 roku?
To zależy od projektu. Jeśli ma Pan/Pani już wdrożony Font Awesome i używa 5-10 ikon, subsetowanie (dowolnym ze sposobów powyżej) rozwiąże problem wagi w godzinę. Jeśli projekt jest nowy i wybiera Pan/Pani bibliotekę od zera, proszę przyjrzeć się Lucide lub Phosphor: są one od podstaw zbudowane wokół tree-shakingu i dają zerowy narzut. Font Awesome pozostaje liderem pod względem liczby ikon w ekosystemie i integracji, ale jego koszt wagowy bez subsetowania jest wyższy niż w przypadku nowoczesnych alternatyw SVG.
Czy warto zawracać sobie głowę kilkudziesięcioma kilobajtami?
Zdecydowanie tak. Każdy niezoptymalizowany kilobajt na ścieżce krytycznej renderowania bezpośrednio obniża konwersję. Amazon obliczył, że 100 ms opóźnienia ładowania kosztuje 1% sprzedaży. Google karze wolne strony w wynikach mobilnych. To nie perfekcjonizm, a bezpośrednia ekonomia.
Proszę wybrać metodę odpowiednią do swojej sytuacji:
- Minimum wysiłku, Kit z ustawieniem By Icon. 5 minut, wynik od razu w CDN.
- Lokalny hosting, bez rejestracji, FontCut. 10 minut, ZIP na Pana/Pani serwerze.
- Automatyzacja w CI/CD, fa-subset. Skanuje kod, przebudowuje podczas wdrożenia.
- Pełna kontrola, FontForge lub IcoMoon. Dłużej, ale zna Pan/Pani każdy glif.
Zmniejszenie z 450 KB do 15 KB radykalnie zmienia postrzeganie szybkości. Proszę spróbować na jednym projekcie, zmierzyć PageSpeed przed i po. Wynik mówi sam za siebie.
Profesjonalny zespół autorów i redaktorów specjalizujących się w tworzeniu treści wysokiej jakości.