Оптимізація WordPress під Core Web Vitals

Архітектурна база#

Оптимізація під метрики Core Web Vitals (CWV) у WordPress 7.0+ є комплексною інженерною задачею з мінімізації часу відгуку клієнтської частини та підвищення стабільності інтерфейсу відповідно до стандартів Google і специфікацій W3C Web Performance Working Group.

У 2026 році ключовою тріадою метрик користувацького досвіду (CrUX) є:

1. LCP (Largest Contentful Paint) < 2.5s: час рендерингу найбільшого видимого контентного елемента першого екрана (герой-банер, головний заголовок H1, товарне зображення). Життєвий цикл LCP складається з 4 компонентів:

   • Time to First Byte (TTFB): серверний час генерації першого байта HTML (норма < 200 мс).
   • Resource Load Delay: час від початку навігації до моменту, коли браузер виявляє URL ресурсу LCP. Усувається передзавантаженням (preload) та підказками пріоритету (fetchpriority="high").
   • Resource Load Duration: фактичний час завантаження ресурсу мережею. Оптимізується стисненням у формати AVIF/WebP та адаптивним srcset.
   • Element Render Delay: затримка між завершенням завантаження ресурсу та його відмальовуванням на екрані, спричинена блокуючими CSS і перевантаженням основного потоку.

2. INP (Interaction to Next Paint) < 200ms: метрика чуйності, що повністю замінила First Input Delay (FID). Вона вимірює затримку між дією користувача (клік, тап, натискання клавіші) та фактичним оновленням пікселів на дисплеї (Next Frame). INP оцінює не лише першу, а й усі взаємодії протягом життєвого циклу сторінки. Вона охоплює затримку введення (Input Delay), час виконання обробника події (Processing Time) та затримку відображення (Presentation Delay). Головний ворог INP — тривалі завдання в основному потоці (Main Thread Tasks) тривалістю понад 50 мс.

3. CLS (Cumulative Layout Shift) < 0.1: сумарний коефіцієнт зсуву макета. Вимірює нестабільність верстки, коли елементи спонтанно змінюють координати під час завантаження сторінки. Запобігається явним резервуванням геометричних пропорцій через атрибути width/height та CSS-властивість aspect-ratio, а також нормалізацією метрик веб-шрифтів через @font-face дескриптори size-adjust, ascent-override та descent-override.

У ядрі WordPress для хірургічної модифікації потоку HTML без накладних витрат регулярних виразів використовується високошвидкісний потоковий процесор WP_HTML_Tag_Processor.

Ментальна модель#

Часова шкала декомпозиції метрики LCP та точка перехоплення керування через fetchpriority:

БЕЗ ОПТИМІЗАЦІЇ (Lazy loading на першому екрані, запізніле виявлення ресурсу):
[TTFB: 400ms] -> [Парсинг HTML: 200ms] -> [CSS блокування: 300ms] -> [Виявлення img] -> [Завантаження: 1200ms] -> [Paint]
|--------------------------------------------- LCP: 2.5 - 3.2s (ЖОВТА/ЧЕРВОНА ЗОНА) -----------------------------|

СТАНДАРТ 2026 (Edge Cache + fetchpriority="high" + Preload):
[TTFB: 80ms]
[Early Preload] ==========> [Паралельне завантаження AVIF через HTTP/3]
[Парсинг HTML] -> [Render LCP Image]
|------------- LCP: 650 - 900ms (ЗЕЛЕНА ЗОНА 🚀) ----------------|

На практиці застосовується#

1. Головні сторінки медіапорталів та новинних ресурсів: Усунення блокуючих CSS і сторонніх скриптів банерної реклами з ізоляцією висоти рекламних слотів через min-height у CSS для утримання CLS < 0.02.
2. Каталоги інтернет-магазинів (WooCommerce): Впровадження fetchpriority="high" на перше товарне зображення в циклі та генерація адаптивного набору srcset у форматах WebP/AVIF.
3. Оптимізація мобільних меню та фільтрів під INP: Переведення ресурсомістких операцій мутації DOM при відкритті фільтрації на асинхронні виклики requestAnimationFrame() із використанням пасивних слухачів подій ({ passive: true }).
4. Безшовний перехід між сторінками блогу: Поєднання View Transitions API та Speculation Rules API для миттєвої навігації без білого екрана та повторного парсингу шапки сайту.

Як це працює#

Досягнення найвищих оцінок Core Web Vitals вимагає глибокого розуміння критичного шляху рендерингу (Critical Rendering Path):

Чому loading="lazy" на LCP-картинці знищує оцінку швидкості#

Атрибут loading="lazy" змушує браузер відкласти запит на завантаження зображення доти, доки не завершиться розрахунок геометрії макета (Layout) і браузер не переконається, що зображення знаходиться в межах порогу видимості.

Для першого екрана це означає штучну затримку в 500–1200 мс! Браузер не може завантажувати картинку паралельно з парсингом HTML.

Рішення 2026 року:

• Видалити loading="lazy" із зображення першого екрана.
• Додати fetchpriority="high", що сигналізує мережевому планувальнику браузера про необхідність поставити завантаження цієї картинки у найвищий пріоритет.
• Додати тег <link rel="preload" as="image" href="..." fetchpriority="high"> у секцію <head>.

Продакшн-артефакт: Enterprise Web Vitals Optimizer#

