Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web performance & Http2

207 views

Published on

Talk per Milano Frontend del 25 ottobre 2016 su HTTP2

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web performance & Http2

  1. 1. Web performance & Http2 https://giko.it @giacomozinetti 1 25 Ottobre 2016
  2. 2. Prima di cominciare quiz.giko.it 2
  3. 3. A long time ago in an Internet far, far away.... 3
  4. 4. … il web era per i documenti HTTP per comunicare http://info.cern.ch/hypertext/WWW/TheProject.html e HTML per descrivere i contenuti <HEADER> <TITLE>Sei tu un Dio?</TITLE> <NEXTID N="55"> </HEADER> 4
  5. 5. Abbiamo voluto colorare i nostri testi .blue-steel { background-color: #bada55; color: blue; } 5
  6. 6. E creare interazione var msg = "Shall we play a game?"; function scrollMsg() { window.status = msg; msg = msg.substring(1,msg.length) + msg.substring(0,1); setTimeout("scrollMsg()",150); } 6
  7. 7. Poi è successo qualcosa Verso l’infinito e oltre! 7
  8. 8. Abbiamo provato a rimediare Web: Troppe richieste HTTP! Devs: Il ricorso alla violenza anche non necessaria per ridurre i file è ammesso e approvato. ● Concatenazione di js e css ● Creazione sprite di immagini Conseguenza: introduzione di tool di build 8
  9. 9. Abbiamo provato a rimediare Web: I file sono troppo pesanti! Devs: Potrebbe esser peggio. Potrebbe piovere! ● Gzip ● PNG e WebP, immagini responsive ● Minifier Conseguenza: introduzione di altri tool di build e aumento del carico sul processore 9
  10. 10. Abbiamo provato a rimediare Web: Troppe connessioni TCP! Te ne concedo solo [X] simultanee per dominio. Inoltre per ogni asset sul tuo dominio devo inviare [N]Kb di cookie inutili. Devs: Sai, questo... questo è un caso molto, molto complicato. Un sacco di input e di output. ● Domain sharding su CDN cookieless Prezzo da pagare: cambiamento nelle strategie di deploy 10
  11. 11. Abbiamo provato a rimediare Web: Per ogni dominio che usi devo risolvere i DNS... Devs: Questo è solo un altro dei tuoi tracobbetti. ● DNS prefetching Prezzo da pagare: aggiustamenti nel markup 11
  12. 12. Abbiamo provato a rimediare Web: I tuoi asset bloccano il rendering dei browser. Devs: Un JS non è mai in ritardo. Né in anticipo. Arriva precisamente quando intende farlo. ● AJAX ● Inlining di CSS e JS Prezzo da pagare: nuove logiche applicative da sviluppare 12
  13. 13. HTTP 2Gli farò un'offerta che non potrà rifiutare. 13
  14. 14. Where we're going, we don't need roads… ● Single Connection ● Multiplexing ● Server Push ● Prioritization ● Binary ● Header Compression 14
  15. 15. Supporto ● Chrome (solo se il server supporta ALPN) ● Firefox ● Edge ● Opera ● Safari ● IE 11 + E in caso HTTP2 non sia supportato in automatico il sito verrà servito in HTTP1. Devs: Toga! Toga! Tutti i browser supportano HTTP2 solo con TLS (HTTPS) http://caniuse.com/#feat=http2 15
  16. 16. Come avere HTTP2 ● H2O ● Caddy ● NGINX 1.9.5 (tranne server push) ● Apache con mod_http2 (sperimentale) ● E molti altri https://github.com/http2/http2-spec/wiki/Implementations Dovete scegliere tra questi... Ma scegliete con prudenza: poiché se il giusto Server vi donerà la vita, quello sbagliato ve la strapperà via. 16
  17. 17. Okay guys, it's show time! 17
  18. 18. ● https://http1.giko.it ● https://http2.giko.it ● https://http2push.giko.it:8080 https://www.webpagetest.org/video/compare.php?tests=161013_9Y_P54,161013_T4_P55,161013_81_P56 ● https://http1.giko.it/slow.html ● https://http2.giko.it/slow.html ● https://http2push.giko.it:8080/slow.html https://www.webpagetest.org/video/compare.php?tests=161014_J3_CBK,161014_Z9_CBM,161014_Q0_CEH I detective non hanno il permesso di credere alle coincidenze 18
  19. 19. Perceived performance The cake is almost a lie 19
  20. 20. The Show Must Go On HTTPS con Let’s encrypt https://letsencrypt.org/ 20
  21. 21. So long and thanks for all the fish meat 21

×