¿quieres avanzar con http/2? bienvenido/a, esta es tu ponencia · cto de la estrategia de chapman...
Post on 05-May-2020
7 Views
Preview:
TRANSCRIPT
¿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
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. Más info: https://tools.ietf.org/html/rfc7540
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
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
Navegadores soportan HTTP/2 (y II)
EL 80% DE LOS NAVEGADORES
SOPORTAN HTTP/2
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
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
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
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
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
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)
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
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
#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>
Sumario 1. Introducción
2. Buenas prácticas
3. Recomendaciones
4. Verdadero o falso
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
3
Recomendaciones
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
- 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)
Sumario 1. Introducción
2. Buenas prácticas
3. Recomendaciones
4. Verdadero o falso
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
¿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
Pregunta 2
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
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
Pregunta 3
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
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
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
WEB OPTIMIZADA HTTP/2
ES MÁS RÁPIDA QUE HTTP 1/1
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: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
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“
Fernando Puente @fpuenteonline
Gracias
Espera, ¿conoces ya QUIC?
HTTP/2: buenas prácticas – WordCamp Madrid 2017 - @fpuenteonline
top related