¿Es mi web rápida? ¿Es válido lo que dicen las herramientas? Cómo interpretar los distintos valores que dan las herramientas y saber si la web es rápida o no más allá de una sensación. Repasamos las principales herramientas de análisis y que significan los datos que nos ofrecen.Repasamos el nuevo marco de medición de Google con el lanzamiento dela versión 3.1..1 de Lighthouse.

1. THE
WPO
ACADE
MY

2. ¿Porque es importante la velocidad a nivel SEO?

3. ¿Porque es importante la velocidad a nivel usuario?

4. ¿Porque es importante la velocidad a nivel negocio?

5. ¿Cómo se ha medido la velocidad en muchos casos?

6. Mitos sobre el perfomance

7. Mitos sobre el perfomance
La experiencia de usuario se puede capturar con una sola
métrica
La buena experiencia de usuario no se puede capturar en un
solo punto en el tiempo.
Se compone de varios touchpoints en el user journey.
Hay que saber que métricas influyen y medir las que son
importantes.

8. Mitos sobre el perfomance
La experiencia de usuario puede ser testeada contra un solo “usuario
representativo”
La Perfomance de los sites depende de muchos factores tales como el
dispositivo utilizado, las
conexiones de red y otros factores. Hay que definir una serie de escenarios
que sean representativos
de nuestros usuarios con más porcentaje sobre el total y que tenga en
cuenta los parámetros mediante
los que se conectan.

9. Mitos sobre el perfomance
Si a mí me carga rápida, a mis usuarios también
Muchas veces usamos dispositivos y redes para realizar los tests de
Perfomance que son más rápidos y mejores que los de nuestros
usuarios.
Hay que tener en cuenta las características reales de uso de nuestro
site y testear contra eso en nuestras métricas.

10. Datos de laboratorio vs datos de campo

11. Datos de Perfomance recogidos en un entorno
controlado con ajustes de redes y dispositivos
predefinidos.
Ofrecen resultados reproducibles y permiten
debugar para identificar y corregir problemas de
perfomance.
Fortalezas
Permiten solucionar problemas de perfomance
Visión completa del problema y foco en la UX
Crea un entorno de testeo reproducible
Limitaciones
Puede que no tenga en cuenta problemas reales
que están ocurriendo
Datos de laboratorio

12. También llamados Datos Reales de Usuarios
(RUM)
Son datos de perfomance recogidos de cargas
reales de páginas de nuestros usuarios en
nuestro site.
Fortalezas
Capturan la experiencia real de los usuarios
Pueden correlacionarse con KPI´s de negocio
Limitaciones
Cantidad de datos restringido
Opciones de reproducir las condiciones son
limitadas
Datos de campo

13. Lighthouse
Consejos personalizados para mejorar Perfomance, accesibilidad, PWA, SEO y otras best practices.
WebPageTest
Permite analizar performance de un site en un entorno controlado y profundizar en algunas métricas.
TestMySite
Diagnostica la Perfomance y provee algunos fixes basados en Webpagetest and PageSpeed Insights.
PageSpeed Insights
Muestra datos de perfomance de campo de tu site y sugerencias de como mejorarla.
Speed Scorecard
Permite comparar tu site mobile contra otros. Utiliza datos de campo del Chrome UX Report.
Impact Calculator
Permite estimar el ingreso adicional proveniente de la mejora de Perfomance. Se basa en los datos de
Chrome Developer Tools
Allows you to profile the runtime of a page, as well as identify and debug performance bottlenecks.
Distintas herramientas de perfomance

14. Product owner, marketero o desarrollador que quiere hacer un business case
para mejorar la perfomance dentro de un site.
Necesitas calcular el impacto a nivel de negocio y buscas datos económicos que
cuantificar el coste de oportunidad
Usas el Speed Scorecard y TestMysite para hacer benchmark de tu Perfomance.
Usas el Impact Calculator para estimar el coste de oportunidad económico de
perfomance.
Distintos casos de uso de las herramientas de perfomance

15. Desarrollador que …
…intentando comprender la Perfomance actual y que busca recomandeaciones en forma de auditoría.
PageSpeedInsights
…intentando mejorar su site comparándolo contra las best practices a nivel desarrollo. Lighthouse
…buscando soporte técnico sobre como debugar o profundizar en la Perfomance de un site. Chrome Developer
Tools -WPTest
Distintos casos de uso de las herramientas de perfomance

16. Método Rail
Las buenas métricas de Perfomance se centran en el usuario

17. ¿La perfomance depende de la percepción?

18. He probado nuestra web y se carga en X,XX segu
La carga no es un solo momento en el tiempo; es una experiencia que
ninguna métrica puede capturar por completo. Así que, en lugar de medir
la carga con una sola métrica, debemos medir los tiempos de cada
momento a lo largo de la experiencia que pueden afectar
La perfomance depende de la percepción

19. Métricas de Perfomance que responden a la realidad de los usuarios

20. Métricas de Perfomance que responden a la realidad de los usuarios

