Developing for Permfances: quali sono le cose che veramente contano nella realizzazione di un sito internet. Come poter velocizzare il caricamento di un sito internet.

1. Developing for
PERFOMANCES

2. – Tim Kadlec , Holistic Performance
“Performance is not just a developmental
concern, it’s a fundamental component of the
user experience”.

3. 126kb
1.249kb
60kb
303kb
56kb
html js css image other
Peso medio di una pagina
http://httparchive.org/interesting.php?a=All&l=Apr%201%202015

4. 1.794mb
per pagina

5. 1.75 miliardi
utenti smartphone
http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014/1010536

6. %ditraffico
Asse delle categorie
2010-032010-062010-092010-122011-032011-062011-092011-122012-032012-062012-092012-122013-032013-062013-092013-122014-032014-062014-092014-122015-03
Desktop Mobile
http://gs.statcounter.com/#desktop+mobile-comparison-ww-monthly-201003-201503
Trend di traffico

7. Critical Path

8. Client
DNS Host

9. Client
DNS Host

10. Elementi bloccanti

11. 1. Richiediamo un pagina;
2. Una volta ricevuto l’HTML, il browser fa il
parsing del documento proceduralmente,
ponendo attenzione ai file esterni, e
convertendo l’HTML nella classica struttura ad
albero (DOM);
3. Quando il DOM è completo, JavaScript può
manipolare gli elementi, e gli stili CSS
vengono applicati all’intera pagina.

12. CSS e JS bloccano la
pagina dalla visualizzazione

13. Ogni volta che il browser trova un CSS mette
in pausa la renderizzazione del DOM per far
caricare gli stili.
Tuttavia, questo è un comportamento
positivo (previene il FOUC1).
1 Flash Of Unstyled Content

14. Ogni volta che viene trovato un JS, il
browser non mostra all’utente la pagina fino
a che tutti i metodi dello script non vengono
eseguiti.
document.write

15. Elementi non bloccanti

16. Tutti gli elementi che non
mettono il browser in standby e
che vengono caricati in parallelo

17. Azioni da fare

18. Compressione
Aggregazione
Minificazione
Ottimizzazione

19. Immagini

20. Ottimizza le immagini.
Photoshop: Salva per il Web;
Imagemin (Mac OS, Win, Linux);
ImageOptim (Mac OS);
JPEGmini (Mac OS, Win);
ImageAlpha (Mac OS).

21. TinyJPG;
TinyPNG;
ZeroSprites;
dimens.io;
kraken.io.
Ottimizza le immagini.

22. css-sprite (CLI, Grunt, Gulp);
glue (CLI, Grunt);
imagemin (CLI, Grunt, Gulp);
jpegoptim (CLI);
sprite-generator (Grunt, Gulp);
spritesmith (CLI, Grunt, Gulp);
Ottimizza le immagini.

23. kraken (php);
lazyload (JS);
lazysizes (JS);
Picturefill (Polyfill).
Ottimizza il caricamento delle immagini.

24. Ottimizza il caricamento delle immagini.
<picture>
Ricorda che <picture> non è ancora standard e che devi utilizzare un Polyfill per poterlo usare.
Valuta bene progetto per progetto!

25. tmi (CLI)
Analizza le immagini.

26. SVG

27. Ottimizza gli SVG.
SVGO (Mac OS, Win, CLI, Grunt, Gulp, Illustrator, Online);
SVG Editor.

28. Utilizza gli Sprite SVG.
Fontastic;
Grunticon (Grunt, Gulp);
svg-sprite (Grunt, Gulp).

29. CSS

30. Ottimizza il CSS.
- #id + .class
catene minime
colori sensati
pre-processori aiutano!

31. Analizza il CSS.
analyze-css (CLI, Grunt);
check-unused-css (Gulp);
grunt-css-metrics (Grunt);
CSSStats (CLI, Grunt, Gulp,
Online);
CSSCSS (Gem, Grunt, Gulp);
CSS Dig (Chrome Ext);
Parker (CLI, Gulp);
penthouse (CLI, Grunt, Online);
speedreport (CLI);
StyleStats (CLI, Grunt, Gulp,
Online);
Yellow Lab Tools (CLI, Online).

32. Aggrega i CSS.
unisci più CSS assieme

33. Poni attenzione ad above-the-fold.
critical (CLI, Grunt);
CriticalCSS (CLI, Grunt);
penthouse (CLI, Grunt, Online).

34. Comprimi il CSS.
Pre-processori;
CSSShrink (CLI, Grunt, Gulp, Online);
Servi i CSS compressi (.gzip).
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/javascript
</IfModule>

35. utilizza la cache per i CSS
considera anche la cache
offline offerta da HTML51
1 AppCache, localStorage, ecc

36. JavaScript

37. Ottimizza i JS.
scrivi il codice in modo
responsabile!

38. Analizza i JS.
fai il debug del codice
http://perf-tooling.today/tools?q=javascript

39. Aggrega i JS.
unisci più JS assieme

40. inserisci gli script prima della
chiusura di <body> e solo se
necessario in <head>
Inserisci JS nel punto giusto.

41. Comprimi i JS.
http://perf-tooling.today/tools?q=javascript
Servi i JS compressi (.gzip).
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/javascript
</IfModule>

42. utilizza la cache per i JS
considera anche la cache
offline offerta da HTML51
1 AppCache, localStorage, ecc

43. Fonts

44. Ottimizza i fonts.
usa i formati più leggeri e
necessari (.woff, .eot)

