-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
362 lines (317 loc) · 12.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Rendimiento en frontend - Adalab</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/beige.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="#14D9C4">
<h2>Rendimiento en frontend</h2>
<h3>¡la velocidad y el tamaño importan!</h3>
<img style="background: #fff; padding: 20px; height: 120px" src="images/adalab.svg">
<pre><code class="hljs html" style="font-size: 32px; padding: 20px; text-align: center; word-wrap: break-word;">luisddm.github.io/web-performance-adalab</code></pre>
</section>
<section data-background="#14D9C4">
<h2>Presentación</h2>
</section>
<section>
<h2>Quién soy</h2>
<ul>
<li>Ingeniero de Teleco y autodidacta</li>
<li>Trabajo en Alea Soluciones</li>
<li>Coorganizador de FrontFest</li>
<li>Aficionado a la seguridad y la electrónica</li>
</ul>
</section>
<section>
<h2>Qué hacía antes</h2>
<ul>
<li>Cuatro años trabajando en frontend</li>
<li>Previamente fui becario y freelance</li>
<li>Orgulloso alumnus de h4ckademy</li>
</ul>
</section>
<section>
<h2>Qué (debería) ser el desarrollo de software</h2>
<p><span style="font-style: italic">Opinión personal</span></p>
<ul>
<li>No atarse a tecnologias específicas, ser versátil</li>
<li>Buena gestión y buen código</li>
<li>Lo más importante, las personas</li>
<li>Especializarse está bien, pero evitar silos también</li>
</ul>
</section>
<section>
<h2>¡Ojo con los frameworks!</h2>
<p><a href="http://javisantana.com/2019/04/07/odio-los-framework.html">→ Odio los frameworks</a> (Javi Santana)</p>
</section>
<section data-background="#14D9C4">
<h2>Motivación</h2>
</section>
<section>
<h2>Tenemos un problema con la web</h2>
<p>Tamaño, lentitud, complejidad, falta de usabilidad</p>
<p>No se pensó para su uso actual</p>
</section>
<section>
<h2>Posibles causas</h2>
<ul>
<li>Mal código que crece desmesuradamente</li>
<li>No analizar correctamente al usuario objetivo</li>
<li>Falta de atención a los detalles</li>
<li>Decisiones tecnológicas erróneas</li>
<li>...</li>
</ul>
</section>
<section>
<h2>Análisis y soluciones</h2>
<h4>Analizaremos el problema</h4>
<p>Por qué ocurre, desde cuando ocurre, en qué impacta</p>
<h4>Propondremos soluciones</h4>
<p>Cómo ganar simplicidad, ligereza y rapidez</p>
</section>
<section data-background="#14D9C4">
<h2>Análisis</h2>
</section>
<section>
<h2>Breve historia de la web</h2>
<ul>
<li><strong>1990:</strong> HTTP, HTML y el primer navegador</li>
<li><strong>1995:</strong> Javascript</li>
<li><strong>1996:</strong> CSS</li>
<li><strong>1997-1998:</strong> Comercialización de la web</li>
<li><strong>1999-2001:</strong> Burbuja punto com</li>
<li><strong>2002:</strong> Web 2.0</li>
</ul>
</section>
<section>
<h2>Cómo hemos cambiado</h2>
<ul>
<li>De simple texto con hipervínculos a grandes aplicaciones enriquecidas</li>
<li>De compartir conocimiento a negocio</li>
<li>De unos pocos "frikis" al público en general</li>
</ul>
<p><a href="https://httparchive.org/reports/state-of-the-web">→ HTTP Archive: State of the Web</a></p>
</section>
<section>
<h2>Caso de estudio: USA Today</h2>
<ul>
<li>Edición USA vs edición UE (post RGPD)</li>
<li>Usaremos las Dev Tools del navegador</li>
<ul>
<li>Pestaña de <span style="font-style: italic">network</span></li>
<li>Forzar el <span style="font-style: italic">throttling</span></li>
</ul>
<li>Peso total vs transferido</li>
<ul>
<li>Depende de caché, cabeceras, compresión, redirecciones...</li>
</ul>
</ul>
<p><a href="https://usatoday.com">→ USA Today</a></p>
<p><a href="https://twitter.com/paulcalvano/status/1000094333524201473?lang=es">→ Twit de @paulcalvano</a></p>
</section>
<section>
<h2>Otros casos de estudio</h2>
<table>
<tr>
<th>Sitio web</th>
<th>Tx / Total</th>
<th>Req.</th>
</tr>
<tr>
<td>Marca</td>
<td>5,6 / 13,8 MB</td>
<td>~600</td>
</tr>
<tr>
<td>El País</td>
<td>6,1 / 17,6 MB</td>
<td>~450</td>
</tr>
<tr>
<td>Tumblr</td>
<td>3,6 / 6,2 MB</td>
<td>~75</td>
</tr>
<tr>
<td>Medium</td>
<td>1,4 / 3,3 MB</td>
<td>~50</td>
</tr>
</table>
</section>
<section data-background="#14D9C4">
<h2>¿A quién perjudica esto?</h2>
</section>
<section>
<h2>Ámbito geográfico</h2>
<p>Algunas de las webs que hacemos las utiliza gente que vive en entornos muy diferentes</p>
<p><a href="http://www.movistar.es/particulares/coberturas/movil/4G/">→ Mapa cobertura Movistar 4G</a></p>
<p><a href="https://elpais.com/tecnologia/2019/04/02/actualidad/1554202078_983656.html">→ Muchas zonas de Europa aún carecen de conexión de calidad a Internet (El País)</a></p>
</section>
<section>
<h2>Dispositivos heterogéneos</h2>
<p>Existe una ingente variedad de dispositivos para acceder a la web, que cuestan desde decenas a miles de euros</p>
</section>
<section>
<h2>Elevado consumo de datos</h2>
<p>¿Cuántas webs podemos ver con un giga de datos?</p>
</section>
<section>
<h2>Bajo "engagement"</h2>
<p>Cuando una web tarda demasiados segundos en cargar, la abandonamos</p>
</section>
<section>
<h2>Accesibilidad</h2>
<p>El mal rendimiento implica exclusión de algunos segmentos de población</p>
</section>
<section>
<h2>Privacidad</h2>
<p>Enorme cantidad de trackers que obtienen datos personales permanentemente a grandes empresas de internet, incluso sin estar logueados, y que ralentizan la web</p>
</section>
<section data-background="#14D9C4">
<h2>Soluciones</h2>
</section>
<section>
<h2>Principio de Pareto</h2>
<p>También conocido como regla del 80/20</p>
<p>Disponemos de tiempo y presupestos limitados, así que hay que priorizar las optimizaciones</p>
</section>
<section>
<h2>Comprimir y redimensionar imágenes</h2>
<ul>
<li>Saber cuándo usar JPG, PNG, SVG u otros</li>
<li>Buscar un balance entre calidad y tamaño reducido</li>
<li>¡No GIFs ni Flash!</li>
<li>En CSS, usar diferentes imágenes para diferentes media queries</li>
<li>Usar tag <code><picture></code></li>
</ul>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture">→ El elemento Picture en MDN</a></p>
</section>
<section>
<h2>Lo mismo con los vídeos</h2>
<ul>
<li>Elegir el formato adecuado (WebM, MP4, OGG...) pero cuidado con la compatibilidad</li>
<li>¡No GIFs animados! Usar vídeo en su lugar</li>
<li>¡No autoplay! Que decida el usuario</li>
<li>Cuidado con incrustar vídeos de YouTube</li>
</ul>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">→ El Elemento Video en MDN</a></p>
</section>
<section>
<h2>Minificar y concatenar</h2>
<ul>
<li>Minificar es eliminar espacios, intros, etc., reducir nombres de variables y otras técnicas similares para restar tamaño</li>
<li>Concatenar es juntar todos los archivos JS y CSS en uno solo para reducir las peticiones HTTP</li>
<li>Los frameworks suelen automatizar ambas cosas para el código de producción</li>
</ul>
<p><a href="https://github.com/luisddm/gulp-adalab">→ Ejemplo con Gulp.js</a></p>
</section>
<section>
<h2>Tipografías</h2>
<ul>
<li>Si importamos con <code>@font-face</code> en CSS, usar formato <strong>woff2</strong> siempre que se pueda</li>
<li>Usar adecuadamente <code>font-display</code> para que el texto sea visible con una fuente de fallback mientras se carga la nuestra</li>
<li>Cuidado con importarlas directamente de Google Fonts o similares</li>
</ul>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">→ La regla @font-face de CSS</a></p>
</section>
<section>
<h2>Otros detalles</h2>
<ul>
<li>Colocar scripts siempre al final del <code><body></code> para no bloquear el renderizado</li>
<li>Eliminar en la medida de lo posible todo el JS y CSS que no se use</li>
</ul>
</section>
<section>
<h2>Compresión de datos y cacheado</h2>
<p>Ahorran mucha transferencia de datos, pero dependen de la política del servidor</p>
</section>
<section>
<h2>HTTP/2</h2>
<ul>
<li>Evita la necesidad de concatenar y modifica otras buenas prácticas de HTTP/1.1</li>
<li>Ha de estar soportado tanto por el servidor como por el navegador</li>
</ul>
<p><a href="https://developers.google.com/web/fundamentals/performance/http2/">→ Introducción a HTTP/2</a></p>
</section>
<section>
<h2>Progressive enhancement</h2>
<ul>
<li>Implica una forma integral de pensar y desarrollar</li>
<li>Construir primero lo básico y añadir mejoras que se activen en función de las capacidades del hardware</li>
<li>Que TODOS los usuarios tengan una experiencia mínima, que no se rompa nada</li>
<li>Cada vez tenemos más estándares web con fallback</li>
<li>Útil vs usable: que sea útil lo más rápido posible</li>
</ul>
<p><a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">→ The cost of Javascript (Addy Osmani)</a></p>
</section>
<section data-background="#14D9C4">
<h2>Herramientas</h2>
</section>
<section>
<h2>Lighthouse</h2>
<p>Genera un informe sobre el rendimiento de la web</p>
<p><a href="https://developers.google.com/web/tools/lighthouse/">→ Auditar apps web con Lighthouse</a></p>
<p><a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">→ Instalar Lighthouse en Chrome</a></p>
</section>
<section>
<h2>GTmetrix</h2>
<p>Analiza el rendimiento de la web y ofrece opciones de optimización</p>
<p><a href="https://gtmetrix.com/">→ GTmetrix</a></p>
</section>
<section>
<h2>Conclusiones</h2>
<ul>
<li>Cuando se optimiza, empezar por lo mínimo, y crecer estableciendo prioridades teniendo en cuenta los usuarios potenciales y los recursos disponibles</li>
<li>Establecer prioridades de optimización</li>
<li>La simplicidad es la gran aliada de la web y el software en general</li>
</ul>
<p><a href="https://twitter.com/PerfReviews_">→ @PerfReviews_ en Twitter</a></p>
</section>
<section>
<h2>¡Gracias!</h2>
<h2>¿Alguna pregunta?</h2>
<br>
<ul>
<li><a href="https://twitter.com/@luisddm_"><strong>Twitter: </strong></a>@luisddm_</li>
<li><a href="https://mastodon.technology/@luisddm"><strong>Mastodon: </strong></a>mastodon.technology/@luisddm</li>
<li><a href="https://medium.com/@luisddm"><strong>Medium: </strong></a>medium.com/@luisddm</li>
<li><a href="https://github.com/luisddm"><strong>Github: </strong></a>github.com/luisddm</li>
</ul>
</section>
</div>
</div>
<script src="js/reveal.min.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
hash: true,
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true }
]
});
</script>
</body>
</html>