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