45. Ottimizza il caricamenti dei fonts.
meglio il FOUT1
rimuovi il FOIT2
1 Flash Of Unstyled Text
2 Flash Of Invisible Text

46. Comprimi i Fonts.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/x-font-otf application/font-woff
</IfModule>

47. HTML

48. Ottimizza HTML.
scrivi il codice in modo
responsabile e con meno
nodi possibile!

49. Comprimi HTML.
dove possibile, togli spazi e
interruzioni per ridurre il peso
del file

50. Comprimi HTML.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/javascript
</IfModule>

51. Analizza

52. monitora costantemente
il tuo sito

53. PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=it

54. WebPagetest
http://www.webpagetest.org/

55. Grunt-PerfBudget
https://www.npmjs.com/package/grunt-perfbudget

56. Demo

57. • Hosting condiviso;
• Uso di <picture>;
• HTML non compresso;
• Caricamento non ottimizzato dei CSS (no compressione, no
aggregazione);
• Caricamento non ottimizzato dei JS (no compressione, no
aggregazione);
• Immagini originali ottimizzate (con ritaglio non ottimizzato);
• Chaching base del server e del CMS disabilitato;

58. Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.709s 1.174s 1.792s 2002 160
Repeat View 1.555s 0.630s 1.291s 1302 160
Summary

59. Time Requests Bytes In
First View 2.709s 26 561 KB
Repeat View 1.555s 2 9 KB
Document complete

60. Time Requests Bytes In
First View 2.928s 27 563 KB
Repeat View 1.555s 2 9 KB
Fully loaded

61. Progress
Visualprogress(%)
0
25
50
75
100
Time (seconds)
0.0 1.7 1.8 1.9 2.0 2.7 2.8

62. Timings
Assedeivalori
0
750
1500
2250
3000
Visually
C
om
plete
Load
Tim
e
(onload)
Load
Tim
e
(Fully
Loaded)
D
O
M
C
ontentLoadedTim
e
to
FirstByte
1.174
1.796
2.928
2.7092.800

63. Requests
Assedeivalori
0
7,5
15
22,5
30
Total
H
TM
L
js
C
SS
im
age
font
6
44
12
1
27

64. Bytes
Assedeivalori
0
150000
300000
450000
600000
Total
H
TM
L
js
C
SS
im
age
font
394.901
92.4477.24772.7648.774
576.133

65. Requests
First view
6
4
4
12
1
html js css
image font
Repeat view
1 1
html image

66. Bytes
First view
394901
92447
7247
72764
8774
html js css
image font
Repeat view
440
8773
html image

67. Connection view (First view)

68. Connection view (Repeat view)

69. • Hosting condiviso;
• Uso di <picture>;
• HTML compresso;
• Caricamento ottimizzato dei CSS (compressione,
aggregazione, asincrono);
• Caricamento ottimizzato dei JS (compressione,
aggregazione);
• Immagini originali ottimizzate (con ritaglio non ottimizzato);
• Chaching base del server e del CMS abilitato;

70. Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.036s 0.544s 1.186s 1847 150
Repeat View 0.767s 0.167s 0.695s 702 150
Summary

71. Time Requests Bytes In
First View 2.036s 17 556 KB
Repeat View 0.767s 2 9 KB
Document complete

72. Time Requests Bytes In
First View 2.165s 18 557 KB
Repeat View 0.767s 2 9 KB
Fully loaded

73. Progress
Visualprogress(%)
0
25
50
75
100
Time (seconds)
0.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3

74. Timings
Assedeivalori
0
600
1200
1800
2400
Visually
C
om
plete
Load
Tim
e
(onload)
Load
Tim
e
(Fully
Loaded)
D
O
M
C
ontentLoadedTim
e
to
FirstByte
544
935
2.165
2.036
2.300

75. Requests
Assedeivalori
0
4,5
9
13,5
18
Total
H
TM
L
js
C
SS
im
age
font
6
4
2
5
1
18

76. Bytes
Assedeivalori
0
150000
300000
450000
600000
Total
H
TM
L
js
C
SS
im
age
font
394.738
92.3685.14668.9578.819
570.027

77. Requests
First view
6
4
2
5
1
html js css
image font
Repeat view
1 1
html image

78. Bytes
First view
394738
92368
5146
68957
8819
html js css
image font
Repeat view
440
8819
html image

79. Connection view (First view)

80. Connection view (Repeat view)

81. Compariamo le statistiche

82. Non ottimizzato
Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.709s 1.174s 1.792s 2002 160
Summary
Ottimizzato
Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.036s 0.544s 1.186s 1847 150

83. Progress
Visualprogress(%)
0
25
50
75
100
Time (seconds)
0.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.5 2.6 2.8

84. Timings
Assedeivalori
0
750
1500
2250
3000
Visually
C
om
plete
Load
Tim
e
(onload)
Load
Tim
e
(Fully
Loaded)
D
O
M
C
ontentLoadedTim
e
to
FirstByte
544
935
2.1652.036
2.300
1.174
1.796
2.928
2.7092.800

85. Requests
Assedeivalori
0
7,5
15
22,5
30
Total
H
TM
L
js
C
SS
im
age
font
6
4251
18
6
44
12
1
27

86. Bytes
0
150000
300000
450000
600000
Total
H
TM
L
js
C
SS
im
age
font

87. Connection view (First view)

88. Connection view (Repeat view)

89. 2015 Giovanni Buffa - CC by-nd 3.0
Fonte: Responsible Responsive Design
• http://abookapart.com/products/responsible-responsive-
design