Как использовать preload и prefetch для улучшения загрузки мобильного WordPress

Автор: Михаил Кузнецов | Опубликовано: 02.08.2026

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

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

Для диагностики узких мест используйте инструменты:

Google PageSpeed Insights — раздел "Время загрузки" и "Рекомендации".
Chrome DevTools (Network tab) — обратите внимание на время начала загрузки CSS, шрифтов, скриптов.
WebPageTest — посмотрите waterfall-зависимости запросов.

Разница между preload и prefetch: что и когда использовать

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

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

Когда применять preload

Основные CSS-файлы
Критичные шрифты (woff2, woff)
Главные JavaScript-библиотеки, влияющие на первый рендер

Когда применять prefetch

Ресурсы для страниц, которые пользователь может открыть после текущей
Дополнительные скрипты, не влияющие на начальную загрузку

Пошаговое решение: добавляем preload и prefetch в WordPress

Оптимальный способ — добавить соответствующие ссылки в <head> через хук wp_head в functions.php вашей темы или через плагин для кастомного кода.

1. Определите ресурсы для preload, например, главный стиль и шрифт:

function add_preload_resources() {
    echo '<link rel="preload" href="' . get_stylesheet_uri() . '" as="style" crossorigin>';
    echo '<link rel="preload" href="/wp-content/themes/yourtheme/fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'add_preload_resources');

2. Добавьте prefetch для ресурсов следующей страницы или неключевых скриптов:

function add_prefetch_resources() {
    echo '<link rel="prefetch" href="/wp-content/plugins/some-plugin/js/extra.js" as="script" crossorigin>';
}
add_action('wp_head', 'add_prefetch_resources');

3. Проверяйте корректность путей и наличие файлов, чтобы избежать 404 ошибок.

Проверка результата после внедрения

Откройте сайт в Chrome DevTools, вкладка Network, и убедитесь, что ресурсы с preload загружаются в начале.
В разделе Performance проверьте, что время до первого контента (FCP) уменьшилось.
В Google PageSpeed Insights должна появиться отметка об использовании preload.

Частые ошибки и как их исправить

Неправильный атрибут as: Используйте правильный тип (style, font, script) — иначе браузер проигнорирует preload.
Отсутствие crossorigin для шрифтов: Добавляйте crossorigin для шрифтов, иначе они не загрузятся корректно.
Preload на несуществующие файлы: Проверьте корректность URL, чтобы избежать 404.
Чрезмерное количество preload: Не перегружайте браузер, ограничьтесь 3-5 ключевыми ресурсами.

Практические советы по безопасности и производительности

Используйте относительные пути или функции WordPress (get_stylesheet_uri(), plugins_url()) для формирования URL, чтобы избежать ошибок при миграциях.
Кэшируйте страницу с учетом preload, чтобы не генерировать их каждый запрос.
Для шрифтов используйте формат WOFF2 — он лучше сжимается и поддерживается всеми современными мобильными браузерами.
Тестируйте на реальных устройствах с медленным интернетом, например, с помощью эмулятора сети в DevTools.

Сравнение вариантов внедрения preload и prefetch

Метод	Плюсы	Минусы	Рекомендации
Ручное добавление через wp_head	Максимальный контроль, легкая настройка	Требует знаний, возможны ошибки в коде	Для опытных разработчиков, для 3-5 ключевых ресурсов
Плагины (например, WP Rocket)	Автоматизация, дополнительные оптимизации	Могут увеличивать нагрузку, ограниченный контроль	Для сайтов без разработчиков, но с бюджетом на плагины
Оптимизация на уровне сервера (HTTP/2 Server Push)	Очень эффективна, не зависит от CMS	Сложна в настройке, требует доступа к серверу	Для больших проектов с выделенным хостингом