По данным Google Search Console (GCS), одной из областей, над которой я работаю в зоне Martech, является повышение производительности мобильных устройств по сравнению с Core Web Vitals (CWV), набором показателей, которые Google использует для измерения производительности страниц и взаимодействия с пользователем. На моем сайте используются пользовательские шрифты, и я заметил, что страница загружается на мобильных устройствах довольно медленно, потому что эти шрифты загружаются с опозданием с помощью CSS. Мне удалось значительно улучшить производительность своего мобильного устройства, предварительно загрузив шрифты.

Что такое предзагрузка?

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

Как предварительная загрузка влияет на веб-ядро?

Жизненно важные аспекты основной сети состоит из трех основных показателей:

• Самый большой цвет контента (LCP) Измеряет скорость загрузки основного содержимого веб-страницы. Это должно произойти в течение 2,5 секунд после страница начинает загружаться первой. Предварительная загрузка может помочь улучшить LCP за счет сокращения времени, необходимого для отображения необходимого контента (например, изображения символа или основного текста).
• Первая входная задержка (FID): измеряет момент первого взаимодействия пользователя с вашим сайтом (например, нажатие кнопки) и реакцию браузера. FID должен быть меньше 100 миллисекунд. Предварительная выборка обеспечивает косвенную выгоду для FID, гарантируя, что необходимые ресурсы готовы к взаимодействию, не позволяя браузеру перегружаться обработкой задержанных ресурсов.
• Совокупное изменение макета (CLS): измеряет визуальную стабильность страницы. Страницы должны иметь показатель CLS менее 0,1. Хотя предварительная загрузка не влияет напрямую на CLS, она снижает вероятность задержки ресурсов, вызывая проскальзывание макета, когда элементы страницы неожиданно перемещаются во время загрузки.

Понимание блокировки рендеринга

Некоторые ресурсы, такие как CSS и JavaScript, могут блокировать рендеринг. Браузеру необходимо загрузить и обработать эти файлы, прежде чем отображать что-либо на экране. Например, если основной файл CSS страницы блокирует рендеринг, браузер будет ждать, пока он полностью загрузит и обработает этот файл CSS для рендеринга. Этот период ожидания может замедлить производительность страницы. Первый цветили в тот момент, когда контент впервые появляется на экране. Предварительно загружая ресурсы, блокирующие рендеринг, вы можете сократить время ожидания и ускорить работу страницы.

Когда следует использовать предварительную загрузку?

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

• Критический контент на первом экране зависит от конкретных ресурсов, таких как изображение символа, основные функции JavaScript или основные шрифты. Это гарантирует, что пользователи сразу увидят основной контент.
• Большие изображения или фоновые изображения который появляется вверху страницы, должен загружаться быстро, чтобы пользователи не смотрели на пустые места или заполнители.
• Пользовательские шрифты которые важны для идентификации бренда и пользовательского опыта, помогая избежать Нестилизованный текстовый Flash (FOUT) где текст изначально отображается резервным шрифтом, пока не будет загружен пользовательский шрифт.
• Основные скрипты и таблицы стилей Элементы, необходимые для базовой функциональности страницы, загружаются заранее, чтобы избежать блокировка рендеринга задерживать.

Преимущества и недостатки предварительной загрузки

Предварительная загрузка — замечательный инструмент, но его можно использовать неправильно и вызвать другие проблемы:

Как написать директивы предварительной загрузки для каждого типа ресурсов

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

1. Шрифты

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

Предварительно загружая шрифты, вы гарантируете, что они будут доступны, когда они вам понадобятся, исключая изменения макета и улучшая взаимодействие с пользователем. В WordPress мне удалось предварительно загрузить шрифты, размещенные на моем сервере, включив следующую функцию: functions.php в моей дочерней теме.

Preload fonts from the site
function mtz_preload_fonts() {
    $child_theme_uri = get_stylesheet_directory_uri();

    // Preload each font on a separate line
    echo '';
    echo '';
    echo '';
}
add_action('wp_head', 'mtz_preload_fonts');

2. Картинки

Предварительная загрузка идеально подходит для важных изображений, таких как главное изображение вверху страницы. Для предварительной загрузки изображений используйте отметить знаком as="image":

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

3. Таблицы стилей CSS

Файлы CSS часто по умолчанию блокируют рендеринг, а это означает, что браузер должен загрузить и применить их перед отображением содержимого. Чтобы расставить приоритеты в основной таблице стилей, вы можете предварительно загрузить ее с помощью:

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

4. JavaScript-файлы

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

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

Заключение

Предварительная загрузка — это ценный метод оптимизации производительности загрузки сайта и улучшения веб-показателей, особенно показателя LCP. При разумном использовании предварительная загрузка критически важных ресурсов гарантирует быструю загрузку необходимого контента, что приводит к улучшению пользовательского опыта и потенциальным преимуществам SEO. Однако чрезмерное использование предварительной загрузки может иметь неприятные последствия, замедляя работу страницы и тратя ресурсы.

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