Herramientas sencillas para analizar, priorizar, detectar y mejorar el WPO de tu web

1. Herramientas para optimizar
el WPO de tu web

2. Laura López
/in/laura-lopez-yoseseo/ @ninadelsur_seo
#SEOnderground

3. @ninadelsur_seo
“It is a ranking factor, and it’s more than a tie-breaker, but it also
doesn’t replace relevance”
John Mueller
#SEOnderground

4. CÓMO MEJORAR EL RENDIMIENTO DE TU WEB
1. ¿CÓMO ANALIZAR EL RENDIMIENTO DE MI WEB?
2. ¿QUÉ ME ESTÁ PENALIZANDO?
3. ¿CÓMO PUEDO MEJORAR?
#SEOnderground @ninadelsur_seo

5. ¿Cómo analizo mi web?

6. MEDICIÓN DE WPO
● Lighthouse
● Chrome devtools
● Chrome User Experience Report
● PageSpeed
● Google Search Console
● Google Analytics
● Web Vitals Chrome Extension
● Herramientas externas de velocidad
#SEOnderground @ninadelsur_seo

7. MEDICIÓN DE WPO
Lighthouse PageSpeed
#SEOnderground @ninadelsur_seo

8. MEDICIÓN DE WPO
#SEOnderground @ninadelsur_seo

9. MEDICIÓN DE WPO
#SEOnderground @ninadelsur_seo

10. MEDICIÓN DE WPO
Chrome UX Report
Referencia: https://g.co/chromeuxdash
#SEOnderground @ninadelsur_seo

11. MEDICIÓN DE WPO
Chrome UX Report
Referencia: https://g.co/chromeuxdash
#SEOnderground @ninadelsur_seo

12. MEDICIÓN DE WPO
Pagespeed Compare
Referencia: https://pagespeed.compare/
#SEOnderground @ninadelsur_seo

13. MEDICIÓN DE WPO
Google Search Console Google Analytics
#SEOnderground @ninadelsur_seo

14. EVOLUCIÓN DE LOS RECURSOS WEB
Hay sites con más peso en
elementos JS que imágenes, y
al contrario, pero no es lo
mismo el tiempo de
renderización de una imagen
que de un archivo JS
Referencia: https://httparchive.org/reports/state-of-images
#SEOnderground @ninadelsur_seo

15. MEDIA DE RENDIMIENTO POR MERCADOS
Con este informe
podemos analizar si
nuestro ranking de
medición de CWV es
acorde con el
mercado en el que
operamos
Referencia: https://corewebvitals.iprospect.com/
#SEOnderground @ninadelsur_seo

16. SCREAMING FROG + PAGESPEED
Analizar cuáles son las
URLs de nuestro site
que peor rendimiento
tienen y priorizar las
mejoras en las que
más lo necesiten
+
#SEOnderground @ninadelsur_seo

17. SCREAMING FROG + PAGESPEED
1
2
3
#SEOnderground @ninadelsur_seo

18. SCREAMING FROG + PAGESPEED
+
#SEOnderground @ninadelsur_seo

19. PESO DE LAS MÉTRICAS DE CORE WEB VITALS
Referencia: https://googlechrome.github.io/lighthouse/scorecalc/
#SEOnderground @ninadelsur_seo

20. ¿Qué me está penalizando?

21. Causas del rendimiento
● Tamaño de las imágenes
● Tiempo de respuesta del servidor
● Recursos que bloquean el renderizado
● Formatos de nueva generación
● CSS que no se está usando
● Minificar CSS
● Minificar JavaScript
#SEOnderground @ninadelsur_seo

22. ¿Cómo puedo mejorar?

23. 1. Reducir tiempo de respuesta del servidor
#SEOnderground @ninadelsur_seo

24. 1. Reducir tiempo de respuesta del servidor
¿Dónde afecta principalmente?
● Time to First Bity (TTFB)
● Speed Index (SI)
● First Input Delay (FID)
● Largest Contentful Paint (LCP)
¿Cómo mejorarlo?
● Actualizar site
● Revisión de accesos a la BBDD /
Api
● Mejorar el hosting
● Caché
#SEOnderground @ninadelsur_seo

25. #SEOnderground @ninadelsur_seo

26. 2. JavaScript y CSS
#SEOnderground @ninadelsur_seo

27. ¿Dónde afecta principalmente?
● First Contentful Paint (FCP)
● Time To Interactive (TTI)
● Total Blocking Time (TBT)
● Largest Contentful Paint (LCP)
● First Input Delay (FID)
¿Cómo mejorarlo?
● Minificar código
● Unificar código
● Carga diferida
● Pre-carga
● Eliminar código sin usar
2. JavaScript y CSS
#SEOnderground @ninadelsur_seo

28. 2. JavaScript y CSS
#SEOnderground @ninadelsur_seo

29. https://csscompressor.com/ https://jscompress.com/
2. JavaScript y CSS
#SEOnderground @ninadelsur_seo

30. 3. Imágenes y multimedia
#SEOnderground @ninadelsur_seo

31. ¿Dónde afecta principalmente?
● First Contentful Paint (FCP)
● Cumulative Layout Shift (CLS)
¿Cómo mejorarlo?
● Optimizar
● Redimensionar
● Comprimir
● Lazyload
3. Imágenes y multimedia
#SEOnderground @ninadelsur_seo

32. Largest Contentful Paint
(LCP)
3. Imágenes y multimedia
#SEOnderground @ninadelsur_seo

33. 3. Imágenes y multimedia
https://defaced.dev/tools/layout-
shift-gif-generator/
https://layoutstability.rocks/
#SEOnderground @ninadelsur_seo

34. 3. Imágenes y multimedia
#SEOnderground @ninadelsur_seo

35. 3. Imágenes y multimedia
https://compressjpeg.com/ https://compresspng.com/
#SEOnderground @ninadelsur_seo

36. 3. Imágenes y multimedia
La precarga de videos
es uno de los factores
que más ralentizan la
carga de una web
#SEOnderground @ninadelsur_seo

37. 4. Caché
#SEOnderground @ninadelsur_seo

38. ¿Dónde afecta principalmente?
● First Contentful Paint (FCP)
● Total Blocking Time (TBT)
● Cumulative Layout Shift (CLS)
¿Cómo mejorarlo?
● Optimizar la caché
● Tiempo de almacenamiento
4. Caché
#SEOnderground @ninadelsur_seo

39. 4. Caché
#SEOnderground @ninadelsur_seo
#SEOnderground

40. Resultados

41. RESULTADO
1. LCP Negativo > Detectar el LCP y optimizar (imagen, video o texto)
2. TTI Negativo > Optimizar recursos JS y CSS
3. CLS > Redimensión de imágenes, contenido dinámico
SERVIDOR JS y CSS IMÁGENES Y VIDEOS CACHÉ
+ + +
@ninadelsur_seo
#SEOnderground

42. @ninadelsur_seo
RESULTADO
1. LCP Negativo > Detectar el LCP y optimizar (imagen, video o texto)
2. TTI Negativo > Optimizar recursos JS y CSS
3. CLS > Redimensión de imágenes, contenido dinámico
SERVIDOR JS y CSS IMÁGENES Y VIDEOS CACHÉ
+ + +

43. MUCHAS GRACIAS
@ninadelsur_seo
/in/laura-lopez-yoseseo/
#SEOnderground