Optimización de rendimiento web para dinosaurios

José Manuel Lucas / @jmlweb

Lead Frontend Developer @pccomponentes

~~Freelance~~

~~Series Yonkis~~

~~Digio~~

Conceptos importantes

First byte
Start render
Fully loaded
Speed Index

¿Cómo medir el tiempo de carga?

webpagetest.org

Conexión 3G rápida

Emular navegador móvil

Un ejemplo

Frontend en 2017

ES6/ES7
React/Angular/Vue
Universal/Isomorphic
PWA
Webpack Code Splitting
BEM/Atomic/SuitCSS

Nuestro frontend inicial

jQuery v1.91
Bootstrap 4 (alpha 2)
Sass compilado localmente (directorio compartido)
CSS se sube por FTP
Fuera de repositorio GIT, Jenkins y demás
Cloudflare

¿Y por qué no?

Rehacer la página
Migrar a un sistema modular
Dejar de cargar X fichero/feature
Usar el stack de moda

Hay MUCHO código y necesito pagar mi casa.

Mi jefe también necesita pagar las suyas.

Cloudflare

Cloudflare 💖

CDN
HTTP/2 y SPDY
WebP y compresión de imágenes "on demand"
Caché
Anti DDOS

CDN

El cliente puede descargar los assets desde el datacenter más cercano.

Menor latencia y tiempo de descarga.

HTTP/2

Multiplexación de conexiones: Descargas simultáneas

WebP

Imágenes en torno a un 35% más ligeras

Se intercepta la petición buscando la cabecera:

accept:image/webp,image/*,*/*;q=0.8

Si la encuentra devuelve el mime y la imagen adecuada

Request URL: https://cdn.pccomponentes.com/img/iconos/menu-arrows-superfamilia.png

content-disposition: inline; filename="menu-arrows-superfamilia.webp"

content-type: image/webp

¿Por dónde empezamos?

Carga asíncrona de fuentes y almacenamiento en LocalStorage

Carga asíncrona de herramientas externas (análisis, métricas y demás)

Lazy loading de contenidos "escondidos" (tabs, modales...)

Concatenación de ficheros CSS base

Preparando un stack frontend (medio) en condiciones

Integración de ficheros fuente en repositorio

Gulp: Sass, PostCSS, imagemin, rev...

Tests unitarios y de retrospección

Preparando un sistema de diseño modular

Basado en BEMITCSS

Reducción de la especifidad

Reutilización de código

¿Podemos hacer una prueba controlada?

Cabecera

Menú

¿Qué páginas son más importantes?

Portada
Listados
Detalle de producto

¡¡¡A recodificar!!!

Optimización básica de javascript

Cacheo de selectores
Evitar modificaciones del DOM en bucle
No abusar de las closures anidadas
Reducir variables globales
Minimizar el uso de setTimeout y setInterval