Quieres avanzar con HTTP/2? Bienvenido/a, esta es tu ponencia

Transcripción

1 Quieres avanzar con HTTP/2? Bienvenido/a, esta es tu ponencia

2 HTTP/2 BUENAS PRÁCTICAS Fernando

3 0 - 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

4 Sumario 1. Introducción 2. Buenas prácticas 3. Recomendaciones 4. Verdadero o falso

5 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 Más info:

6 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

7 MEJORA ESTIMADA 10-15% SOBRE HTTP/1.1

8 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 v Safari para ios: v9.2 o superior, sobre TLS

9 1 Navegadores soportan HTTP/2 (y II) 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:

10 EL 80% DE LOS NAVEGADORES SOPORTAN HTTP/2

11 Sumario 1. Introducción 2. Buenas prácticas 3. Recomendaciones 4. Verdadero o falso

12 2 Buenas prácticas Evitar Mantener Mejoras

13 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

14 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

15

16 2 Buenas prácticas: mejoras - Imágenes JPEG en formato progresivo - Implementar SERVER PUSH

17 2 HTTP/2: SERVER PUSH Fuente: blog.golang.org

18 2 HTTP/2: SERVER PUSH PHP: header('link: </assets/css/app.css>; rel=preload; as=style', false); WordPress: add_action( 'send_headers', 'add_header_push' ); function add_header_push() { header( 'link: </wp-includes/js/jquery/jquery.js>; rel=preload; as=script, false ); } Test: Apache y Cloudflare También disponible: Node.js y Go 1.8

19 2 HTTP/2: SERVER PUSH (test)

20 2 HTTP/2: SERVER PUSH (avanzado) Control de sesiones: sólo realizar PUSH si no tiene cookie Ejemplo para.htaccess #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> Apache & superior

21 Sumario 1. Introducción 2. Buenas prácticas 3. Recomendaciones 4. Verdadero o falso

22 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 ( ms)

23 Sumario 1. Introducción 2. Buenas prácticas 3. Recomendaciones 4. Verdadero o falso

24 PREPARADO?

25 HTTPS = HTTP/2 Pregunta 1

26 HTTPS = HTTP/2

27

28

29 HTTP/2 REQUIERE SSL Pregunta 2

30 HTTP/2 REQUIERE SSL

31

32

33 HTTP/2 ES PARA TODOS, ES UNIVERSAL Pregunta 3

34 HTTP/2 ES PARA TODOS, ES UNIVERSAL

35 HTTP/2 REQUIERE IMPLEMENTACIÓN EN EL SERVIDOR Y SOPORTE POR EL NAVEGADOR

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

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

38 WEB OPTIMIZADA HTTP/2 ES MÁS RÁPIDA QUE HTTP 1/1 Pregunta 5

39 WEB OPTIMIZADA HTTP/2 ES MÁS RÁPIDA QUE HTTP 1/1

40 HTTP/2 ES UNA TECNOLOGÍA Y ESTRATEGIA DE OPTIMIZACIÓN QUE DEBES IMPLEMENTAR

41 "Let's be careful out there Gracias Fernando

42 Espera, conoces ya QUIC?