21. Primer procesamiento de imagen (FP) y primer procesamiento de imagen con
contenido (FCP)
La API PaintTiming define dos métricas: primer procesamiento de imagen (FP) y primer
(FP) y primer procesamiento de imagen con contenido (FCP). Estas métricas indican los
puntos, inmediatamente después de la navegación, cuando el navegador representa los
píxeles en la pantalla. Es importante para el usuario, ya que responde a la pregunta: ¿está
sucediendo?
FP indica el punto cuando el navegador representa cualquier elemento visualmente
diferente de lo que estaba en la pantalla antes de la navegación.
FCP es el punto cuando el navegador representa el primer bit de contenido desde el
DOM, lo que puede ser texto, una imagen, SVG o, incluso, un elemento <canvas>.
Métricas de Perfomance que responden a la realidad de los usuarios
FP & FCP

22. Primer procesamiento de imagen con significado y tiempo de elemento hero
El primer procesamiento de imagen con significado (FMP) es la métrica que responde
pregunta: "¿es útil?". Si bien el concepto "útil" es sumamente difícil de especificar
aplicarlo de forma genérica a todas las páginas web (por ende, no existe una
todavía), es bastante fácil para los desarrolladores web saber las partes de sus
páginas que serán más útiles para los usuarios.
Métricas de Perfomance que responden a la realidad de los usuarios
FMP & HERO

23. Los elementos Hero responden al propósito de la página.
Casi siempre, las páginas web tienen partes más importantes que otras. Si las
importantes de una página se cargan de forma rápida, es posible que el usuario
note que el resto de la página no se carga.
Métricas de Perfomance que responden a la realidad de los usuarios
FMP & HERO

24. Tiempo hasta que es interactiva
La métrica Tiempo hasta que es interactiva (TTI) indica el punto en el que la
que la aplicación se representa visualmente y es capaz de responder de forma
de forma confiable a una entrada del usuario. Es posible que una aplicación no
aplicación no pueda responder a una entrada del usuario por diversos motivos:
•Todavía no se cargó el JavaScript necesario para que los componentes en la
página funcionen.
•Existen tareas largas que bloquean el subproceso principal (como se describe en
la última sección).
La métricaTTI identifica el punto en el que se carga el JavaScript inicial de la
página y se inactiva el subproceso principal (sin tareas largas).
Métricas de Perfomance que responden a la realidad de los usuarios
TTI

25. Tareas largas
Los navegadores agregan tareas a una cola en el subproceso principal para ejecutarlas una
por una. En algunos casos, estas tareas pueden demorar más tiempo en ejecutarse y, si eso
sucede, el subproceso principal se bloquea y el resto de las tareas en la cola deben esperar.
La API LongTasks identifica las tareas de más de 50 ms de duración como potencialmente problemáticas y las
expone al desarrollador de aplicaciones. Se seleccionó la duración de 50 ms para que las aplicaciones cumplan
con las pautas de RAIL de responder a una entrada del usuario en 100 ms.
Métricas de Perfomance que responden a la realidad de los usuarios

26. ¿Cuánto pesan estas métricas en las auditorías?
Scoring
Details
¿Como se calculan?
Distribución derivada de métricas reales de perfomance de sites del HTTPArchive.
Los top performers del First Meaningful Paint (FMP) en HTTPArchive renderizan en
1,220ms así que ese valor es el quivalente de un score de Lighthouse de 99.

27. ¿Cómo se clasifican estos resultados?
•0 to 49 (lento):
Rojo
•50 to 89 (medio):
Naranja

28. Optimización de la ruta de acceso de representación crítica
¿Cómo optimizar estas métricas?
Optimización del ahorro del contenido

29. Evolución bytes descargados en la
Web 2013-14
Optimización del ahorro del contenido
Diferentes cuantiles dentro de la distribución: 50

30. Optimización del ahorro del contenido
Eliminación de descargas innecesarias
Optimizar encoding y tamaño de
transferencia de activos Optimización de
imágenes
Automatizar la optimización de imágenes
Reemplazar GIFs animados por videos
Optimización de arranque de Javascript
Carga de JS de terceros
Optimización Web Fonts
Almacenamiento de caché en HTTP
Uso de los Client Hints
Uso del header Save-Data

31. Eliminación de descargas innecesarias
Análisis e inventario de los recursos propios
y de terceros (p.e.script testing) ¿Podemos
calcular su valor? ¿Cuándo se usan?
Mide el rendimiento de cada recurso. ¿Se
encuentra, o debe encontrarse en la ruta de
acceso crítica? Si el recurso no está
disponible, ¿afectará el rendimiento y la
experiencia del usuario en tus páginas?
¿Sigue este recurso las prácticas
recomendadas de rendimiento (compresión,
almacenamiento en caché, etc.)?
Los recursos más rápidos y más optimizados son
aquellos que no se envían.
Foco en el análisis
individual

32. Optimizar encoding y tamaño de transferencia de activos
Aplicar optimizaciones específicas por contenido:
minificadores CSS, JS y HTML.
Aplicar GZIP para comprimir el resultado minificado.

