Core Web Vitals: Как избежать проблем с производительностью веб-шрифтов

Веб-шрифты придают индивидуальность вашему сайту, но также увеличивают его вес.

Если твои шрифты загружаются слишком долго, пользователи остаются смотреть на пустой экран. Что еще хуже, твой сайт может выглядеть нестабильным из-за неожиданного сдвига текста.

Это также вредит основным веб-витальным показателям — метрикам, которые напрямую влияют на ваш рейтинг в поиске и пользовательский опыт.

Здесь каждая миллисекунда имеет значение.

Так как ты можешь сохранить выбор веб-шрифтов, не жертвуя производительностью?

Давай разберем это, шаг за шагом.

Но сначала, что такое безопасные веб-шрифты и веб-шрифты?

Что Такое Безопасные Веб-Шрифты?

Веб-безопасные шрифты — это проверенные варианты, которые работают везде. Это шрифты, которые уже есть на большинстве устройств, что означает, что ты можешь рассчитывать на их быструю загрузку.

Вот безопасные для веба шрифты, которые ты можешь использовать:

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Даже с ограниченным выбором шрифтов, умелый дизайнер может использовать их творчески.

Но, безопасные шрифты часто используются избыточно и придают вашему сайту ощущение «схожести», даже когда вы вложили много усилий и денег в дизайн сайта.

Как сделать его красивее?

С веб-шрифтами.

Что Такое Веб-Шрифты?

Веб-шрифты позволяют отказаться от часто используемых безопасных для веб-шрифтов.

Вместо использования шрифтов, доступных на устройстве пользователя, веб-шрифты можно загрузить с внешнего источника, такого как Google Fonts или напрямую с вашего сервера на устройство пользователя (временно).

Это позволяет тебе использовать любой настраиваемый шрифт, который соответствует твоему бренду или дизайнерским потребностям.

Мы также подобрали лучшие шрифты Google, чтобы ты мог начать работу.

Когда пользователь заходит на твой сайт, веб-шрифт временно загружается и применяется к тексту с помощью правила @font-face в CSS.

Веб-шрифты теперь ведут себя как локальные шрифты — они автоматически адаптируются к размерам экрана, сохраняя при этом чёткость вашего сайта.

Шрифты также развивались со временем, чтобы иметь более эффективные форматы хранения. Подобно форматам изображений, шрифты имеют TTF, WOFF, WOFF2 и EOT.

• Embedded OpenType (EOT): Совместим с более старыми версиями Internet Explorer (ниже IE9). По умолчанию не сжат, но может быть применено сжатие GZIP.
• TrueType (TTF): Поддерживается старыми браузерами Android (ниже версии 4.4). По умолчанию не сжат, но может быть сжат GZIP.
• Web Open Font Format (WOFF): Поддерживается большинством современных браузеров и включает встроенное сжатие.
• Web Open Font Format 2 (WOFF2): Совместим с браузерами, которые его поддерживают, имеет специальные алгоритмы сжатия, сокращающие размер файла примерно на 30% по сравнению с другими форматами.

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

Что Такое Основные Показатели Веб-Виталитета (CWV)?

Вот в чём дело: Google хочет, чтобы все его пользователи получали отличный опыт.

Любой сайт или приложение, которое предоставляет пользователям Google лучший опыт, получит больше «любви» от алгоритмов Google.

И как измеряется этот «опыт»?

Google запустил Core Web Vitals в начале 2020 года именно для этой цели.

CWV — это набор из трех метрик, которые сообщают Google, как ваш сайт или приложение работают для пользователей, которых они туда направляют.

Более высокие значения этих метрик могут помочь тебе занять более высокие позиции в Google. Давай быстро рассмотрим эти метрики.

Наибольшая значимая отрисовка (LCP)

LCP измеряет, сколько времени требуется для загрузки самого большого видимого элемента на твоей странице.

Обычно это изображение или видео, но это может быть и большой блок текста или встроенное видео.

Чем быстрее это происходит, тем лучше ваш сайт работает в глазах пользователей и поисковых систем.

Хороший показатель LCP означает, что пользователи не будут ждать появления основного контента.

Взаимодействие до Следующей Отрисовки (INP)

INP измеряет время между взаимодействием пользователя (например, кликом или нажатием) и моментом визуального ответа страницы.

Оно дает более точное представление об интерактивности, чем FID, поскольку учитывает полное путешествие пользователя, а не только первое взаимодействие.

Низкий показатель INP означает, что твой сайт кажется отзывчивым, что повышает вовлеченность и удовлетворенность пользователей.

Кумулятивное Смещение Раскладки (CLS)

CLS измеряет стабильность загрузки твоей страницы.

Когда элементы неожиданно перемещаются, это раздражает пользователей и создает впечатление ненадежности страницы.

Низкий показатель CLS означает, что твоя страница загружается плавно, без сдвигов в макете, которые могли бы нарушить пользовательский опыт.

Как Оптимизировать Веб-Шрифты для Улучшения Основных Веб-Виталов

Итак, почему все так волнуются из-за производительности веб-шрифтов?

Почему мы просто не можем добавить веб-шрифты и закончить на этом? Ну, ты можешь.

Но, как мы уже говорили ранее, веб-шрифты не являются локальными. Они загружаются с сервера, скачиваются и применяются к вашему сайту, и вот в чем заключается проблема.

Это занимает время.

И если это занимает слишком много времени, это влияет на твои Основные Веб-показатели и коэффициент конверсии сайта.

Давай посмотрим на некоторые способы оптимизации веб-шрифтов для улучшения основных показателей веб-виталов.

1. Предзагрузка Шрифтов

Ты хочешь, чтобы шрифты были готовы в момент начала загрузки страницы.

Так что когда страница готова для пользователя, так же и шрифт.

Это называется предзагрузкой.

Предзагрузка говорит браузеру: «Привет, этот шрифт важен. Загрузи его сразу.»

Допустим, ты используешь популярный шрифт Google, Roboto.

Тебе нужно добавить один атрибут в твой HTML код для предзагрузки шрифта: rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>

После этого браузер знает, что нужно отдать приоритет загрузке шрифта Roboto, так что твой текст будет отображаться в нужном шрифте быстрее.

Это сокращает время, необходимое для отображения самого большого блока текста (LCP), так что пользователи видят окончательную версию вашего сайта быстрее.

2. Контролируйте поведение загрузки шрифтов с помощью свойства Font-Display

Однако предварительная загрузка может немного увеличить начальное время загрузки, поскольку шрифтам отдается приоритет.

Свойство font-display позволяет тебе управлять поведением текста, пока пользовательские шрифты ещё загружаются.

Это может помочь тебе избежать страшного Flash of Invisible Text (FOIT), когда пользователи видят пустые пространства, и Flash of Unstyled Text (FOUT), когда страница на секунду появляется со шрифтами по умолчанию и сразу переключается на пользовательские шрифты.

Свойство font-display имеет четыре способа управления поведением текста: block, swap, fallback и optional.

Давай посмотрим на два, которые тебе понадобятся.

font-display: swap — Этот параметр является наиболее безопасным выбором для большинства сайтов. Он гарантирует, что текст отображается немедленно с использованием шрифта замены и переключается на пользовательский шрифт, как только он будет готов.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Здесь резервный шрифт (например, Arial или другой системный шрифт) загружается мгновенно, сохраняя страницу читаемой.

Когда шрифт Roboto загружается, он заменяет шрифт замещения, не оставляя пустого пространства на экране.

Вот демонстрация того, как работает font-display swap в реальном мире.

font-display: optional — Если тебя волнует скорость, это указание браузеру пропустить загрузку пользовательского шрифта, если он не загружается достаточно быстро. Это подходит, если тебе не важно, останется ли запасной вариант.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

Этот вариант имеет смысл, когда производительность важнее дизайна, что делает его идеальным для сайта, ориентированного на скорость.

Вот пример того, как это выглядит в реальном мире. Ты не заметишь переключения здесь, поскольку большинство шрифтов загружаются достаточно быстро.

Однако необязательный аргумент отлично подходит на случай, если ваш сервер шрифтов выйдет из строя или будет работать медленно.

3. Выборка шрифтов

Большинство шрифтов содержат сотни, даже тысячи символов.

Скорее всего, тебе нужна только малая часть из них. Удаление лишнего называется подмножеством шрифтов.

Верно, ты можешь удалить ненужные символы, чтобы уменьшить размер файла шрифта.

Предположим, твой сайт нуждается только в английских символах.

Инструмент, такой как FontTools, может помочь тебе уменьшить твой шрифт, чтобы включать только те символы, которые ты действительно используешь.

Это означает, что все символы Unicode, которые не нужны в английском языке, могут быть удалены для экономии размера файла.

Это уменьшает размер файла, например, с 80 КБ до 30 КБ.

Меньший размер файлов означает более быструю загрузку, что улучшает как LCP, так и CLS, поскольку шрифт загружается быстро и не сдвигает макет.

Вот пример того, как ты можешь удалить всё, кроме английских символов, используя FontTools:

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

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

Если ты предпочитаешь подход, основанный на графическом интерфейсе, ты также можешь попробовать font-squirrel. После загрузки файла шрифта тебе будет доступно множество настроек для добавления или удаления

4. Сжатие Шрифтов

Современные форматы шрифтов, такие как WOFF2, предлагают сжатие, которое может уменьшить размер шрифта до 30% по сравнению со старыми форматами, такими как TTF.

Использование наиболее сжатой версии шрифта может значительно снизить его влияние на время загрузки страницы.

Например, вот как ты можешь убедиться, что используешь WOFF2:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

Таким образом, браузеры, поддерживающие WOFF2, будут использовать его по умолчанию, сокращая время загрузки, при этом отображая четкий шрифт высокого качества.

Однако, если браузер не может использовать WOFF2, он использует WOFF по умолчанию.

5. Кодирование Base64

Это еще одна часто используемая практика для оптимизации ваших веб-шрифтов.

Однако тебе нужно быть осторожным с использованием шрифтов в кодировке Base64.

Base64-кодирование наиболее полезно для маленьких шрифтов или иконок.

Если его использовать слишком часто, это может привести к увеличению объема CSS, что увеличит время загрузки страницы больше, чем при использовании самого шрифта.

Если ты хочешь использовать кодировку Base64 для иконок шрифтов, сначала нужно конвертировать файл шрифта в формат Base64. Вот как это может выглядеть:

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Этот метод хорошо подходит для маленьких иконок шрифтов, которые ты часто используешь на сайте.

CSS-файл загружается с встроенным шрифтом, что позволяет избежать дополнительного HTTP-запроса.

Однако избегай этого для шрифтов большого размера, так как это может замедлить первоначальную отрисовку страницы.

6. <link> против CSS @import для шрифтов

<link> и @import имеют значительные различия в производительности загрузки.

Тег <link> загружает шрифты асинхронно, что означает, что он не задерживает отображение остальной части страницы, в то время как @import работает немного медленнее.

Используй <link> всякий раз, когда это возможно.

“В 90%+ случаев тебе, скорее всего, понадобится тег <link>. Как правило, следует избегать правил @import, поскольку они откладывают загрузку включенного ресурса до тех пор, пока файл не будет получен.” Илья Григорик, Инженер и технический советник генерального директора Shopify

Он загружает шрифты независимо, позволяя остальной части страницы загружаться без ожидания файла шрифта.

<link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

Это предпочтительный метод для загрузки Google Fonts или подобных внешних сервисов шрифтов.

Размещенный в разделе <head> вашего HTML, он гарантирует раннюю загрузку шрифта без блокировки других ресурсов.

Избегай использования @import для критически важных шрифтов.

