Уеб шрифтовете все още са най-лесната победа за производителността в повечето сайтове

Моделът, който продължава да се повтаря

Ако днес одитирате произволни десет production уебсайта, ще откриете приблизително една и съща ситуация с шрифтовете при повечето от тях:

• Шест до десет файла с шрифтове, заредени на началната страница
• Всички са в WOFF2 (добре), но без стратегия за font-display (лошо)
• Няколко тегла и стила, които не се използват никъде на страницата
• Целият стек се доставя от домейн на трета страна (обикновено Google Fonts), с всички DNS, TLS и privacy разходи, които това носи
• Няма поднабори чрез unicode-range, така че всеки посетител изтегля кирилските и гръцките глифове, дори ако страницата е на английски

Това не е проблем, характерен само за малки сайтове. Много добре финансирани маркетингови страници все още зареждат 600 KB шрифтове, преди първият абзац да може да бъде изрисуван. Щом веднъж започнете да забелязвате този модел, няма как да спрете да го виждате.

Поправката не е екзотична. Това са няколко добре познати техники, които са налични в браузърите от години.

Използвайте един вариативен шрифт вместо шест статични

Ако зареждате Inter Regular, Inter Medium, Inter SemiBold, Inter Bold и техните italics, изтегляте приблизително шест пъти повече байтове, отколкото са ви нужни. Един вариативен Inter шрифт покрива цялата ос на теглата (и наклон, в някои build-ове) в един файл, който е само малко по-голям от две статични тегла.

Историята с поддръжката в браузърите е решена от години — вариативните шрифтове работят навсякъде, където има значение. Оставащото колебание е най-вече наследена мускулна памет от ерата на статичните шрифтове.

Практично правило: един файл с вариативен шрифт за всяка писменост, за всяко семейство. Latin в един файл, Cyrillic в друг, Greek в трети, зареждани условно чрез unicode-range. Това е всичко.

Задайте разумен font-display

Поведението по подразбиране, когато персонализиран шрифт все още се зарежда, е да не се показва нищо — невидим текст — до три секунди. Това е възможно най-лошата настройка по подразбиране. Потребителите виждат празна страница и приемат, че нещо е счупено.

Добавете това към всяко правило @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap показва резервния шрифт веднага и заменя с персонализирания шрифт, когато той се зареди. Потребителят може да чете страницата от нулевата милисекунда. Компромисът е кратко изместване на оформлението при смяната, което смекчавате със следващата техника.

Съгласувайте метриките на резервния шрифт

Проблясъкът на нестилизиран текст изглежда неприятен само когато резервният и персонализираният шрифт имат много различни метрики. Съвременният CSS решава това със size-adjust, ascent-override и сродните им свойства:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

С добре настроени метрики на резервния шрифт смяната е едва забележима — думите заемат едно и също хоризонтално пространство преди и след пристигането на персонализирания шрифт.

Работата на Google по --allow-fallback-font-metrics вече е част от базовата поддръжка в браузърите, а има и tooling pipeline (библиотеката fontaine и подобни), който изчислява правилните стойности за секунди.

Хоствайте сами

Google Fonts е удобен, безплатен и носи два реални разхода:

1. Второ TLS ръкостискане. Дори с HTTP/3 и connection coalescing, допълнителен origin рядко е безплатен.
2. Въпрос за privacy и съответствие. Няколко европейски съда са постановили, че зареждането на Google Fonts от fonts.gstatic.com представлява предаване на лични данни (IP адреса) на трета страна. Самостоятелният хостинг премахва въпроса изцяло.

Процесът за изтегляне и хостване е:

1. Вземете WOFF2 файла (вариативен build, ако съществува)
2. Направете поднабор до писменостите, които вашата аудитория реално използва
3. Доставяйте го от същия origin като останалата част от сайта си, с дълъг Cache-Control: max-age=31536000, immutable
4. Preload-нете най-критичното тегло: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Това е целият процес. Отнема един следобед за съществуващ сайт и почти никога не се връщате назад.

Кога да пропуснете персонализираните шрифтове изцяло

Струва си да го кажем ясно: не всеки сайт има нужда от персонализиран шрифт. Стекът от системни шрифтове вече е наистина красив във всяка операционна система:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Теглото е правилно, метриките са правилни, рендирането е настроено за устройството, а разходът в байтове по мрежата е точно нула. За сайт с инструменти, вътрешно приложение, портфолио, което поставя съдържанието на първо място, или каквото и да е, насочено към потребители в бавни мрежи, системният стек е правилният отговор.

<!-- tool-cta:start -->

💡 Опитайте това: Конвертирайте вашите TTF или OTF файлове в модерния WOFF2 с готов за използване CSS чрез Webfont Generator, което е смяната на формата, препоръчана в публикацията.

<!-- tool-cta:end -->

Честното обобщение

За типичен малък сайт четири стъпки покриват цялата история на производителността при уеб шрифтовете:

1. Един вариативен шрифт за всяко семейство и всяка писменост
2. font-display: swap със съгласувани метрики на резервния шрифт
3. Самостоятелно хостнат с дълги cache headers и preload за критичното тегло
4. Или пропуснете шрифтовете изцяло и използвайте системния стек

Направете това веднъж и си връщате няколкостотин килобайта от началната страница, печелите няколкостотин милисекунди възприемана производителност и премахвате зависимост от трета страна по пътя. Малко промени имат по-добро съотношение между усилие и резултат.