33. Optimización de imágenes
Quick Wins
Eliminar recursos de imagen innecesarios
(EXIF)
Aprovechar los efectos CSS3 cuando sea
posible
Usar fuentes web en lugar de codificar
texto en las imágenes
Las imágenes siguen siendo la causa número uno de los archivos de
tamaño excesivo en la Web.
Según HTTP Archive, el 60% de los datos transferidos para obtener
una página web son imágenes compuestas de archivos JPEG, PNG y
GIF.
¿Existe el
equilibrio?

34. Automatizar la optimización de imágenes
JPEG – JPEG Progresivo – Codificadores JPEG – MOZJPEG – GUETZLI – BUTTERAUGLI – WEB
¡Automatización es solución eficaz!
Las prácticas recomendadas cambian y el contenido que no pasa por una canalización de
compilación puede omitirse fácilmente.
Compilación: imagemin o libvps
La mayoría de los CDN (p.ej., Akamai) y soluciones de terceros como Cloudinary, imgix, Image
Optimizer de Fastly, SmartVision de Instart Logic o la API ImageOptim ofrecen una optimización de
imágenes automatizada.
Es más baratos pagar por estos servicios que dedicar el tiempo necesario y adaptarse a las best
practices.

35. Automatizar la optimización de imágenes
Presupuestos de rendimiento web para imágenes, nueva métrica SEO?
Un presupuesto de rendimiento es un "tope" para el rendimiento de páginas web que
un equipo intenta no superar:
"las imágenes no superarán los 200 KB en ninguna página“.
Calibreapp
Speedcurve

36. Reemplazar GIFs animados por videos

37. Optimización de arranque de Javascript
Si eliminas el código JavaScript que no es esencial de
tus páginas, puedes reducir los tiempos de
trasmisión, las operaciones de análisis y compilación
que hacen uso intensivo de la CPU, y una potencial
sobrecarga de la memoria. Esto también ayuda a que
tus páginas sean interactivas más rápido.

38. Optimización de arranque de Javascript
El tamaño de transmisión es esencial en las redes de baja gama. El tiempo de
análisis es importante para dispositivos con limitaciones de CPU. Es
importante mantener estos valores bajos.

39. Carga de JS de terceros
Botones de compartir
Videos embebidos
Iframes de publicidad
Scripts de analítica
Scripts de A/B
Otras librerías

40. Evaluación del impacto de los scripts:
- Medimos el tiempo de carga usando el panel de red de chrome
- Creamos perfiles de red que respondan a las condiciones de nuestros usuarios más communes
(Network/CPU)
- Bloqueamos scripts de terceros y comparamos tiempo de carga
Carga de JS de terceros

41. Optimización scripts de terceros
- Usar atributos async o defer para evitar que se bloquee la carga.
- Analizar opciones de hostear el script para ver si mejora Perfomance.
- ¿Es posible eliminar el script?
- Utilizar <link rel=preconnect> o <link rel=dns-prefetch> cuando sea posible para disminuir la latencia.
Carga de JS de terceros
¿Existe el
equilibrio?

42. Es normal

43. Optimización Web Fonts
Selecciona fuentes que contengan los grupos e caracteres admitidos que necesitas
en función del contenido y los idiomas que vayas a utilizar, y nada más .
la familia de fuentes Noto de Google apunta a admitir todos los idiomas del mundo
y su tamaño total del archivo ZIP pesa más de 1,1 GB.

44. Optimización Web Fonts
Audita y controla el uso de fuentes
- Formatos WOFF2, WOFF, EOT y TTF
- GZIP para EOT y TTF ya que no lo hacen de forma
predeterminada
- Prioriza local() en la lista src para evitar solicitudes HTTP
- Divide en distintos intervalos Unicode para proporcionar solo
los glifos necesarios para una página determinada.
- Aplica optimizaciones para la reutilización de las fuentes; por
ejemplo según el tipo de fuente; por ejemplo, latino, cirílico,
etc.
- Especifica max-age para la caché
- Utiliza la carga progresiva con <link rel="preload">, font-
display o la API Font Loading

45. Encabezados
Etag “304 Not
Modified”
HTTP Cache-
Almacenamiento en caché
Desde el punto de vista de la optimización del rendimiento, la mejor solicitud es aquella que no
necesita comunicarse con el servidor.

46. Encabezados optativos que nos dan datos sobre el dispositivo y la red que utilizan nuestros
usuarios.
Son un método de negociación del contenido, lo que provoca que adaptemos el mismo en
función de la respuesta del navegador.
Uso del Accept header que describe que tipos de contenido entiende el navegador, por lo que
podemos ofrecerle esos.
Uso del header Save-Data, que en navegadores soportados permite aplicar optimizacionse
para reducir los datos necesarios para el renderizado.
Client Hints

47. Optimización de la ruta de acceso de representación crítica

48. Optimización de la ruta de representación crítica - CRP
CRP habilita al navegador cargar una página lo más rápido posible al priorizar qué
recursos se cargan y el orden en el que se cargan.
LEAN LOADING

49. CRP carga HTML, CSS y
JavaScript.
DOMContentLoaded.
Optimización de la ruta de representación crítica - CRP

51. Perfomance = Percepción = Carga Progresiva

52. Eduardo Garolera
edu@digitalgrowth.io
@egarolera