Избегайте невидимого текста во время загрузки шрифта

Katie Hempenius

Barry Pollard

Почему вас это должно волновать?

Шрифты часто представляют собой большие файлы, загрузка которых занимает некоторое время. Чтобы справиться с этим, некоторые браузеры скрывают текст до тех пор, пока шрифт не загрузится («вспышка невидимого текста»).

Наибольшая отрисовка содержимого (LCP) может быть отложена до рендеринга текста. Если вы оптимизируете производительность, вам следует избегать «вспышки невидимого текста» (FOIT) и сразу же показывать контент пользователям, используя системный шрифт, который создает «вспышку нестилизованного текста» (FOUT).

Настройки браузера по умолчанию для отображения шрифтов

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

Отобразить текст немедленно

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

Вариант 1. Используйте font-display

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

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

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

Вариант 2. Подождите, пока вы не загрузите пользовательские шрифты.

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

Этот подход состоит из трех частей:

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

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

Это также можно сделать с помощью библиотеки FontFaceObserver , которую некоторые считают более простым в использовании API.

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

Проверять

Запустите Lighthouse, чтобы убедиться, что сайт использует font-display: swap для отображения текста:

1. Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть DevTools.
2. Откройте вкладку «Маяк» .
3. Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
4. Нажмите кнопку Создать отчет .

Убедитесь, что текст Убедитесь, что текст остается видимым во время аудита загрузки веб-шрифта .