Por qué es importante la web performance, estado actual del problema de rendimiento en la web y los trucos para hackear la performance todavía más.

1. Picture from Simon Howden freedigitalphotos.net!
hacking web
performance
maximiliano firtman
@firt
firt.dev

2. mobile+web developer

3. consulting & training

4. firt.dev/learn

6. firt.dev

7. Tengo dos objetivos hoy…

8. Que te sientas mal

9. Enseñarte trucos
😁

10. ¡Empecemos!

11. Yo se que ya sabes que...

12. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders

13. Picture from Simon Howden freedigitalphotos.net

14. Picture from Simon Howden freedigitalphotos.net

15. 15
Picture from Simon Howden freedigitalphotos.net

16. ¡Es principalmente responsabilidad
del front end!

17. Yo se que ya sabes que...
Existen las métricas
centradas en el usuario

18. Signos Vitales Web
(Core Vitals by Google)

19. Se calculan sobre el percentil 75
tanto en mobile como desktop

20. Métricas centradas en el usuario
Largest Contentful Paint
LCP - mide la carga inicial

21. Métricas centradas en el usuario
First Input Delay
FID - mide la interactividad

22. Métricas centradas en el usuario
Cumulative Layout Shift
CLS - mide la estabilidad visual

23. ... hay más métricas: Speed Index,
TTFB, FCP, Time to Interactive

24. "Pero oye, mi web anda rápido"

25. Objetivos
LCP: 2.5s - 4.0s
FID: 100ms - 300ms
CLS: 0.1 - 0.25

26. Yo se que ya sabes que
hay que...

27. Optimizar la transferencia de
recursos
Ya sabes que hay que

28. Trabajar con TLS y HTTP/2
Ya sabes que hay que

29. Usar CSS como aperitivo
Ya sabes que hay que

30. Usar JavaScript como postre
Ya sabes que hay que

31. Optimizar imágenes
Ya sabes que hay que

32. Usar Service Workers
Ya sabes que hay que

33. Ya estás haciendo todo esto, ¿no?

34. ¿Cuál es el problema entonces?

35. Time to Interactive
El problema
HTTP Archive with Lighthouse

36. 2 3 4
5 6 7 8
9.3
1
9

37. Si una página tarda más de 3 segundos
El problema
53% abandona
Research by Double Click

38. El problema
Siembre hemos
subestimado el mundo móvil

39. iOS y Android

40. ¿Safari y Chrome?

41. browsers with market share

42. browsers with market share

44. ¡Usamos Red Celular!

45. Vamos Max, ¡tenemos 4G! Ya el
rendimiento no es un problema...
(
)

46. www.gsma.com/mobileeconomy - Dec 2019

47. Ancho de Banda
Redes celulares

48. RTT - latency
Min Max
Redes celulares

49. Min Max
RTT - latency
Redes celulares

50. Todavía tenemos muchos
problemas de performance
(
)

51. Chrome Lite Pages 🆕

52. Chrome 73 Android
Chrome Lite Pages
•Si el usuario habilita
Data Saver
⭐🆕

53. Se mostrará una Lite Page si
Chrome Lite Pages
• Estás en una red 2G
O
• First Contentful Paint es mayor a 5s
⭐🆕

54. Lite Page?
Chrome Lite Pages
• Cloud-based rendering
• Optimizaciones "Smart"
• No se cargan todas las
imágenes
⭐🆕

55. Progressive Web Apps 🆕

56. Progressive Web Apps 🆕

57. Progressive Web Apps 🆕

58. ¡A Hackear Web Performance!

59. Hackear Carga Inicial

60. Evitar más de un roundtrip
Carga Inicial
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB

61. KiB?
🤔

62. ¿Cuántos bytes en un kilobyte?

63. 1 KB = 1024 bytes

64. 1 KB = 1024 bytes

65. 1 KB = 1000 bytes

70. 1 KiB = 1024 bytes

71. Evitar más de un rountrip
Carga Inicial
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB

73. Above the Fold
(ATF)

74. Below the Fold
(BTF)

75. Entregar ATF en 14.6 KiB
Carga Inicial
• Embeber todo el CSS y JS que entre
• Si hay espacio, agregar logo y/o imágenes
en baja resolución

76. Evitar el redirect de http a httpS
• Usar HSTS (HTTP Strict Transport Security)
• Cabecera
• Opt-in en hstspreload.org
Carga Inicial

77. Hackear la Transferencia de
Datos

78. HTTP/3 (sobre QUIC)
Transferencia de Datos
• Protocolo "beta" sobre UDP
• Reduce latencia y congestión de mensajes
• Interfaz HTTP/2 con TLS
•

79. Usar Brotli
• Puede ahorrar hasta ~25% de transferencia
comparado con GZIP
Transferencia de Datos

80. Hackear Carga de Recursos

81. Control de Caché Moderno
Carga de Recursos
• Hash en nombres de archivos es un patrón común
• Navegadores hacen igual un request condicional

82. • Hola a Cache-Control: immutable
Control de Caché Moderno
Carga de Recursos

83. Hay un nuevo patrón común
• 1) entregar desde el caché
• 2) actualizarlo en el background para el futuro
Control de Caché Moderno
Carga de Recursos

84. Cache-Control: stale-while-revalidate=99
Control de Caché Moderno
Carga de Recursos

85. Calentar motores
• Ayudar al navegador a comenzar cuanto antes
• Consultas DNS: ~150ms
• Conexiones TCP y TLS: ~200ms
Carga de Recursos

86. Anunciar consultas DNS
<link rel="dns-prefetch" href=“https://newdomain.com">
HTML
Carga de Recursos

87. Anunciar conexiones TLS
<link rel="preconnect" href=“https://newdomain.com”
crossorigin>
HTML
Carga de Recursos

88. Anunciando en la cabecera
Link: <https://my-analytics.com>; rel=preconnect;
crossorigin
HTTP
Carga de Recursos

89. Precarga
Ayudar al navegador a manejar la prioridad de
descarga de recursos
Carga de Recursos

90. Precarga
<link rel="preload" href=“styles.css” as=“style”>
HTML
Carga de Recursos

91. Precarga
Link: <https://otherhost.com/font.woff2>; rel=preload;
as=font; crossorigin
HTTP
Carga de Recursos

92. Priority Hints
<link rel="preload" as="image"
href="hero.jpg" importance="high">
<img src="otherimage.jpg" importance="low">
HTML
🆕
Carga de Recursos

93. Reevaluar CDNs
• Era muy común descargar recursos de CDNs
• Safari ya no usa el caché en estos casos y
Chrome lo está por seguir
Carga de Recursos

94. Hackeando Imágenes

95. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders
Una imagen vale más que
mil palabras...

96. … si baja

97. Carga Demorada (Lazy Load)
<img src="photo.png" alt="Never forget it"
loading="lazy">
HTML
🆕
Imágenes

98. Source: addyosmani.com

99. Es ya hora de reemplazar
JPEG y PNG
Imágenes

100. WebP
https://github.com/imagemin/zopflipng-bin
32%
Imágenes

101. AVIF
https://github.com/imagemin/zopflipng-bin
40%
Imágenes

102. Zopfli PNG
https://github.com/imagemin/zopflipng-bin
20%
Imágenes

103. Guetzli JPEG
https://github.com/google/guetzli
20%
Imágenes

104. Hackear lo Conocido

105. ¿React?
¿Angular?
¿Vue?
Lo Conocido

106. Server-Side: Next.js, Nuxt.js
Generadores estáticos: Eleventy
Lo Conocido

108. Performance es PRIORIDAD UNO
Hay que empujar siempre más
Vale la pena el esfuerzo

109. ¿Te sientes mal ya?

110. Foto de freefoto.com
www.firt.dev
@firt
¡GRATIS!