Main/WordPress Fullstack/Blueprints/DevOps & Speed/Speed Optimization & Core Web Vitals to 90+
Back to «DevOps & Speed» cards
DevOps & Speed(ТЗ 3 из 54)
Spec: Speed Optimization & Core Web Vitals to 90+
DevOps & Speed5 шагов • +25 XP

Spec: Speed Optimization & Core Web Vitals to 90+

Technical specification for optimizing slow WordPress sites: server-level caching (Redis / FastCGI), WebP/AVIF media pipeline, CSS/JS tree shaking, and green Core Web Vitals (LCP < 2.5s, CLS = 0, INP < 200ms).

+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

ТЗ заказчика (исходный бриф):

“Pages must load under 2 seconds on 4G connections without breaking our slider, cart, or interactive filters.”
Ключевые требования:
  • •Full baseline audit via Google PageSpeed Insights and Query Monitor
  • •Redis Object Cache configuration to eliminate redundant MySQL queries
  • •Next-gen WebP/AVIF automated image generation with explicit dimensions
  • •Page caching via Nginx FastCGI Cache or optimized WP Rocket rules
  • •Core Web Vitals compliance: LCP < 2.5s, CLS < 0.1, INP < 200ms
Ограничения проекта:
  • •Bypass cache for logged-in users, WooCommerce checkout, and cart pages
  • •Preserve jQuery and critical interactivity without console errors
Критерии приёмки (KPI):
  • PageSpeed Insights mobile score ≥ 90/100
  • Server Time to First Byte (TTFB) < 200 ms
  • CLS strictly 0 on all catalog templates

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Step 1: Baseline Audit & Query Bottleneck Profiling

Практическое руководство:

Run automated audits via Google PageSpeed Insights and WebPageTest. Profile database query latency using Query Monitor to identify slow MySQL queries, excessive transients, and heavy PHP execution hooks.

Важные технические нюансы и подводные камни:

Always test in private browsing windows or via remote diagnostic nodes to prevent local browser caching from skewing metrics.

2
Этап 2 из 5

Step 2: Server-Level Object Caching with Redis

3
Этап 3 из 5

Step 3: WebP/AVIF Media Pipeline & Dimension Constraints

4
Этап 4 из 5

Step 4 (Server): Nginx FastCGI Microcaching Architecture

5
Этап 5 из 5

Step 5: Verification & Quality Assurance Sign-Off

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами