Le performance come esperienza religiosa - CSS day 2017

Paragone improbabile tra tennis e performance front-end. Portato al CSS day 2017 di Faenza, e al Front end meetup di Prato.

Transcript

1. Le perfomance come esperienza religiosa
2. @decarola @madebymodo Modo
9. sticazzi?
10. • Da Wimbledon allo Staveco • Sfida (confronto) costante • Aspetto non tecnico
11. Performance
12. Performance
 (front end)
13. – Steve Souders (the Performance Golden Rule) “80-90% of the end-user response time is spent on the frontend. Start there.”
14. Migliora la SEO
15. Migliora la SEO
16. – Gary Illyes - What Crawl Budget Means for Googlebot “Making a site faster improves the users' experience while also increasing crawl rate.”
17. Migliora la UX
18. "Users expect pages to load in two seconds, and after three seconds, up to 40% of users will abandon your site" — Lara Hogan (Designing for Performance: Weighing Aesthetics and Speed) — Gomez (Why Web Performance Matters: Is Your Site Driving Customers Away?)
19. "Users expect pages to load in two seconds, and after three seconds, up to 40% of users will abandon your site" — Lara Hogan (Designing for Performance: Weighing Aesthetics and Speed) — Gomez (Why Web Performance Matters: Is Your Site Driving Customers Away?)
20. Migliora la
21. 28%
22. 28% Abbandona permanentemente un sito perché lento.
23. 28% Abbandona permanentemente un sito perché lento. Akamai
24. Shopzilla Site Redesign – We get what we measure Shopzilla riducendo i tempi di caricamento del sito da 7 a 2 secondi ha ottenuto un incremento del 25% di page views e un incremento del 7-12% delle revenue
25. Shopzilla Site Redesign – We get what we measure Shopzilla riducendo i tempi di caricamento del sito da 7 a 2 secondi ha ottenuto un incremento del 25% di page views e un incremento del 7-12% delle revenue
26. Shopzilla Site Redesign – We get what we measure Shopzilla riducendo i tempi di caricamento del sito da 7 a 2 secondi ha ottenuto un incremento del 25% di page views e un incremento del 7-12% delle revenue
27. @graziarcazzo
28. @graziarcazzo “Un sito veloce è meglio di un sito lento”.
30. Riassunto
31. Riassunto • Come il tennis • Per ogni tipologia; • Per ogni aspetto; • Tecnico o no;
32. Riassunto • Come il tennis • Per ogni tipologia; • Per ogni aspetto; • Tecnico o no; • Gli utenti ci fanno caso (UX); • Google ci fa caso (SEO); • ci fanno caso;
33. Riassunto • Come il tennis • Per ogni tipologia; • Per ogni aspetto; • Tecnico o no; • Gli utenti ci fanno caso (UX); • Google ci fa caso (SEO); • ci fanno caso; • Dr. Chiodarelli is the new Rafa Nadal
34. Performance ieri (Steve Souders)
36. • Poche chiamate HTTP; • CSS in alto; • JS in basso; • Minify; • Gzip; • Cache;
37. Oggi invece?
39. 2 tipi di performance
40. 1 - Reali 2 - Percepite
41. Misurare
42. Google page speed
43. Google page speed @graziarcazzo
44. Lighthouse
45. Chrome
47. Web page test
51. Speed Index
53. Tempo di caricamento % Visivamente completa
54. Tempo di caricamento % Visivamente completa
55. Tempo di caricamento % Visivamente completa
56. • Speed index sotto 1000 • Primo paint sotto 1 sec
57. Speedcurve, Pingdom, YSlow
58. Ottimizzare, ok. Quanto?
59. 20%
60. <front-end/>
62. Front end Design Back end
63. Front end Design Back end
64. Design
65. <IMG>
67. 66%
68. !!!
69. Immagini responsive
70. IMMAGINI RESPONSIVE!
71. Lazy load
72. GIF
73. giflossy
74. MozJPEG, ImageMagick
75. kraken.io imgix.com imagefly.io resrc.it
76. <front end/>
77. RWD
78. Mobile first
79. Progressive enhancement
80. CSS HTML JS
81. CSS HTML JS
82. CSS HTML JS Pattern, Responsive Images, DNS-prefetch
83. CSS HTML JS Critical, Specificity, CSS containment Pattern, Responsive Images, DNS-prefetch
84. CSS HTML JS Async, webpack, ECMAScript2015 Critical, Specificity, CSS containment Pattern, Responsive Images, DNS-prefetch
85. Back end
86. HTTP2
88. Multiplex
89. CSS sprite Immagini inline CSS e JS concatenati Domain sharding
90. Asset ”singoli” Risorse organizzate “a sezione” Attenzione ai domini multipli
91. HTTPS
92. Riassunto • Mobile first, progressive enhancement;
93. Riassunto • Mobile first, progressive enhancement; • Immagini ottimizzate;
94. Riassunto • Mobile first, progressive enhancement; • Immagini ottimizzate; • Codice P-U-L-I-T-O (occhio a framework etc);
95. Riassunto • Mobile first, progressive enhancement; • Immagini ottimizzate; • Codice P-U-L-I-T-O (occhio a framework etc); • HTTP2.
96. Un’ultima cosa:
98. Cambio cappello o cambio dipartimento?
99. Come faccio con
100. Come faccio con il grafico?
101. Come faccio con il programmatore?
102. Come faccio con lo UX master?
103. Come faccio con il project manager?
104. Come faccio con l’editor?
105. Come faccio con il social [blabla]?
107. Performance master
108. Grafico…
109. …Performance budget!
111. Editor…
112. …Piano editoriale!
113. Finisco
114. Coinvolgere tutti
115. Obiettivi condivisi
116. Prepararsi a perdere
118. Chiodarelli
119. Scendi in campo e fai il tuo gioco.
120. Grazie
121. Modo @decarola @madebymodo