Principal/WordPress Fullstack/Blueprints/DevOps y Velocidad/Optimización de velocidad y Core Web Vitals a 90+
Volver a tarjetas «DevOps y Velocidad»
DevOps y Velocidad(ТЗ 3 из 54)
Especificación: Optimización de velocidad y Core Web Vitals a 90+
DevOps y Velocidad5 шагов • +25 XP

Especificación: Optimización de velocidad y Core Web Vitals a 90+

Especificación técnica para optimizar sitios WordPress lentos: caché en dos niveles (Redis / FastCGI), pipeline de medios WebP/AVIF, depuración de CSS/JS y puntuaciones en verde en Core Web Vitals.

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

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

«Las páginas deben cargar en menos de 2 segundos en 4G sin que se rompan sliders, el carrito o los filtros dinámicos.»
Ключевые требования:
  • •Auditoría técnica inicial con Google PageSpeed Insights y Query Monitor
  • •Caché de objetos persistente con Redis para eliminar consultas repetitivas a MySQL
  • •Conversión automática de imágenes a formatos WebP/AVIF con dimensiones obligatorias
  • •Caché de páginas estáticas mediante Nginx FastCGI Cache o reglas en WP Rocket
  • •Cumplimiento riguroso de Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
Ограничения проекта:
  • •Eludir la caché para usuarios autenticados, carrito y pasarela de pago
  • •Preservar jQuery y la interactividad sin errores en la consola
Критерии приёмки (KPI):
  • Puntuación en PageSpeed Insights móvil ≥ 90/100
  • Tiempo hasta el primer byte (TTFB) inferior a 200 ms
  • CLS estrictamente en 0 en todas las plantillas del catálogo

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

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

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

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

1
Этап 1 из 5

Paso 1: Auditoría de rendimiento y perfilado de consultas MySQL

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

Ejecute pruebas iniciales en Google PageSpeed Insights y WebPageTest. Utilice Query Monitor para detectar consultas lentas, transients saturados y cuellos de botella en la ejecución de PHP.

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

Realice siempre las pruebas en modo incógnito o mediante nodos de prueba externos para evitar que la caché local del navegador altere las métricas reales.

2
Этап 2 из 5

Paso 2: Implementación de caché de objetos con Redis

3
Этап 3 из 5

Paso 3: Optimización de imágenes (WebP/AVIF) y dimensiones fijas

4
Этап 4 из 5

Paso 4 (Servidor): Configuración de Nginx FastCGI Cache

5
Этап 5 из 5

Paso 5: Verificación final y control de calidad

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

Интеграция

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

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

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

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