🚀 Як стиснути Font Awesome до 10 КБ і прискорити завантаження сайту
Іконки роблять сайт зрозумілим. Навігація, соцмережі, кнопки дій, скрізь потрібні маленькі графічні підказки, які відвідувач зчитує миттєво. Font Awesome вирішує це завдання вже 14 років: бібліотека з понад 2000 безкоштовних іконок, які підключаються одним рядком. Проблема в тому, що цей рядок тягне за собою сотні кілобайт.
Повний пакет Font Awesome 7 Free важить близько 150 КБ за стиль, лише webfont-файли, без CSS. Додайте CSS (ще ~100 КБ мініфікованого коду), і кожне перше завантаження сторінки віддає користувачеві 250+ КБ. Гірше того: якщо ви використовуєте 8-10 іконок із двох тисяч, браузер однаково завантажує все. На мобільному 4G це 2-3 зайві секунди очікування. Google PageSpeed штрафує такі роздачі прямим зниженням бала.
Але проблема вирішувана. Ми покажемо, як вирізати з бібліотеки лише ті іконки, які реально використовуються на вашому сайті, й отримати підсумковий розмір 10-15 КБ без втрати функціональності. Розібрано всі способи: від автоматичних до ручних, від онлайн-інструментів до CLI-утиліт. Жодної магії, лише робочі техніки.
💡 Швидкий огляд:
- Проаналізуйте сайт і складіть список реально використовуваних іконок Font Awesome
- Виберіть метод оптимізації під свою ситуацію: онлайн-інструмент FontCut, CLI-утиліту fa-subset або офіційний механізм Kit-ів
- Для максимального контролю візьміть ручний шлях через FontForge або IcoMoon: він потребує зусиль, але дає повну владу над підсумковим файлом
- Згенеруйте урізаний webfont і CSS, замініть ними повну версію на сервері
- Заміряйте швидкість до і після: типовий приріст PageSpeed Score становить 20-40 балів
Навіщо взагалі різати Font Awesome?
Головна причина, швидкість завантаження. Дослідження Google показує: 53% мобільних відвідувачів залишають сторінку, якщо вона завантажується довше 3 секунд. Кожні зайві 100 КБ на критичному шляху рендерингу збільшують час до First Contentful Paint.
Font Awesome Free 7 містить три стилі: Solid, Regular і Brands. Сумарно це понад 2000 іконок і близько 450 КБ стиснених webfont-файлів. Типовий лендинг або блог використовує 10-20 іконок, менше ніж 1% бібліотеки. Все інше браузер завантажує марно.
Друга причина, Core Web Vitals. Метрика LCP (Largest Contentful Paint) напряму залежить від того, як швидко браузер отримує та відображає шрифти. Непідрізаний Font Awesome блокує відображення тексту, поки webfont не завантажиться. Після сабсетингу файл стає настільки маленьким, що браузер отримує його в межах першого мережевого запиту.
Третя причина, мобільний трафік. Користувачі на лімітних тарифах не скажуть вам спасибі за зайві 400 КБ на кожній сторінці. Сабсетинг повертає контроль над бюджетом завантаження.
Цифри з реальних кейсів: скорочення webfont-файлу з 345 КБ до 14,5 КБ дало приріст Lighthouse Performance Score з 52 до 89 балів на одному з проєктів. Різниця видна неозброєним оком: сторінка стає інтерактивною майже миттєво.
Спосіб 1: офіційний механізм Kit-ів (рекомендований)
Найпростіший і підтримуваний шлях, використовувати Font Awesome Kit із вбудованим сабсетингом. Метод працює з безкоштовним обліковим записом і не потребує встановлення сторонніх інструментів.
Як це працює
Kit — це персональний пакет Font Awesome, який ви налаштовуєте в особистому кабінеті на fontawesome.com. У налаштуваннях Kit-а є розділ «Icon Selection» із двома режимами:
- By Style, ви позначаєте галочками потрібні стилі (Solid, Regular, Brands), і Kit завантажує лише вибрані. Вже на цьому кроці відсікається два з трьох стилів, якщо вам потрібен лише Solid.
- By Icon, ви вказуєте конкретні іконки пошуком, і Kit формує файл, що містить лише їх. Саме цей режим дає максимальне стиснення.
Після збереження налаштувань Kit автоматично перезбирає пакет. Ви отримуєте тег <script>, який вставляєте в <head> сайту. Font Awesome CDN віддає вже підрізану версію. Жодних локальних файлів, жодного ручного складання.
Переваги Kit-підходу
- Не потрібно завантажувати та хостити файли: CDN Font Awesome роздає підрізаний пакет глобально
- При додаванні нової іконки ви просто оновлюєте список у налаштуваннях Kit-а, перезбирання відбувається автоматично
- Працює з Font Awesome Pro, включно з Duotone і Sharp-стилями
- Підтримує SVG+JS і Webfonts+CSS-режими
Коли Kit не підходить
Єдине обмеження: підрізаний Kit недоступний для завантаження на свій сервер на безкоштовному тарифі. Якщо вам критично хостити шрифти локально (внутрішня мережа, політика безпеки), Kit, не варіант. Тоді дивіться способи 2 і 3.
Спосіб 2: онлайн-інструмент FontCut
Якщо ви не хочете реєструватися у Font Awesome або віддаєте перевагу готовому ZIP-файлу, який можна покласти в репозиторій, підійде FontCut.com. Безкоштовний онлайн-генератор, заточений спеціально під Font Awesome 6.4.0 і Bootstrap Icons.
Процес складається з трьох кроків:
- Вибираєте набір іконок (Font Awesome Free 6.4.0, найсвіжіша доступна версія)
- Позначаєте галочками потрібні іконки у візуальній сітці
- Завантажуєте ZIP-архів із CSS і webfont-файлами, завантажуєте на свій сервер
Результат, автономний пакет із 10-15 КБ, який ви хостите самі. Інструмент не потребує реєстрації, а прев’ю показує підсумковий розмір у реальному часі.
Обмеження: FontCut використовує FA 6.4.0, а не актуальну версію 7.2.0. Для більшості проєктів різниця непомітна: іконки solid-стилю між версіями не змінюються. Але якщо вам потрібні іконки, додані в FA 7 (Pro+ пакети), FontCut їх не запропонує.
Спосіб 3: CLI-утиліта fa-subset (для розробників)
Автоматичне визначення використовуваних іконок, найточніший підхід. Утиліта fa-subset (Python, BSD-2-Clause, інструкція на Dev.to) сканує вихідний код проєкту, знаходить усі класи fa-* і генерує підрізаний webfont, що містить лише реально використовувані іконки.
Встановлення:
1 pip install fonttools
Базовий запуск (dry-run для аналізу):
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
Утиліта виводить список знайдених іконок і прогнозований розмір обрізаного файлу. Без прапорця --dry-run генерує готовий CSS і webfont у папці ./optimised.
Сильні сторони fa-subset:
- Сканує PHP, HTML, JS, Blade, Twig, Vue, React, будь-які текстові файли проєкту
- Розуміє дуотон-іконки (подвійні codepoint-и у Font Awesome 6+)
- Вміє видавати JSON-звіт для CI/CD-пайплайнів:
--report-json ./report.json --strict-styles - Працює з WordPress-темами, Laravel-шаблонами, React/Vue-компонентами
Реальний результат на production-сайті: стиснення з 803 КБ (fonts + CSS) до 14,5 КБ, скорочення на 98%. Утиліта безплатна й не прив’язана до сервісів Font Awesome.
Спосіб 4: IcoMoon (візуальний конструктор шрифтів)
IcoMoon — це вебзастосунок для створення кастомних іконкових шрифтів. Доступний за адресою icomoon.io/app. Підхід трохи складніший за Kit-и, але дає одну унікальну можливість: змішувати іконки з різних бібліотек в одному файлі.
Крок 1: оберіть пакет Font Awesome
Заходьте на icomoon.io/app, натискаєте «Add Icons From Library», знаходите Font Awesome у списку й тиснете «Add».
Крок 2: позначте потрібні іконки
У вікні вибору позначте всі іконки, які використовуються на вашому сайті, кліком по кожній. Можна обрати кілька бібліотек одночасно, наприклад, Font Awesome + Material Icons, і отримати єдиний файл з іконками з обох наборів.
Крок 3: згенеруйте та завантажте шрифт
Після вибору натисніть кнопку «Generate Font» унизу сторінки. IcoMoon покаже всі відібрані іконки й надасть кнопку «Download». ZIP-архів містить webfont-файли (woff, woff2, eot, svg, ttf), файл style.css і демонстраційний demo.html.
Збережіть файли в репозиторій сайту та підключіть style.css у <head>. Якщо щось пішло не так, відкрийте demo.html з архіву: там показано, як саме підключається й використовується шрифт.
IcoMoon добрий тоді, коли вам потрібно змішати іконки з різних наборів або коли ви принципово не хочете залежати від CDN Font Awesome.
Спосіб 5: ручне обрізання через FontForge
Найбільш трудомісткий, але й найбільш контрольований метод. Підходить, якщо ви хочете розуміти кожен байт підсумкового файлу або працюєте в середовищі без доступу до зовнішніх сервісів.
Крок 1: локалізуйте шрифт
Завантажте Font Awesome з офіційного сайту. Видаліть CDN-посилання з <head>, якщо воно було. Розпакуйте архів у репозиторій сайту.
Підключіть CSS локально:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Очистіть кеш браузера та перезавантажте сайт. Іконки мають відображатися, як і раніше, але тепер ви контролюєте файли на сервері.
Крок 2: видаліть зайві файли
Після розпакування архіву Font Awesome ви побачите структуру тек:
Для роботи потрібні лише CSS та webfont-файли. Сучасним браузерам достатньо формату woff2: тому файли ttf, eot і svg можна видалити.
Less- і SCSS-вихідники видаліть, якщо не плануєте їх компілювати. Залиште тільки css/ та fonts/ із файлом fa-solid-900.woff2 (або аналогічним для вашої версії).
Крок 3: відредагуйте webfont у FontForge
Завантажте та встановіть FontForge (безкоштовний редактор шрифтів з відкритим кодом). Відкрийте файл .woff2 через меню File → Open.
В інтерфейсі FontForge знайдіть панель гліфів. Щоб не скролити вручну, перейдіть в Encoding → Compact: усі зайняті позиції підтягнуться на початок.
Тепер найвідповідальніша частина: затисніть Shift і виділіть усі гліфи, які ваш сайт НЕ використовує. Видаліть їх (Edit → Clear). Залиште тільки іконки, які реально трапляються у верстці: соцмережі, стрілки, іконки меню, брендові логотипи.
Збережіть результат: File → Generate Fonts. Виберіть формат Web Open Font Format (woff2) і вкажіть ім'я файлу. Замініть вихідний webfont у папці fonts/ на обрізану версію.
Перезавантажте сайт і перевірте всі іконки. Якщо якась зникла, ви видалили потрібний гліф, відкрийте FontForge знову і повторіть відбір акуратніше.
А може, просто змінити бібліотеку?
Іноді найкраща оптимізація — це не оптимізувати Font Awesome, а взяти інструмент, який від початку легший. Сучасні альтернативи дають іконки у SVG-форматі з tree-shaking на рівні імпорту: у бандл потрапляють лише ті іконки, які ви явно імпортували.
Три варіанти, які варто розглянути:
Lucide Icons, 1460+ іконок, MIT-ліцензія, прямий спадкоємець Feather Icons. Іконки на 24px-сітці, стилістично близькі до FA, але пакет важить лічені кілобайти при tree-shaking. Для React/Vue/Svelte, рідні компоненти з пропсами
size,colorіstrokeWidth.Phosphor Icons, 1400+ іконок у шести стилях (thin, light, regular, bold, fill, duotone). Кожна іконка імпортується індивідуально:
import { House } from '@phosphor-icons/react'. Жодного невикористовуваного баласту.Bootstrap Icons, 2000+ SVG-іконок, безкоштовно, активно розвиваються. Пряма сумісність з Bootstrap-екосистемою, але можуть використовуватися й окремо. Окремі SVG-файли дозволяють вбудовувати іконки інлайн без додаткових запитів.
Якщо ваш сайт на WordPress, перегляньте наш посібник із додавання Font Awesome у WordPress. А для тих, хто хоче заглибитися в тему вебшрифтів, є розбір завантаження вебшрифтів без блокування рендерингу.
⁉️🤔 Часті запитання
Що таке сабсетинг іконок і для чого він потрібен?
Сабсетинг — це процес створення зменшеної версії іконкового шрифту, яка містить лише ті іконки, що реально використовуються на сайті. Повний пакет Font Awesome 7 Free важить близько 450 КБ стисненими webfont-файлами. Типовий сайт використовує 10-20 іконок, після сабсетингу файл скорочується до 10-15 КБ. Різниця в завантаженні миттєво відображається в PageSpeed Score: типовий приріст становить 20-40 балів.
Скільки іконок браузер завантажує, якщо я підключив Font Awesome через CDN?
Усі. CDN-посилання на
all.min.cssтягне за собою повний набір із трьох стилів: Solid, Regular і Brands. Браузер завантажує всі webfont-файли, навіть якщо на сторінці використана одна іконка. Саме тому CDN-підхід без Kit, найзатратніший за байтами. Kit із налаштуванням «By Icon» вирішує цю проблему: CDN віддає лише ті іконки, які ви явно вибрали в налаштуваннях.
Який метод оптимізації вибрати для WordPress-сайту?
Якщо сайт на WordPress і ви не хочете возитися з CLI, використовуйте офіційний Kit (спосіб 1). Налаштування займає 5 хвилин в особистому кабінеті fontawesome.com, результат доставляється через CDN. Якщо з міркувань безпеки не можна використовувати CDN, підійде FontCut (спосіб 2): завантажили ZIP, завантажили через FTP, підключили в
header.php. Для розробників, які хочуть автоматизації, fa-subset (спосіб 3) вміє сканувати PHP-шаблони теми та перезбирати шрифт під час кожного деплою.
Чи безпечно видаляти webfont-формати ttf, eot і svg?
Так. Сучасні браузери (Chrome, Firefox, Safari, Edge) підтримують woff2 з 2016 року. За даними Can I Use, підтримка становить 98%+ глобального браузерного ринку. Формат woff2 дає краще стиснення (в середньому на 30% компактніший за woff). Файли eot (був потрібен лише для IE8), ttf і svg можна сміливо видаляти з папки fonts. Залиште тільки woff2, а якщо потрібна підтримка старих Safari на iOS 12 і нижче, додайте woff як fallback.
Чи варто взагалі використовувати Font Awesome у 2026 році?
Залежить від проєкту. Якщо у вас уже впроваджений Font Awesome і використовується 5-10 іконок, сабсетинг (будь-який зі способів вище) вирішить проблему ваги за годину. Якщо проєкт новий і ви вибираєте бібліотеку з нуля, придивіться до Lucide або Phosphor: вони спочатку побудовані навколо tree-shaking і дають нульовий оверхед. Font Awesome залишається лідером за кількістю іконок в екосистемі та інтеграціями, але його вагова ціна без сабсетингу вища, ніж у сучасних SVG-альтернатив.
Чи варто возитися з парою десятків кілобайт?
Однозначно так. Кожен неоптимізований кілобайт на критичному шляху рендерингу безпосередньо знижує конверсію. Amazon підрахував, що 100 мс затримки завантаження коштують 1% продажів. Google штрафує повільні сторінки в мобільній видачі. Це не перфекціонізм, а пряма економіка.
Виберіть метод під свою ситуацію:
- Мінімум зусиль, Kit із налаштуванням By Icon. 5 хвилин, результат одразу в CDN.
- Локальний хостинг, без реєстрацій, FontCut. 10 хвилин, ZIP у вас на сервері.
- Автоматизація в CI/CD, fa-subset. Сканує код, перезбирає під час деплою.
- Повний контроль, FontForge або IcoMoon. Довше, але ви знаєте кожен гліф.
Скорочення з 450 КБ до 15 КБ кардинально змінює сприйняття швидкості. Спробуйте на одному проєкті, заміряйте PageSpeed до і після. Результат скаже сам за себе.
Професійна команда авторів та редакторів, що спеціалізуються на створенні якісного контенту.