WPO para Dummies

Como optimizar la velocidad de una página web.

Enlace a la charla

Transcript

1. WPO para dummies Aprende las bases de la velocidad de una web
2. Funcionamiento de una web HTTP Request AJAX/FETCH/AXI OS EJECUCIÓN DE DDBB NAVEGADOR HTML + CSS HTML + CSS + JS + IMG + Videos… HTTP Response
3. Funcionamiento de una web
4. Core Web Vitals y su importancia para Google
5. Analizar la velocidad de una Web Core Web Vitals ≠ Google Insights
6. Analizar la velocidad de una Web • https://www.webpagetest.org/ • https://tools.pingdom.com/ • https://pagespeed.web.dev/ • Devtools Consola de Chrome • Analizar sin extensiones • Las Mediciones no serán exactamente iguales dos veces • No te centres en la página principal, sino que hay que analizar por tipo de página. • Priorizar el customer Journey
7. Analizar la velocidad de una Web
8. Analizar la velocidad de una Web
9. Recursos y Multimedia
10. Precargas y Cargas diferidas Precargas • Preload • Preconnect • Prefetch • Precargar antes del clic (Flying pages) • Early Hints, prerender o subresource ⚠ Cargas diferidas • Async y Defer • Delay • Load on interaction • Loading Lazy
11. Hosting y CDN • Tráfico • Potencia del hosting (internet, disco duro, procesador, ram…) • Protocolo HTTP (1/2/3) • Compresión (Deflate, gzip, brotli) • Software: servidor, tecnología y módulos, código
12. Hosting y CDN
13. Caché
14. Caché
15. Conclusión HTTP Request AJAX/FETCH/AXI OS EJECUCIÓN DE DDBB NAVEGADOR HTML + CSS HTML + CSS + JS + IMG + Videos… HTTP Response
16. Conclusión
17. Más información