Нижче наведено модуль оптимізації на PHP 8.4+, який використовує нативний потоковий процесор WP_HTML_Tag_Processor ядра WordPress для автоматичного налаштування LCP-атрибутів та впровадження конфігурації Speculation Rules API.

<?php
declare(strict_types=1);

namespace AgenticLab\Performance;

use WP_HTML_Tag_Processor;

/**
* Enterprise Web Vitals Optimizer.
* 
* Автоматична оптимізація LCP, CLS, INP на базі WP_HTML_Tag_Processor.
*
* Author: Artur Yusupov (Fullstack Agentic Lab)
*/
final class AgenticWebVitalsOptimizer {
  private static ?self $instance = null;
  private bool $hero_image_processed = false;

  private function __construct() {
      $this->register_hooks();
  }

  public static function get_instance(): self {
      return self::$instance ??= new self();
  }

  private function register_hooks(): void {
      // Оптимізація зображень контенту під LCP та CLS
      add_filter('the_content', [$this, 'optimize_content_images'], 99);

      // Відкладене завантаження JS-скриптів (Анти-INP)
      add_filter('script_loader_tag', [$this, 'enforce_script_defer'], 10, 3);

      // Впровадження Speculation Rules API та передзавантаження в <head>
      add_action('wp_head', [$this, 'inject_speculation_and_preloads'], 1);
  }

  /**
   * Потокова модифікація HTML-тегів зображень без оверхеду regex.
   */
  public function optimize_content_images(string $content): string {
      if (empty($content) || is_admin() || is_feed()) {
          return $content;
      }

      $processor = new WP_HTML_Tag_Processor($content);
      $is_first_image = true;

      while ($processor->next_tag(['tag_name' => 'img'])) {
          if ($is_first_image && !$this->hero_image_processed) {
              // ПЕРША КАРТИНКА (Імовірний LCP елемент):
              // 1. Примусово виставляємо найвищий пріоритет
              $processor->set_attribute('fetchpriority', 'high');
              $processor->set_attribute('loading', 'eager');
              $processor->set_attribute('decoding', 'sync');

              // 2. Додаємо атрибут aspect-ratio для захисту від CLS, якщо задані розміри
              $width = $processor->get_attribute('width');
              $height = $processor->get_attribute('height');
              if ($width && $height) {
                  $style = $processor->get_attribute('style') ?? '';
                  $style .= sprintf('; aspect-ratio: %s / %s;', $width, $height);
                  $processor->set_attribute('style', trim($style, '; '));
              }

              $this->hero_image_processed = true;
              $is_first_image = false;
          } else {
              // УСІ НАСТУПНІ КАРТИНКИ:
              // Ледаче завантаження та асинхронне декодування
              if (!$processor->get_attribute('loading')) {
                  $processor->set_attribute('loading', 'lazy');
              }
              $processor->set_attribute('decoding', 'async');
          }
      }

      return $processor->get_updated_html();
  }

  /**
   * Примусове встановлення атрибута defer на некритичні скрипти.
   */
  public function enforce_script_defer(string $tag, string $handle, string $src): string {
      // Виключаємо критичні скрипти ядра, що вимагають синхронності
      $critical_handles = ['wp-polyfill', 'agentic-critical-state'];

      if (is_admin() || in_array($handle, $critical_handles, true)) {
          return $tag;
      }

      if (!str_contains($tag, 'defer') && !str_contains($tag, 'async')) {
          return str_replace('<script ', '<script defer ', $tag);
      }

      return $tag;
  }

  /**
   * Ін'єкція W3C Speculation Rules API для миттєвої навігації.
   */
  public function inject_speculation_and_preloads(): void {
      if (is_admin()) {
          return;
      }

      // Декларативне правило пререндерингу внутрішніх посилань при наведенні курсора
      $speculation_rules = [
          'prerender' => [
              [
                  'source' => 'document',
                  'where'  => [
                      'and' => [
                          ['href_matches' => '/*'],
                          ['not' => ['href_matches' => '/wp-admin/*']],
                          ['not' => ['href_matches' => '/wp-json/*']],
                          ['not' => ['selector_matches' => '.no-prerender']],
                      ],
                  ],
                  'eagerness' => 'moderate',
              ],
          ],
      ];

      try {
          $json_rules = wp_json_encode($speculation_rules, JSON_THROW_ON_ERROR | JSON_UNESCAPED_SLASHES);
          echo sprintf('<script type="speculationrules">%s</script>' . PHP_EOL, $json_rules);
      } catch (\JsonException) {
          // Ігноруємо помилку серіалізації
      }
  }
}

// Ініціалізація оптимізатора
add_action('init', [AgenticWebVitalsOptimizer::class, 'get_instance']);

Поширені помилки#

Резюме архітектора#

Утримання показників Core Web Vitals у зеленій зоні спирається на три фундаментальні принципи:

• LCP: Надшвидкий TTFB (< 200 мс), обов'язковий fetchpriority="high" на першому контентному зображенні через WP_HTML_Tag_Processor та повне видалення loading="lazy" з першого екрана.
• CLS: Прецизійне резервування габаритів медіа через aspect-ratio та калібрування шрифтових метрик через size-adjust.
• INP: Захист бюджету основного потоку (< 50 мс на завдання) з квантуванням завдань через scheduler.yield().