WPO para dummies
Aprende las bases de la velocidad de una web
Slide 2
Slide 2 text
Funcionamiento de una web
HTTP
Request
AJAX/FETCH/AXI
OS
EJECUCIÓN DE
DDBB
NAVEGADOR
HTML + CSS
HTML +
CSS + JS +
IMG +
Videos…
HTTP
Response
Slide 3
Slide 3 text
Funcionamiento de una web
Slide 4
Slide 4 text
Core Web Vitals y su importancia para Google
Slide 5
Slide 5 text
Analizar la velocidad de una Web
Core Web Vitals ≠ Google Insights
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Analizar la velocidad de una Web
Slide 8
Slide 8 text
Analizar la velocidad de una Web
Slide 9
Slide 9 text
Recursos y Multimedia
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Hosting y CDN
Slide 13
Slide 13 text
Caché
Slide 14
Slide 14 text
Caché
Slide 15
Slide 15 text
Conclusión
HTTP
Request
AJAX/FETCH/AXI
OS
EJECUCIÓN DE
DDBB
NAVEGADOR
HTML + CSS
HTML +
CSS + JS +
IMG +
Videos…
HTTP
Response