Внедрение Speculation Rules API дает нулевой TTFB и мгновенный LCP

Внедрение Speculation Rules API дает нулевой TTFB и мгновенный LCP

Данные кейса от Etsy показывают, что используя Speculation Rules API для предзагрузки по наведению курсора, они добились нулевого Time to First Byte (TTFB) для переходов вплоть до 45-50-го перцентиля, детализирует Барри Поллард.

Это фактически убирает время ответа сервера как основной баттлнек для Largest Contentful Paint (LCP), что дает огромное преимущество перед традиционной оптимизацией.

Действие prefetch в этом API мощнее, чем устаревший <link rel="prefetch">, так как он может держать даже некэшируемые документы во временном кэше в памяти до пяти минут, тогда как старый метод работает только для ресурсов, кэшируемых по HTTP.

Есть целый спектр вариантов внедрения: от консервативных до агрессивных.

На консервативном конце, кейс Shopify показал, что даже запуск правил спекуляции по клику или mousedown дал стабильное улучшение на 120-180 миллисекунд по TTFB, First Contentful Paint (FCP) и LCP для всех пользователей на всей их платформе.

На агрессивном конце, Scalemates.com использовал pre-render и добился медианного LCP всего в `404` миллисекунды.

Сам Google Поиск использует многоуровневую стратегию: агрессивно предзагружает два верхних органических результата сразу при загрузке SERP и откладывает остальные до наведения курсора пользователем, балансируя использование ресурсов с вероятностью клика.

Однако эта мощь несет в себе и серьезные риски, которые нужно купировать.

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

Что еще опаснее, они могут непреднамеренно триггерить GET-запросы, изменяющие состояние, например, ссылки "add-to-cart" или "logout", или отдавать юзерам устаревший контент, если все настроено криво.

Ключевой принцип, который нужно запомнить: `prefetch` всегда менее рискован, чем `pre-render`.

Управлять этими рисками можно с помощью выражений where в ваших правилах, чтобы явно исключить проблемные URL, например, содержащие /wp-admin/ или add-to-cart.

@MikeBlazerX

Пушки — в @MikeBlazerPRO

Источник новости https://t.me/mikeblazerx/6022...