Cómo optimizar tu web para las métricas web principales o Core Web Vitals de PageSpeed Insights de Google mediante plugins y estrategias de optimización y gestión de recursos.

1. Fernando Tellado
@fernandot
Culpable de ayudawp.com (Ayuda WordPress)
Consultor, profesor
Embajador de marca de

2. «Core Web Vitals»
WordPress
@fernandot

3. ¿Qué pasa con las
Core Web Vitals?
@fernandot

4. Core Web Vitals

5. Métricas web principales

6. Core Web Vitals

7. Core Web Vitals
@fernandot
La solución de problemas en
las Core Web Vitals requiere
de altos conocimientos
técnicos

8. Core Web Vitals
@fernandot
La solución de problemas en
las Core Web Vitals requiere
GASTAR DINERO

9. Core Web Vitals
@fernandot
La solución de problemas en
las Core Web Vitals no es
accesible para todo el mundo

10. Core Web Vitals
@fernandot
Las Core Web Vitals
fomentan una Internet elitista,
relegando a quienes no tienen
ni los conocimientos técnicos
ni el dinero para optimizar

11. Core Web Vitals
@fernandot

12. Qué optimizar para
Core Web Vitals
@fernandot

13. Core Web Vitals
@fernandot

14. Core Web Vitals - LCP
Cuánto tarda en cargar el contenido principal
@fernandot

15. Core Web Vitals - LCP
@fernandot
PROBLEMAS SOLUCIONES
Respuesta lenta del servidor Optimización, CDN, caché, imágenes,
Lazy Loading, minimización, recursos
de terceros
Renderizado-bloqueo de JS y CSS Aplazar CSS no crítico y JS, inline ruta
de CSS crítico y JS minimizado,
Renderizado de navegador Minimización, aplazar no usados.
Reducir profundidad del DOM y
complejidad del JS, archivos
optimizados (fuentes, imágenes...)
Carga lenta de recursos Imágenes, CDN, Gzip-Brotli, precarga

16. ● Tiempos de respuesta del servidor (hosting)
● Compresión GZIP/Brotli (hosting/CDN)
● Minimizar CSS y JavaScript (plugin)
● Optimización de imágenes (plugin/servicio)
● Optimización de fuentes (plugin)
● Aplazar carga de CSS y JavaScript (plugin)
● Precarga de recursos (plugin)
● Uso de CDN (CloudFlare)
● Carga diferida de medios (plugin)
● Ruta crítica de CSS (plugin)
@fernandot
Core Web Vitals - LCP

17. Core Web Vitals - FID
Cuánto tarda el usuario en poder interactuar
@fernandot

18. @fernandot
PROBLEMAS SOLUCIONES
Ejecución pesada de JavaScript
Reducir el tiempo de ejecución
minimizando y aplazando JS no
utilizado o no crítico con async o defer
Code-split, divide para carga condicional
Tareas de más de 50 ms.
Web workers
Ejecución lenta del servidor Gzip, Brotli. Minimización
Core Web Vitals - FID

19. ● Aplazar carga de JavaScript (plugin)
● Comprimir JavaScript con GZIP/Brotli
(hosting/CDN)
● Minimizar JavaScript (plugin)
● Reducir peticiones (cachés - CDN)
@fernandot
Core Web Vitals - FID

20. Core Web Vitals - CLS
Cuánto cambia tu contenido visual
@fernandot

21. @fernandot
PROBLEMAS SOLUCIONES
Imágenes no dimensionadas
Incluye width y height en imágenes y
videos
Anuncios, embeds, y iframes no
dimensionados
Reserva estáticamente espacio para
esos elementos
JS que añaden contenido al DOM Evítalos, no es fácil de corregir
FOIT FOUT fuentes web Font-display y Font Loading API
Core Web Vitals - CLS

22. ● Optimización de Fuentes Web (plugin/tema)
● Imágenes, iframes, anuncios sin
dimensiones específicas (plugin)
@fernandot
Core Web Vitals - CLS

23. Como optimizar para
Core Web Vitals
@fernandot

24. @fernandot

25. ¿Qué es SG Optimizer?
● Plugin de optimización completa
desarrollado por
● Gratuito en todos los planes de hosting
● Incluye en un único plugin la gran
mayoría de las operaciones de
optimización a golpe de clic.
@fernandot

26. Gestión de caché
@fernandot

27. Optimización del entorno
@fernandot

28. Optimización de la portada
@fernandot

29. Optimización de medios
@fernandot

30. Caché de página CDN CloudFlare
@fernandot

31. Test de velocidad - PageSpeed
@fernandot

32. Test de velocidad - PageSpeed
@fernandot

33. Test de velocidad - PageSpeed
@fernandot

34. Core Web Vitals y SG Optimizer
@fernandot

35. @fernandot

36. ¿Qué es WP Rocket?
● Plugin de optimización premium
● Incluye en un único plugin la gran
mayoría de las operaciones de
optimización a golpe de clic.
@fernandot

37. Gestión de caché
@fernandot

38. Optimización de archivos
@fernandot

39. Optimización de medios
@fernandot

40. Precarga
@fernandot

41. Base de datos
@fernandot

42. Heartbeat
@fernandot

43. Optimizar CloudFlare
@fernandot

44. @fernandot

45. ¿Alternativas gratuitas?
● Caché
● Minimizar y combinar archivos
● Optimizar entorno y servidor
● Optimizar imágenes
● Aplazar carga de JS
● Generación de ruta crítica de CSS
● Imágenes de nueva generación
@fernandot

46. Caché
@fernandot

47. Minimizar y combinar archivos
@fernandot

48. Optimizar entorno y servidor
@fernandot

49. Ruta crítica de CSS y aplazar JS
@fernandot

50. Optimizar imágenes
@fernandot

51. Imágenes de nueva generación
@fernandot

52. Combinación gratis «casi» perfecta
@fernandot

53. @fernandot

54. @fernandot
No te obsesiones

55. @fernandot
No te obsesiones

56. @fernandot
No te obsesiones

57. @fernandot
No te obsesiones

58. Fernando Tellado
@fernandot
Culpable de ayudawp.com (Ayuda WordPress)
Consultor, profesor
Embajador de marca de
¡Gracias!