Ускоряем WordPress: preload, prefetch и другие resource hints для молниеносной загрузки
Введение: почему resource hints важны для WordPress
Современные темы и плагины часто добавляют десятки CSS и JS файлов. Браузер загружает их последовательно, и каждый запрос увеличивает Time To First Byte (TTFB) и First Contentful Paint (FCP). WordPress и WebAssembly: революция в производительности показывает, насколько важна оптимизация сетевых запросов. Resource hints – это небольшие директивы в <head>, которые позволяют заранее подготовить соединения и загрузить критические ресурсы.
Ключевые типы resource hints
preload– загрузить ресурс сразу, но не выполнить его до момента, когда он будет нужен.prefetch– загрузить ресурс в фоне, обычно следующую страницу.preconnect– установить TCP/SSL‑соединение с внешним доменом заранее.prerender– полностью отрисовать страницу, пока пользователь ещё не перешёл к ней.
1️⃣ Preload критических ресурсов
Самый простой способ ускорить рендеринг – указать браузеру заранее загрузить шрифты, стили и скрипты, необходимые для первого экрана.
Как добавить preload в WordPress
В functions.php темы или в собственном плагине используем хук wp_head и функцию wp_resource_hints:
add_action( 'wp_head', function() { // Preload шрифт Open Sans echo "<link rel="preload" href="https://example.com/fonts/open-sans.woff2" as="font" type="font/woff2" crossorigin>n"; // Preload критический CSS echo "<link rel="preload" href="/wp-content/themes/mytheme/css/critical.css" as="style">n"; // Preload главный JS, но не выполнять пока он не нужен echo "<link rel="preload" href="/wp-content/plugins/myplugin/js/main.js" as="script">n"; });Важно использовать атрибут as (font, style, script, image) – он помогает браузеру подобрать правильные приоритеты и политики безопасности.
Когда не стоит использовать preload
- Для больших файлов (>200 KB) – они могут блокировать загрузку более важных ресурсов.
- Если ресурс уже загружается через
link rel="stylesheet"илиscript src– двойная загрузка увеличит трафик.
2️⃣ Prefetch следующих страниц
Если ваш сайт имеет линейную структуру (например, блоги с «следующая статья»), предзагружать следующую страницу имеет смысл.
Автоматическое добавление prefetch для пагинации
add_action( 'wp_head', function() { if ( is_single() ) { $next = get_adjacent_post( false, '', false ); if ( $next ) { $url = get_permalink( $next->ID ); echo "<link rel="prefetch" href="{$url}">n"; } } });Браузер начнёт скачивать HTML следующей статьи в фоне, и переход будет почти мгновенным.
Prefetch внешних API
Если ваш шаблон часто делает запросы к внешнему API (например, к CDN‑шрифтов), можно добавить prefetch к их URL, но только если они небольшие и кэшируются.
3️⃣ Preconnect к сторонним доменам
Каждое внешнее соединение (Google Fonts, CDN, рекламные сети) требует DNS‑lookup, TLS‑handshake и TCP‑handshake. preconnect позволяет выполнить эти шаги заранее.
Пример preconnect к Google Fonts
add_action( 'wp_head', function() { echo "<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>n"; echo "<link rel="preconnect" href="https://fonts.googleapis.com">n"; });Эти две строки ускоряют загрузку шрифтов почти вдвое. Если вы используете кастомные настройки темы WordPress, разместите их в начале head, чтобы они выполнились до первого link со шрифтом.
Когда использовать preconnect
- Для доменов, к которым обращается более 2‑х ресурсов.
- Только если сервер поддерживает HTTPS и имеет валидный сертификат.
4️⃣ Prerender для стратегически важных страниц
Prerender полностью загружает и рендерит страницу в скрытом фрейме. Это тяжёлый инструмент, но он позволяет, например, предзагружать страницу «корзина» в интернет‑магазине.
Prerender в WooCommerce
Если у вас большой каталог, предзагружать страницу /cart/ может ускорить процесс покупки. Добавьте в head условно:
add_action( 'wp_head', function() { if ( is_product() ) { echo "<link rel="prerender" href="". esc_url( wc_get_cart_url() ). "">n"; } });Не забудьте протестировать оптимизацию карточки товара WordPress – лишний prerender может перегрузить сеть.
Ограничения prerender
- Не рекомендуется для страниц с персональными данными (авторизация, формы).
- Браузеры могут игнорировать prerender, если устройство «медленное».
5️⃣ Лучшие практики и проверка эффективности
После внедрения resource hints измерьте результат с помощью TTFB и Lighthouse. Обратите внимание на:
- Сокращение First Contentful Paint (FCP) минимум на 200 мс.
- Уменьшение количества запросов в сети (Network tab → Initiator).
- Отсутствие дублирования загрузок (проверьте, что
preloadне дублируетlink rel="stylesheet").
Если какие‑то hint‑ы не приносят пользы, удаляйте их – лишний preload может стать «запретным» запросом.
Заключение
Resource hints – мощный, но тонко настраиваемый инструмент. Правильное сочетание preload, prefetch, preconnect и умеренного prerender позволяет сократить время до интерактивности на десятки процентов без изменения кода темы. Применяйте примеры из этой статьи, тестируйте каждый шаг и наслаждайтесь быстрым WordPress.
📚 Читайте также:
❓ Часто задаваемые вопросы
Что делает атрибут <code>as</code> в тегах preload?
Он указывает тип ресурса (font, style, script, image) и позволяет браузеру правильно приоритизировать загрузку и применить политики безопасности.
Можно ли использовать prefetch для внешних API?
Да, но только если ответы небольшие и кэшируются, иначе prefetch лишь займет лишний трафик без выгоды.
Влияет ли prerender на SEO?
Prerender не индексирует страницу, но может увеличить показатель speed index, что положительно отразится на SEO, если не перегружать сервер.
Как проверить, что preload действительно отработал?
В DevTools → Network фильтруйте по колонке «Initiator», ищите строки с «preload». Также в разделе «Timing» должно быть «(preload)».