@import ожидает полной загрузки CSS-файла, что может увеличить время загрузки и негативно сказаться на LCP.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

Использование @import для шрифтов работает только для второстепенных или менее критичных шрифтов. Как практика, избегай его использования для чего-либо на первом экране контента.

7. Уменьшение Визуальных Сдвигов/CLS С Помощью Согласования Шрифтов И Регулировки Размера

Визуальные сдвиги — или накопительные сдвиги макета (CLS), как их называет Google — возникают, когда макет изменяется неожиданно, часто из-за замены шрифтов.

Чтобы минимизировать этот эффект, выбирай шрифты-заменители, которые максимально похожи на стиль и размеры твоего настраиваемого шрифта.

Свойство CSS size-adjust также позволяет тебе контролировать размер шрифта замены, уменьшая визуальные сдвиги при загрузке пользовательского шрифта.

Если твой пользовательский шрифт — Roboto и шрифт для отката, настрой его размер, чтобы он соответствовал Roboto, делая переход почти незаметным.

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Здесь, Arial как запасной вариант для Roboto обеспечивает сохранение постоянного размера, уменьшая заметные изменения, когда Roboto полностью загрузится.

Когда ты настраиваешь размер и расстояние запасного шрифта в соответствии с твоим пользовательским шрифтом, ты гарантируешь, что когда Roboto заменит Arial, сдвиг будет минимальным, что поддерживает низкий CLS и улучшает пользовательский опыт.

8. Найди Подходящее Место Для Размещения Веб-Шрифтов

Самостоятельное размещение шрифтов не всегда означает более высокую производительность.

Многие сторонние варианты также хорошо работают — и иногда они могут загружаться даже быстрее.

Web Almanac обнаружил, что некоторые сайты, использующие шрифты третьих лиц, загружаются быстрее, чем сайты с самостоятельно размещенными шрифтами.

В конечном итоге, производительность шрифта меньше зависит от выбора хостинга, а больше от трех ключевых факторов:

• Content Delivery Network (CDN): Обеспечивает более быструю доставку за счёт использования шрифтов из разных мест по всему миру.
• HTTP/2: Увеличивает скорость загрузки за счёт параллельной обработки множественных запросов, сокращая задержку.
• Политика кэширования веб-страниц: Эффективно кэширует шрифты, так что их не нужно скачивать заново при каждом посещении.

Вместо того чтобы застревать в дебатах о хостинге, сосредоточься на настройке этих основных элементов, чтобы твои шрифты загружались плавно, независимо от того, где они размещены.

Как Упростить Оптимизацию Производительности Веб-Сайта

Если тебе кажутся сложными вышеописанные методы, плагин типа Jetpack может облегчить этот процесс.

Jetpack, разработанный Automattic (создателями WordPress), представляет собой универсальное решение, специально созданное для сайтов на WordPress.

Она сочетает в себе ключевые функции для безопасности, производительности и маркетинга, все управляется с одной платформы.

Даже если ты не технически подкован, Jetpack может помочь улучшить скорость сайта, усилить безопасность и повысить удобство использования. (Сложные настройки не требуются!)

Создай Идеальный Баланс Между Красотой И Производительностью

Веб-шрифты придают вашему сайту уникальный, красивый вид.

Однако без правильных настроек они также могут замедлить его и разочаровать пользователей.

Хотя мы рассмотрели основные техники оптимизации шрифтов, детальная настройка производительности включает в себя множество технических деталей.

И получение наилучших результатов может показаться подавляющим.

Вот тут профессиональные веб-разработки от DreamHost пригодятся.

Мы сделаем так, чтобы твой сайт был красивым и оптимизированным для скорости и удобства пользователей.

Мы возьмем на себя техническую сторону, а ты сосредоточься на создании сайта, который действительно выделяется.

---

На этой странице содержатся партнёрские ссылки. Это означает, что мы можем получить комиссию, если ты приобретешь услуги по нашей ссылке без дополнительных затрат для тебя.