HTTP/2
BUENAS PRÁCTICAS
Fernando Puente
@fpuenteonline

0
BIO
@fpuenteonline - Soy informático de vocación y de profesión,
formador frustrado y beginner de comer y beber.
Tengo 21 años de experiencia en TI, los últimos 11 en medios de
comunicación online y desde 2007 con plataformas WordPress.
CTO de La Estrategia de Chapman
Formador para no técnicos
Consultor y colaborador de SiteGround
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

Sumario
1. Introducción
2. Buenas prácticas
3. Recomendaciones
4. Verdadero o falso
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

1
Introducción
Un nuevo protocolo de red para la WWW que viene para
mejorar el actual HTTP: las conexiones entre el navegador y el
servidor web.
Se trata de una mejora del actual protocolo HTTP para que las
conexiones a las páginas web sean más rápidas y eficaces,
reduciendo tiempos entre las llamadas.
Es una gran mejora, que lleva pendiente desde 1999, y que
comenzó Google con su protocolo SPDY en el 2009.
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

1
Características
• Binario
• Multiplexado => paralelización y prioridad
• Re-usa conexiones TCP
• Requiere HTTPS
• Compresión de cabeceras
• Push de servidor
• Tecnología nueva, menos de 2 años, pero amplia
implantación y compatibilidad
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

MEJORA ESTIMADA
10-15%
SOBRE HTTP/1.1
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

1
Navegadores soportan HTTP/2 (I)
• Internet Explorer: v11 o superior, sobre TLS y Windows 10
• Microsoft Edge: v12 o superior, sobre TLS
• Firefox: v41 o superior, sobre TLS
• Firefox para Android: v57 o superior, sobre TLS
• Chrome: v46 o superior, sobre TLS
• Chrome para Android: v57 o superior, sobre TLS
• Safari: v9 o superior, sobre TLS y OSX v10.11+
• Safari para iOS: v9.2 o superior, sobre TLS
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

1
• Opera: v33 o superior, sobre TLS
• Opera mobile: v33 o superior, sobre TLS
• Android Browser: v56 o superior, sobre TLS
• Samsung: v4 o superior, sobre TLS
• QQ: v1.2 o superior, sobre TLS
Demo y test: https://http2.akamai.com/demo
Navegadores soportan HTTP/2 (y II)
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

EL 80% DE LOS
NAVEGADORES
SOPORTAN HTTP/2
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

Sumario
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
1. Introducción
2. Buenas prácticas
3. Recomendaciones
4. Verdadero o falso

2
Buenas prácticas
 Evitar
 Mantener
 Mejoras
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

2
Buenas prácticas: evitar
- Domain sharding o paralelizar nombres de hosts
- Uso de sprites o imágenes concatenadas
- Resource inlining (CSS o JS)
- Concatenar JS y CSS
- Keep Alive header, ya no es necesario
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

2
Buenas prácticas: mantener
- Lazy load o carga diferida
- Minificar archivos de texto, incluso ofuscar los JS
- Cualquier técnica de caché
- Compresión Gzip
- Uso de CDN para contenidos estáticos
- Uso de Service Workers
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

2
Buenas prácticas: mejoras
- Imágenes JPEG en formato progresivo
- Implementar SERVER PUSH
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

2
HTTP/2: SERVER PUSH
Fuente: blog.golang.org
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

2
HTTP/2: SERVER PUSH
PHP:
WordPress:
Test: Apache 2.4.18+ y Cloudflare
También disponible: Node.js y Go 1.8
header('Link: </assets/css/app.css>; rel=preload; as=style', false);
add_action( 'send_headers', 'add_header_push' );
function add_header_push() {
header( 'link: </wp-includes/js/jquery/jquery.js>; rel=preload;
as=script‘, false );
}
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

2
HTTP/2: SERVER PUSH (test)
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

2
HTTP/2: SERVER PUSH (avanzado)
Control de sesiones: sólo realizar PUSH si no tiene cookie
Ejemplo para .htaccess
Apache 2.4.18 & superior
#Push the CSS file using HTTP/2
<IfModule http2_module>
#Check cookie
SetEnvIf Cookie "ck_css=1" ck_css
#If no cookie, and it's an html file, then push & cookie:
<FilesMatch ".(htm|html|php)$”>
Header add Link "</css/common.css>;rel=preload;as=style" env=!ck_css
Header add Set-Cookie "ck_css=1; Path=/; Secure; HttpOnly" env=!ck_css
</FilesMatch>
</IfModule>
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

Sumario
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
1. Introducción
2. Buenas prácticas
3. Recomendaciones
4. Verdadero o falso

3
Recomendaciones
- Cuidar el orden de carga de los JS y CSS. Usar defer en los
script que tengan relación con un script anterior prioritario
- Evitar minificar “en caliente”
- Reducir el número de cookies y su tamaño, incluso no usar
- Evitar redirecciones (>100ms cada una)
- Evitar carga bloqueante (ej: Web Fonts), pasar a asíncrona
o diferida
- Minimizar el número de peticiones DNS (50-120 ms)
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

Sumario
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
1. Introducción
2. Buenas prácticas
3. Recomendaciones
4. Verdadero o falso

¿PREPARADO?
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTPS
=
HTTP/2
Pregunta 1
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTPS
=
HTTP/2
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

https://www.amazon.es
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

https://twitter.com
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTP/2
REQUIERE
SSL
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
Pregunta 2

HTTP/2
REQUIERE
SSL
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTP/2
ES PARA TODOS,
ES UNIVERSAL
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
Pregunta 3

HTTP/2
ES PARA TODOS,
ES UNIVERSAL
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

HTTP/2 REQUIERE
IMPLEMENTACIÓN EN EL
SERVIDOR Y SOPORTE POR
EL NAVEGADOR
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

PETICIÓN HTTP/2
ES MÁS RÁPIDA
QUE HTTP 1/1
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
Pregunta 4

PETICIÓN HTTP/2
ES MÁS RÁPIDA
QUE HTTP 1/1
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

WEB OPTIMIZADA
HTTP/2
ES MÁS RÁPIDA QUE
HTTP 1/1
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
Pregunta 5

HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
WEB OPTIMIZADA
HTTP/2
ES MÁS RÁPIDA QUE
HTTP 1/1

HTTP/2 ES UNA TECNOLOGÍA
Y ESTRATEGIA DE
OPTIMIZACIÓN QUE DEBES
IMPLEMENTAR
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline

"Let's be careful out there“
Gracias
Fernando Puente
@fpuenteonline

Espera, ¿conoces ya
QUIC?
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline