¿Quieres avanzar con HTTP/2? Bienvenido/a, esta es tu ponencia · CTO de La Estrategia de Chapman...

¿Quieres avanzar con HTTP/2?

Bienvenido/a,

esta es tu ponencia

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 para medios propios. 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


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. Más info: https://tools.ietf.org/html/rfc7540


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


MEJORA ESTIMADA

10-15% SOBRE HTTP/1.1


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


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)

EL 80% DE LOS NAVEGADORES

SOPORTAN HTTP/2




3. Recomendaciones



2

Buenas prácticas Evitar

Mantener

Mejoras


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


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


2

Buenas prácticas: mejoras - Imágenes JPEG en formato progresivo

- Implementar SERVER PUSH


2

HTTP/2: SERVER PUSH


Fuente: blog.golang.org

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 ); }

2

HTTP/2: SERVER PUSH (test)


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>



3. Recomendaciones



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)



3. Recomendaciones



¿PREPARADO?


HTTPS =

HTTP/2

Pregunta 1


HTTPS =

HTTP/2


https://www.amazon.es


https://twitter.com


HTTP/2 REQUIERE

SSL

Pregunta 2


HTTP/2 REQUIERE

SSL


HTTP/2 ES PARA TODOS, ES UNIVERSAL

Pregunta 3


HTTP/2 ES PARA TODOS, ES UNIVERSAL


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

Pregunta 4


PETICIÓN HTTP/2 ES MÁS RÁPIDA QUE HTTP 1/1


WEB OPTIMIZADA HTTP/2

ES MÁS RÁPIDA QUE HTTP 1/1

Pregunta 5


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


"Let's be careful out there“

Fernando Puente @fpuenteonline

Gracias

Espera, ¿conoces ya QUIC?


¿Quieres avanzar con HTTP/2? Bienvenido/a, esta es tu ponencia · CTO de La Estrategia de Chapman...

Documents

Transcript of ¿Quieres avanzar con HTTP/2? Bienvenido/a, esta es tu ponencia · CTO de La Estrategia de Chapman...