2001KB - A Slow Odyssey (Una odisea de despacio)

Título: 2001KB - A Slow Odyseey
Tema: Optimización web
Evento: JSDay Canarias 2018 ( https://jsdaycanarias.com/ )
Lugar: Facultad de matemáticas (Universidad de La Laguna)
--------------------
Descripción: Un resumen de consejos, técnicas, herramientas y características para focalizarse en la optimización web y reducción del tiempo de carga de una página web.
Vídeo: https://www.youtube.com/watch?v=zIV_JLgBxbs

Transcript

1. J. Román Hdez @Manz 2001KB A SLOW ODYSSEY (UNA ODISEA DE DESPACIO)
2. twitter.com/manz He trabajado / colaborado con
3. Fisiológicas Seguridad Social Autoestima Autorealización IN N BA ÍA N ÓVI Pirámi Mas
4. Pirámi Mas Velocidad Objetivo Diseño UX Accesibilidad Man IN N BA ÍA N ÓVI ¿Por é ab na us i a w ?
5. Reducir tiempos de carga Descargar menos contenido Reutilizar info ya descargada Eliminar esperas bloqueantes Objetivos
6. Planificación
7. emezeta.com 104.28.20.126 GET /index.html GET /video.mp4 GET /script.js GET /image.jpg GET /font.ttf GET /index.css D
8. Cola en navegador (prioridad, socket TCP ocupado…) Negociación (DNS, SSL...) Enviando petición (Petición, Espera TTFB...) Descarga (Recepción de datos) Esquema de conexión Cada archivo pasa por las siguientes etapas...
9. HTTP/0.9 1991 HTTP/1.0 1996 HTTP/1.1 1999 PUT DELETE OPTIONS CONNECT TRACE Protocolo HTTP HTTP/2 2015 Multiplexación Compresión (header) Tramas binarias Server PUSH GET / POST / HEAD
10. Diferencias de HTTP/1.1 y HTTP/2 Server server-side Server server-side Browser client-side Browser client-side
11. Diferencias de HTTP/1.1 y HTTP/2 Demo: Akamai HTTP2 / Demo: GoLang HTTP2 HTTP/1.1 HTTP/2 6 conexiones TCP/host (Chrome) 1 conexión TCP/host (multiplexado) ¡Blo a t ! (Req e H P )
12. HTTP/0.9 1991 HTTP/1.0 1996 HTTP/1.1 1999 HTTP/2 2015 SPDY 2009 QUIC 2013 Protocolo HTTP
13. Negociación
14. Cola en navegador (prioridad, socket TCP ocupado…) Negociación (DNS, SSL...) Enviando petición (Petición, Espera TTFB...) Descarga (Recepción de datos) Fase 2: Negociación Negociar la comunicación con un servidor
15. emezeta.com 104.28.20.126 Men b o n o di n e Menos resoluciones DNS Cu d o n re c i s 301 → SEO 302 → temporales Fase 2: Negociación Resolución de DNS y redirecciones twitter.com 104.244.42.193 google.com 216.58.201.142
16. "Sugerencias de recursos" Resource Hints dns-prefetch preconnect prefetch preload prerender na ción u r na ción a l
17. <link rel="dns-prefetch" href="//emezeta.com"> "Resource Hints" W3C: Resource Hints Draft dns-prefetch Resuelve DNS con prioridad alta en segundo plano
18. <link rel="preconnect" href="//emezeta.com"> "Resource Hints" W3C: Resource Hints Draft preconnect Establece una conexión antes de necesitarla
19. <link rel="prefetch" href="//emezeta.com/file.js" as="script"> "Resource Hints" W3C: Resource Hints Draft prefetch Propone descargar y almacenar en cache un recurso por parte del navegador "si tiene tiempo libre"
20. <link rel="prerender" href="//emezeta.com/link"> "Resource Hints" W3C: Resource Hints Draft prerender Prerenderiza una URL al que el usuario probablemente acceda (sólo URLs con alta probabilidad de click)
21. <link rel="preload" href="//emezeta.com/file.js" as="script"> "Preload" W3C: Resource Hints Draft preload Precarga recursos críticos en segundo plano (a diferencia de prefetch, siempre lo hará) a d o, do n (if ), fe h (J O ), fo , im , s ip , s le, t a k, vi ... fo s!
22. Esperas
23. Cola en navegador (prioridad, socket TCP ocupado…) Negociación (DNS, SSL...) Enviando petición (Petición, Espera TTFB...) Descarga (Recepción de datos) Fase 3: Envío de petición Envío de peticiones y las esperas correspondientes
24. Enviando petición (Petición, Espera TTFB...)
25. WEBPAGETEST.ORG Herramienta de comprobación de rendimiento
26. Tiempo visual de carga Tiempo que "aparenta" tardar una página 500ms 1.5s 3s 5s 7s
27. Tiempo visual de carga Tiempo que "aparenta" tardar una página TTFB Time to First Byte FCP First Contentful Paint FMP First Meaningful Paint TTI Time to Interactive Complete Page loaded 180ms 240ms 333ms 927ms 1.6s
28. Reducir TTFB Reducir el "tiempo hasta el primer byte"
29. Comparación visual https://www.webpagetest.org/video/
30. Reducir TTFB Reducir el "tiempo hasta el primer byte" Infrastructure server-side Browser client-side In a s c u de r or Ser s e Con ra ón o n o ía ut ad e h n Bas at p o r ión a k-en Cli s e Con ón e s a o co t a óvi
31. WebPageTest (Waterfall) Doc t Com t DO on t Lo d / In e c e
32. WebPageTest (Waterfall)
33. /css/index.min.css gzip gzip (LZ77 + 32-CRC) deflate zlib (LZ77, fast) br Brotli (+20% deflate) Compresión al vuelo
34. Test de rendimiento
35. Descargas
36. Cola en navegador (prioridad, socket TCP ocupado…) Negociación (DNS, SSL...) Enviando petición (Petición, Espera TTFB...) Descarga (Recepción de datos) Fase 4: Descarga Recepción de datos e información
37. Crecimiento de tipos de archivos Fuente: SpeedCurve, basado en HTTPArchive
38. Tipo de contenido WebPageTest / Content Breakdown
39. "Network" Tab Google Chrome Dev Tools
40. Ciclo de vida (Pintado gráfico del navegador) JS CSS Layout Paint Composite Cam vi es, DO , AP we ma s... Sel re C , va s co t o , et ... DO , la ge l... Tex , co s, imáge , bo s... Re r iz ón de s
41. Rendimiento Google Chrome Dev Tools
42. Monitorización
45. Optimización visual Propiedades CSS que evitan el repintado de página position: relative; /* Evitar position */ transform: translate(xpx, ypx); translateX(xpx) translateY(ypx); /* Escalado */ transform: scale(x, y); scaleX(n) scaleY(n);
46. Optimización visual Propiedades CSS que evitan el repintado de página /* Rotaciones */ transform: rotate(gdeg); rotateX(xdeg) rotateY(ydeg); transform: skew(gdeg); skewX(xdeg) skewY(ydeg); /* Cambios de opacidad */ opacity: 0 … 1;
47. CSS Triggers Rendimiento de propiedades CSS: CSS Triggers
48. CSS: Will-change https://drafts.csswg.org/css-will-change/ .elemento { transform: rotate(30deg); will-change: transform; } Informa anticipadamente al navegador de cambios en animaciones, transiciones o transformaciones para optimizar operaciones costosas Op i z , no ci p o l de d i t
49. Tipografías
50. Formatos de fuentes Fuentes para web True Type 1991 (Apple) Open Type 1996 (Microsoft) TTF improved Web Open Font 2009 (Mozilla) Compression XML Metadata Web Open Font 2 2018 (Google) Compression with Brotli
51. Formatos de fuentes Fuentes para web 213KB 150KB 99KB 59KB Open Sans (Regular)
52. Formatos de fuentes Fuentes para web True Type Open Type Web Open Font Web Open Font 2 @font-face { font-family: 'Open Sans'; src: url('opensans.woff2') format('woff2'), src: url('opensans.woff') format('woff'), src: url('opensans.ttf') format('truetype'); } CH36, FF39, SF12, OP23, ED14, IE CH5, FF3.6, SF5.1, OP11.5, ED12, IE9 CH4, FF3.5, SF3.1, OP10.1, ED12, IE9
53. Formatos de fuentes Herramientas & Transfonter: https://transfonter.org/ ttf2woff (Fontello) https://github.com/fontello/ttf2woff woff2 (Google) https://github.com/google/woff 2
54. Font-display Evita problemas de visualización de fuentes .font { font-display: auto; } block → Oculta texto hasta que la fuente se descarga completamente swap → Muestra texto sin estilos y cambia de golpe fallback → Compromiso entre auto y swap optional → Similar al anterior (fallback) Fla f is te Fla f t ed t FOIT FOUT
55. Minificación
56. Minificación Eliminar carácteres no necesarios index.css
57. Minificación Eliminar carácteres no necesarios index.min.css
58. Minificación Eliminar carácteres no necesarios index.html (601KB) index.min.html (228KB) index.html (737KB) index.min.html (438KB) index.html (1.6MB) index.min.html (397KB)
59. Minificadores Herramientas de optimización y minificación HTML https://github.com/posthtml/htmlnano https://github.com/kangax/html-minifier
60. Minificador CSS Herramientas de optimización y minificación CSS https://github.com/jakubpawlowicz/clean-css https://github.com/cssnano/cssnano https://github.com/css/csso https://github.com/mattbasta/crass
61. Minificador Javascript Herramientas de optimización y minificación JS https://github.com/mishoo/UglifyJS https://github.com/terser-js/terser https://github.com/mishoo/UglifyJS2 (tree harmony) UNMANTAINED
62. CSS Crítico
63. Analyze CSS CSS Stats: https://cssstats.com/
64. Especificidad CSS Stats: https://cssstats.com/ Twitter.com - 630KB Emezeta.com - 89KB Youtube.com - 789KB Amazon.com - 30KB
65. Especificidad CSS Stats: https://cssstats.com/ Twitter.com - 630KB Emezeta.com - 89KB Youtube.com - 789KB Amazon.com - 30KB
66. Especificidad CSS Stats: https://cssstats.com/ Twitter.com - 630KB Emezeta.com - 89KB Youtube.com - 789KB Amazon.com - 30KB
67. Cobertura CSS/JS Google Chrome Dev Tools
68. Cobertura CSS Google Chrome Dev Tools PurgeCSS https://github.com/uncss/uncss https://github.com/purifycss/purifycss https://github.com/FullHuman/purgecss
69. Critical CSS https://github.com/addyosmani/critical https://github.com/macbre/analyze-css Critical CSS HTML Inline Normal CSS External file
70. Optimización
71. Formatos de imagen GIF 1987) 1992) 2000) 2009) 1996) 2001 2001) 2001) 20088 2010) 2015) 2014) 2015) MNG JNG A BPG
72. Formatos tradicionales 1992) 2000) 2009) 1996) 2001 2010) GIF 1987) Formatos next-gen J E co ca l a si ma ón ve r a 20088 A si y o r , p i r me vi
73. Responsive Images Fallbacks for images: https://responsiveimages.org/ <picture> <source srcset="img/imagen.webp" type="image/webp"> <source srcset="img/imagen.jpg" type="image/jpeg"> <img src="img/imagen.jpg"> </picture> Con r e W p Sin r e W p, pe n o r <pi r > imagen.webp Sol ca na en imagen.jpg Sol ca na en ?
74. F llback
75. Formatos de audio 1991 WAV) 1993 1997 AAC 1998) 1999 WMA 2001 2000 2003 2012
76. 1991 WAV) 1993 1997 AAC 2001 2000 2012 Formatos sin pérdidas Formatos con pérdidas
77. Audio HTML5 Fallbacks para audio <audio controls> <source src="audio.ogg"> <source src="audio.mp3"> Tu navegador no soporta Audio HTML5. </audio> Con r e O g Vo s Sin r e O g Vo s, pe n o r <a d o> audio.ogg Sol ca n a o audio.mp3 Sol ca n a o ?
79. Audio HTML5 Fallbacks para audio <audio controls> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> Tu navegador no soporta Audio HTML5. </audio> si y p íci co y p íci audio.mp3 Des g o audio.mp3 Sol ca n a o audio.ogg
80. 2001 2013 2018 2003 2002 Codecs de video 2001 2000 H.265 - HEVC H.264 - AVC H.263 2002 2003 2015 2009 2015 2008 2008 2013 2013
81. OGG Soporte de video
82. Optimizadores Recomprime y reduce el tamaño de imágenes
83. 1992) Optimizadores JPEG Archivos JPEG (con pérdidas) jpeg-recompress: https://github.com/danielgtaylor/jpeg-archive MozJPEG: https://github.com/mozilla/mozjpeg Guetzli: https://github.com/google/guetzli jpeg-recompress 117KB → 50KB 2.844s mozjpeg 117KB → 33KB 0.368s guetzli 117KB → 36KB 21.304s
84. 1996) advpng: http://www.advancemame.it/doc-advpng.html OptiPNG: http://optipng.sourceforge.net/ ZopfliPNG: https://github.com/google/zopfli uPNG: https://github.com/photopea/UPNG.js Optimizadores PNG Archivos PNG (sin pérdidas) advpng 51KB → 39KB 1.231s OptiPNG 51KB → 38KB 5.356s ZopfliPNG 51KB → 35KB 26.269s uPNG 51KB → 26KB 1.145s
85. SVGO https://github.com/svg/svgo $ svgo image.svg -p 2 -o image.min.svg image.svg: Done in 421ms! 57.742KiB - 46.8% = 30.707 KiB original 58KB svgo 31KB
86. 1992) 1996) 2001 GIF 1987) Optimizadores https://github.com/ManzDev/optimization-benchmark GifSicle: https://github.com/kohler/gifsicle GifLossy: https://github.com/kornelski/giflossy GifSky: https://gif.ski/ jpeg-recompress: https://github.com/danielgtaylor/jpeg-archive MozJPEG: https://github.com/mozilla/mozjpeg Guetzli: https://github.com/google/guetzli svgo: https://github.com/svg/svgo scour: https://github.com/scour-project/scour advpng: http://www.advancemame.it/doc-advpng.html OptiPNG: http://optipng.sourceforge.net/ ZopfliPNG: https://github.com/google/zopfli uPNG: https://github.com/photopea/UPNG.js
87. Automatización
88. Automatizadores Crea bundlers y realiza tareas de automatización
89. Import-cost Extensión para VSCode import-cost Wix https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
90. Bundle Analyzer Extensión para Webpack/Parcel webpack: https://github.com/webpack-contrib/webpack-bundle-analyzer parcel: https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser
91. Lazy load Cargar imágenes bajo demanda cat1.jpg cat2.jpg cat3.jpg initial load
92. Cachear Cache everything! Cache server-side Cache client-side Cache network-side s o d ro r? s o d C ? s o d er ? ...
93. PSI PageSpeed Insights $ psi --strategy desktop https://www.emezeta.com/ ------------------------------------------------------- URL: emezeta.com Strategy: desktop Speed: 84 CSS size | 98.6 kB HTML size | 15.7 kB Image size | 1.61 MB JavaScript size | 150 kB CSS resources | 3 Hosts | 13 JS resources | 10 Resources | 45 Static resources | 34 Other size | 165 kB Total size of request bytes sent | 4.33 kB
94. LightHouse Google LightHouse $ lighthouse https://www.emezeta.com/ --view ------------------------------------------------------- ChromeLauncher Waiting for browser. +0ms ChromeLauncher Waiting for browser... +5ms ChromeLauncher Waiting for browser...√ +719ms status Initializing… +2s status Loading page & waiting for onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, WebSQL, MetaDescription, FontSize, CrawlableLinks, MetaRobots, Hreflang, EmbeddedContent, Canonical, RobotsTxt, Fonts +354ms statusEnd Loading page & waiting for onload +3s status Retrieving trace +3ms
95. LightHouse Google LightHouse
97. ¡Gracias! José Román Hdez @Manz