Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Le performance come esperienza religiosa - CSS day 2017

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.

decarola

March 17, 2017
Tweet

More Decks by decarola

Other Decks in Technology

Transcript

  1. Le perfomance
    come esperienza
    religiosa

    View full-size slide

  2. @decarola
    @madebymodo
    Modo

    View full-size slide

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

    View full-size slide

  4. Performance

    (front end)

    View full-size slide

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

    View full-size slide

  6. Migliora la SEO

    View full-size slide

  7. Migliora la SEO

    View full-size slide

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

    View full-size slide

  9. Migliora la UX

    View full-size slide

  10. "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 full-size slide

  11. "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 full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. @graziarcazzo

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. Performance ieri
    (Steve Souders)

    View full-size slide

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

    View full-size slide

  24. Oggi invece?

    View full-size slide

  25. 2 tipi di
    performance

    View full-size slide

  26. 1 - Reali
    2 - Percepite

    View full-size slide

  27. Google page
    speed

    View full-size slide

  28. Google page
    speed
    @graziarcazzo

    View full-size slide

  29. Web page test

    View full-size slide

  30. Tempo di caricamento
    % Visivamente completa

    View full-size slide

  31. Tempo di caricamento
    % Visivamente completa

    View full-size slide

  32. Tempo di caricamento
    % Visivamente completa

    View full-size slide

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

    View full-size slide

  34. Speedcurve,
    Pingdom, YSlow

    View full-size slide

  35. Ottimizzare, ok.
    Quanto?

    View full-size slide

  36. Front end
    Design
    Back end

    View full-size slide

  37. Front
    end
    Design
    Back
    end

    View full-size slide

  38. Immagini responsive

    View full-size slide

  39. IMMAGINI
    RESPONSIVE!

    View full-size slide

  40. MozJPEG,
    ImageMagick

    View full-size slide

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

    View full-size slide

  42. Mobile first

    View full-size slide

  43. Progressive
    enhancement

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Riassunto
    • Mobile first, progressive enhancement;

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Un’ultima cosa:

    View full-size slide

  54. Cambio cappello o
    cambio dipartimento?

    View full-size slide

  55. Come faccio con

    View full-size slide

  56. Come faccio con
    il grafico?

    View full-size slide

  57. Come faccio con
    il programmatore?

    View full-size slide

  58. Come faccio con
    lo UX master?

    View full-size slide

  59. Come faccio con
    il project manager?

    View full-size slide

  60. Come faccio con
    l’editor?

    View full-size slide

  61. Come faccio con
    il social [blabla]?

    View full-size slide

  62. Performance
    master

    View full-size slide

  63. …Performance
    budget!

    View full-size slide

  64. …Piano editoriale!

    View full-size slide

  65. Coinvolgere tutti

    View full-size slide

  66. Obiettivi condivisi

    View full-size slide

  67. Prepararsi a
    perdere

    View full-size slide

  68. Scendi in campo e
    fai il tuo gioco.

    View full-size slide

  69. Modo
    @decarola
    @madebymodo

    View full-size slide