Есть ли выигрыш от локального размещения (self-hosting) шрифтов Google?
Когда вы работаете над своим сайтом и все глубже погружаетесь в технологии, — очень многие вещи, которые раньше были тривиальными, — уже такими не будут казаться. Например, вы многое узнаете о веб-шрифтах и специфике их использования. Особенно, когда возникнет экзистенциальный вопрос: стоит ли заменить подключение шрифтов Google с удаленного сервера на свой?
Давайте рассмотрим основные моменты данного вопроса, включая оценку влияния на производительность и эффективность.
Нюансы использования сторонних ресурсов с удаленного хостинга
Некоторое время было модно использовать CDN для подключения ресурсов (например, jQuery) с чужого домена, что базировалось на ограничениях браузеров по количеству подключений. Сегодня же, при повсеместности HTTPS и HTTP/2 (выигрывающего от одного «большого» соединения, а не многих «маленьких»), использование других доменов часто приводит к потере производительности из-за «дорогих» подключений.
Многие шли путем шардирования домена, и разделяли его на несколько поддоменов для ресурсов (например, fonts.site.com), чтобы увеличить диапазон подключений, но сегодня от этого уже не будет той пользы, как могло бы быть ранее.
Конфиденциальность и безопасность
Другой стороной медали по использованию сторонних CDN является вопрос конфиденциальности: трудно отследить, какое отслеживание они осуществляют. А по нормам законодательства (например, GDPR), сайты должны четко перечислять все используемые файлы cookie, и эту задачу не облегчает использование сторонних ресурсов.
Не говоря уже о последствиях для безопасности. Хотя можно использовать SRI (Subresource Integrity), — механизм безопасности с проверкой загруженных ресурсов, когда браузер сравнивает их хэш с указанным в атрибуте integrity, — однако это работает только для статических файлов. Непрохождение проверки может стать единой точкой отказа (SPOF, Single Point of Failure), что приведет к блокированию всего сайта. Хотя Google Fonts трудно вывести из строя, но гипотетически его могут блокировать прокси-серверы стран с диктатурой.
Итак, все больше доводов складывается в пользу самостоятельного и локального размещения статических ресурсов. Шрифты – это статические ресурсы, так что их желательно размещать на своем сервере, не правда ли? Оказывается, все не так просто.
Шрифты Google и как они работают
Google Fonts – это отличный бесплатный ресурс, содержащий большое количество шрифтов с открытым кодом. Его особенность – функция поставщика веб-ресурсов (CDN), позволяющая начать использовать шрифт, просто добавив одну строку кода на сайт:
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
Существенным недостатком является неочевидность воздействия на производительность. Ваш сайт сначала загружает таблицу стилей из fonts.googleapis.com, которая, в свою очередь, содержит CSS-код со ссылками на файлы шрифтов на домене fonts.gstatic.com. Вот как примерно выглядит файл подключения шрифтов:
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ... другие языковые подмножества ... */
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ... */
Такая конструкция оказывает влияние на производительность: поскольку шрифты определяются браузером поздно во время загрузки страницы (ведь нужно скачать еще и CSS), еще и домен другой, еще и нужно установить HTTPS-соединение. Может пройти несколько секунд, прежде чем начнет загружаться сам шрифт.
Как улучшить подключение шрифтов Google?
Мы можем использовать подсказку ресурса предварительного подключения (preconnect), чтобы попросить браузер открыть соединение заранее и сэкономить время:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
Эта одна строка кода позволяет немного улучшить производительность. Предварительно загружать сами шрифты невозможно, поскольку Google Fonts использует уникальные хеши в их названиях (например, 4iCs6KVjbNBYlgoKcg72j00.woff2 вместо Ubuntu.woff2).
Замена отображения шрифта (Font Display Swap)
Инструкция font-display: swap; уведомляет браузер сначала использовать резервный системный шрифт, а затем заменить его настоящим после загрузки. Это улучшает производительность, поскольку рендеринг контента не откладывается. Однако это приводит к «вспышке нестилизованного текста» (Flash of Unstyled Text, FOUT), что может быть немного резким для глаз. Альтернативой (с сомнительной репутацией) является «вспышка невидимого текста» (Flash of Invisible Text, FOIT), когда текст скрывается, пока не появится нужный шрифт. Если вы используете шрифты Google, проверьте, есть ли параметр &display=swap в URL-адресе, и если нет, добавьте его.
Self-hosting: основные моменты и сложности
Не лучше ли локальное размещение и CSS, и шрифта? Ведь есть онлайн-инструменты, которые способны загружать и конвертировать любые шрифты. Кажется, что все просто: скачали шрифт к себе на сервер, подключили и не нужно полагаться на посторонние домены.
Однако при углублении в тему можно заметить, что файлы шрифтов стали больше. Почему? Потому что при самостоятельном локальном размещении вы теряете разумные оптимизации Google:
- Font-Subsetting: Google Fonts автоматически удаляет из файла шрифта символы, которые вам не нужны (например, иероглифы для англоязычного сайта), значительно уменьшая его размер. При самостоятельной загрузке вы получаете полный файл со всеми символами.
- Умная доставка CSS: Google отдает оптимизированный CSS в зависимости от браузера пользователя.
- Будущее улучшение: Вам могут быть недоступны новые технологии, такие как переменные (вариативные) шрифты.
Что такое переменные шрифты?
Переменные (вариативные) шрифты позволяют использовать различные стили (толщину, наклон) без необходимости загружать отдельные файлы для каждого стиля. Это значительно уменьшает количество запросов и общий объем данных. Например, вместо загрузки отдельно `Normal`, `Bold`, `Italic` и `Bold Italic` (что может весить 500 КБ и более), вы загружаете один файл и управляете стилями через CSS.
Вывод: следует ли размещать шрифты локально?
Отвечая на вопрос в заглавии: да, в большинстве случаев лучше размещать ресурсы локально, поскольку это значительно улучшает производительность. По средним подсчетам локально размещенные шрифты сокращают время загрузки примерно вдвое. Основная причина: вы избавляетесь от лишнего CSS-файла из другого домена, который блокирует рендеринг страницы. Браузер видит, что есть CSS для загрузки, поэтому блокирует всю страницу, пока мы подключаемся к этому домену, а затем загружаем его. В этом случае весь ваш сайт будет заблокирован для рендеринга, пока не закончится тайм-аут браузера.
Однако, Google Fonts – это не просто хранилище шрифтов, это разумный механизм доставки. Переход на self-hosting требует от вас самостоятельной реализации многих оптимизаций: font-display: swap, font-subsetting и удаления хинтинга (изменения контура шрифта при его растеризации).
Если вы действительно заинтересованы в производительности своего сайта (а вам стоит!), тогда лучше делать это правильно. Самостоятельное размещение шрифтов несколько сложнее, чем использование CDN шрифтов от Google, но теперь у вас есть лучшее понимание этого процесса. Тестируйте, тестируйте и еще раз тестируйте, чтобы найти оптимальное решение именно для вашего сайта.
Надеюсь, вам было интересно осмотреть данную тему, и, надеюсь, что это даст вам некоторые идеи по улучшению загрузки шрифтов.
Нужно больше информации?
