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
   

   View Slide

2. @decarola
   @madebymodo
   Modo
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. sticazzi?
   

   View Slide

10. • Da Wimbledon allo Staveco
    • Sfida (confronto) costante
    • Aspetto non tecnico
    

    View Slide

11. Performance
    

    View Slide

12. Performance

    (front end)
    

    View Slide

13. – Steve Souders (the Performance Golden Rule)
    “80-90% of the end-user response time is spent
    on the frontend.
    Start there.”
    

    View Slide

14. Migliora la SEO
    

    View Slide

15. Migliora la SEO
    

    View Slide

16. – Gary Illyes - What Crawl Budget Means for Googlebot
    “Making a site faster improves the users'
    experience while also increasing crawl rate.”
    

    View Slide

17. Migliora la UX
    

    View Slide

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?)
    

    View Slide

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?)
    

    View Slide

20. Migliora la
    

    View Slide

21. 28%
    

    View Slide

22. 28%
    Abbandona permanentemente un sito perché lento.
    

    View Slide

23. 28%
    Abbandona permanentemente un sito perché lento.
    Akamai
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. @graziarcazzo
    

    View Slide

28. @graziarcazzo
    “Un sito veloce è meglio di un sito lento”.
    

    View Slide

29. View Slide

30. Riassunto
    

    View Slide

31. Riassunto
    • Come il tennis
    • Per ogni tipologia;
    • Per ogni aspetto;
    • Tecnico o no;
    

    View Slide

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;
    

    View Slide

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
    

    View Slide

34. Performance ieri
    (Steve Souders)
    

    View Slide

35. View Slide

36. • Poche chiamate HTTP;
    • CSS in alto;
    • JS in basso;
    • Minify;
    • Gzip;
    • Cache;
    

    View Slide

37. Oggi invece?
    

    View Slide

38. View Slide

39. 2 tipi di
    performance
    

    View Slide

40. 1 - Reali
    2 - Percepite
    

    View Slide

41. Misurare
    

    View Slide

42. Google page
    speed
    

    View Slide

43. Google page
    speed
    @graziarcazzo
    

    View Slide

44. Lighthouse
    

    View Slide

45. Chrome
    

    View Slide

46. View Slide

47. Web page test
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. Speed Index
    

    View Slide

52. View Slide

53. Tempo di caricamento
    % Visivamente completa
    

    View Slide

54. Tempo di caricamento
    % Visivamente completa
    

    View Slide

55. Tempo di caricamento
    % Visivamente completa
    

    View Slide

56. • Speed index sotto 1000
    • Primo paint sotto 1 sec
    

    View Slide

57. Speedcurve,
    Pingdom, YSlow
    

    View Slide

58. Ottimizzare, ok.
    Quanto?
    

    View Slide

59. 20%
    

    View Slide

60. 
    

    View Slide

61. View Slide

62. Front end
    Design
    Back end
    

    View Slide

63. Front
    end
    Design
    Back
    end
    

    View Slide

64. Design
    

    View Slide

65. 
    

    View Slide

66. View Slide

67. 66%
    

    View Slide

68. !!!
    

    View Slide

69. Immagini responsive
    

    View Slide

70. IMMAGINI
    RESPONSIVE!
    

    View Slide

71. Lazy load
    

    View Slide

72. GIF
    

    View Slide

73. giflossy
    

    View Slide

74. MozJPEG,
    ImageMagick
    
    

    View Slide

75. kraken.io
    imgix.com
    imagefly.io
    resrc.it
    
    

    View Slide

76. 
    

    View Slide

77. RWD
    

    View Slide

78. Mobile first
    

    View Slide

79. Progressive
    enhancement
    

    View Slide

80. CSS
    HTML JS
    

    View Slide

81. CSS
    HTML
    JS
    

    View Slide

82. CSS
    HTML
    JS
    Pattern, Responsive Images,
    DNS-prefetch
    

    View Slide

83. CSS
    HTML
    JS
    Critical, Specificity,
    CSS containment
    Pattern, Responsive Images,
    DNS-prefetch
    

    View Slide

84. CSS
    HTML
    JS Async, webpack,
    ECMAScript2015
    Critical, Specificity,
    CSS containment
    Pattern, Responsive Images,
    DNS-prefetch
    

    View Slide

85. Back end
    

    View Slide

86. HTTP2
    

    View Slide

87. View Slide

88. Multiplex
    

    View Slide

89. CSS sprite
    Immagini inline
    CSS e JS concatenati
    Domain sharding
    

    View Slide

90. Asset ”singoli”
    Risorse organizzate “a sezione”
    Attenzione ai domini multipli
    

    View Slide

91. HTTPS
    

    View Slide

92. Riassunto
    • Mobile first, progressive enhancement;
    

    View Slide

93. Riassunto
    • Mobile first, progressive enhancement;
    • Immagini ottimizzate;
    

    View Slide

94. Riassunto
    • Mobile first, progressive enhancement;
    • Immagini ottimizzate;
    • Codice P-U-L-I-T-O (occhio a framework etc);
    

    View Slide

95. Riassunto
    • Mobile first, progressive enhancement;
    • Immagini ottimizzate;
    • Codice P-U-L-I-T-O (occhio a framework etc);
    • HTTP2.
    

    View Slide

96. Un’ultima cosa:
    

    View Slide

97. View Slide

98. Cambio cappello o
    cambio dipartimento?
    

    View Slide

99. Come faccio con
    

    View Slide

100. Come faccio con
     il grafico?
     

     View Slide

101. Come faccio con
     il programmatore?
     

     View Slide

102. Come faccio con
     lo UX master?
     

     View Slide

103. Come faccio con
     il project manager?
     

     View Slide

104. Come faccio con
     l’editor?
     

     View Slide

105. Come faccio con
     il social [blabla]?
     

     View Slide

106. View Slide

107. Performance
     master
     

     View Slide

108. Grafico…
     

     View Slide

109. …Performance
     budget!
     

     View Slide

110. View Slide

111. Editor…
     

     View Slide

112. …Piano editoriale!
     

     View Slide

113. Finisco
     

     View Slide

114. Coinvolgere tutti
     

     View Slide

115. Obiettivi condivisi
     

     View Slide

116. Prepararsi a
     perdere
     

     View Slide

117. View Slide

118. Chiodarelli
     

     View Slide

119. Scendi in campo e
     fai il tuo gioco.
     

     View Slide

120. Grazie
     

     View Slide

121. Modo
     @decarola
     @madebymodo
     

     View Slide