Le performance come esperienza religiosa - CSS day 2017

Eaf6bcd3b320c1167f2522470d0e3e26?s=47 decarola
March 17, 2017

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.

Eaf6bcd3b320c1167f2522470d0e3e26?s=128

decarola

March 17, 2017
Tweet

Transcript

  1. Le perfomance come esperienza religiosa

  2. @decarola @madebymodo Modo

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  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”.

  29. None
  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)

  35. None
  36. • Poche chiamate HTTP; • CSS in alto; • JS

    in basso; • Minify; • Gzip; • Cache;
  37. Oggi invece?

  38. None
  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

  46. None
  47. Web page test

  48. None
  49. None
  50. None
  51. Speed Index

  52. None
  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/>

  61. None
  62. Front end Design Back end

  63. Front end Design Back end

  64. Design

  65. <IMG>

  66. None
  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

  87. None
  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:

  97. None
  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]?

  106. None
  107. Performance master

  108. Grafico…

  109. …Performance budget!

  110. None
  111. Editor…

  112. …Piano editoriale!

  113. Finisco

  114. Coinvolgere tutti

  115. Obiettivi condivisi

  116. Prepararsi a perdere

  117. None
  118. Chiodarelli

  119. Scendi in campo e fai il tuo gioco.

  120. Grazie

  121. Modo @decarola @madebymodo