1. Web performance workshop
26. september 2013
Monitorering
Hvordan kommer jeg godt fra start med web
performance
Tobias Borg Petersen,
Performancekonsulent fra Digicure A/S
www.digicure.dk

2. Hvem er jeg
Tobias Borg Petersen
2
@_tobibp
tbp@digicure.dk
Webperformance.nu/blog
Performancekonsulent i Digicure
Front End udvikler (.NET)
dk.linkedin.com/in/tobiasbp

3. www.digicure.dk
3
• Stiftet i 2003
• 20 medarbejdere
• Beskæftiger os med analyse og rådgivning
• It-sikkerhed
• Web performance
• It-sikkerhedsuddannelser
• CISSP
• CEH – Ethical hacker
• CVSE – Vmware Hacking / Advanced Security

4. Disposition
Tobias Borg Petersen
4
• Hvordan indlæser browseren et website
• Front End vs. Back End optimering
• Hvilke parametre skal man fokusere på, for at reducere svartider?
• Hvilke værktøjer findes der inden for web performance optimering
• Top 10 web performance optimerings tiltag
• Content Delivery Network (CDN) – Tips til websites som ofte bliver
tilgået fra udlandet
• Hvad byder fremtiden på? Hvad er de næste udfordringer?
• ’Performance budgettet’
WORKSHOP
Webperformance X-ray: Få scannet dit website og få et par tips med hjem
i tasken

5. 5
Fokus på web performance

6. 6
Fokus på web performance

7. 7
Fokus på web performance
Alt bliver hurtigere
Og brugerne bliver mere og mere utålmodige

8. 8
Websites bliver langsommere
og langsommere…

9. 9
Danske webshops Danske kommuner
Web performance
Hvordan står det til i dag?

10. 10Kilde: http://httparchive.org
International
1.551 KB
Danske
kommuner
991 KB
FDIH
medlemmer
1.229 KB
400000
800000
1200000
1600000
2000000
Web performance
Hvordan står det til i dag?

11. 11
Flash
1%
CSS
5%
HTML
3%
JavaScript
20%
Andet
4%Billeder
67%
Flash
2%
CSS
4%
HTML
5%
JavaScript
22%
Andet
3%
Billeder
64%
Web performance
Hvordan står det til i dag?
Danske webshops Danske kommuner

12. 12

13. 13
20 %
.. mindre trafik blot ved at øge svartiden med
500 ms.
Web performance – Hvorfor?
Lavere bruger engagement
Kilde: http://blog.kissmetrics.com/speed-is-a-killer/

14. 14
Kilde: http://blog.kissmetrics.com/loading-time/
• 47 % af de adspurgte
brugere forventer at et
website er vist indenfor 2
sekunder
• 40 % af de adspurgte
brugere vil forlade et
website der er mere end
3 sekunder om at blive vist
• 52 % af de adspurgte
brugere mener at hurtige
sidevisninger er vigtigt for
websites loyalitet
Web performance – Hvorfor?
Lavere bruger engagement

15. 15
GlassesDirect.co.uk
Kilde: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-
loss-in-customer-conversions/
Web performance – Hvorfor?
Økonomiske gevinster

16. 16
• Svartider –50-70 %
• Båndbredde forbrug –43 %
• DB CPU –75 %
• Samtidige brugere +300 %
Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Web performance – Hvorfor?
Tekniske gevinster

17. 17Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Nedetider kan koste dyrt
Web performance – Hvorfor?
Nedetider

18. 18
1.5 seconds == SLOW
Kilde: http://www.qubitproducts.com/wp-content/uploads/2012/04/Site-Speed-
Whitepaper1.pdf
Web performance – Hvorfor?
Search Engine Optimization (SEO)

19. 19
Båndbredde og svartider

20. 20
Men vil den stigende hastighed på
båndbreddelinjerne ikke løse vores problemer?
NEJ!
Båndbredde og svartider

21. 21
Båndbredde og svartider

22. 22
Båndbredde og svartider
• Båndredde og latency
• Båndbredde == “Tykkelsen”
• Latency == Transporttiden

23. 23
Båndbredde og svartider
Kilde: http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
• Lysets hastighed er en begrænsning
• Læg kortere kabler
• 450 millioner kroner per sparet ms.
• Løsning: Flyt indholdet tættere på og
reducér antallet af forespørgsler

24. 24
De besøgendes forventninger

25. 25
John Kemeny &
Thomas Kurtz
”We found, that any response time that
averages more than 10 seconds, destroys the
illusion of having one’s own computer”
1960’erne
Kilde: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-
slow-loading-sites.html?pagewanted=all&_r=0
De besøgendes forventninger

26. 26
Forrester
Research
2006 = 4 sekunder
2006 og 2009 2009 = 2 sekunder
Kilde: http://www.getelastic.com/performance/
De besøgendes forventninger
Kilde: http://www.akamai.com/html/about/press/releases/2009/press_091409.html

27. 27Kilde: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-
slow-loading-sites.html?pagewanted=all&_r=0
Forsinkelse Brugerens reaktion
0 – 100 ms. Instant/øjebklikkelig
100 – 300 ms. En mindre forsinkelse
300 – 1000 ms. Fortsat fokus på opgave
1 sek. + Mental fokus forsvinder
10 sek. + ”Jeg kommer tilbage
senere..” – hvis det sker
De besøgendes forventninger

28. 28
Højere krav
til performance
2006 = <4 sekunder
2009 = <2 sekunder
2013 = <1 sekund
1960 = <10 sekunder
De besøgendes forventninger

29. 29
Hvis dit website er længere end
1 sekund om at blive vist,
taber du allerede besøgende nu
De besøgendes forventninger

30. 30
Performance er en fundamental del af
brugeroplevelsen på websitet!
Brugeroplevelsen
De besøgendes forventninger
Højere krav
til performance

31. 31
”Facebook sucks!”
• Intuitive navigering
• Timelines elegance
• Svartiden!
De besøgendes forventninger
Brugeroplevelsen
Højere krav
til performance

32. 32
Performance
is about respect
”Respect your user’s time and they will be
more likely to walk away with a positive
experience.”
Brat Frost
Kilde: http://bradfrostweb.com/blog/post/performance-as-design/
De besøgendes forventninger

33. 33
Hvordan indlæser
browseren et website

34. 34
Link: http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html

35. 35

36. 36

37. 37
Ekstra info:
• CSS filer
• JavaScript filer
• Asynkrone forespørgsler

38. 38

39. 39
Dit websites svartider
skal være hurtigere!
Hvor skal jeg fokusere mine
optimeringer?

40. 40
Dit website skal
på slankekur.. 
Hvor skal jeg fokusere mine
optimeringer?

41. 41
“80-90% of the end-user response time is spent on the frontend.
Start there.” – Steve Sourders, Google
20 % BE = Time To First byte (TTFB)
• Database opslag
• Web service kald
• HTML generering
80% FE = Download af indholdet:
• Billeder
• CSS
• Scripts
• Flash
Kilde: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Hvor skal jeg fokusere mine
optimeringer?

42. 42
Back End: 16 % – Front End: 84 % Back End: 31 % – Front End: 69 % Back End: 9 % – Front End: 91 %
Back End: 8 % – Front End: 92 %
Back End: 4 % – Front End: 96 %Back End: 11 % – Front End: 79 %
Back End: 11 % – Front End: 89 % Back End: 13 % – Front End: 87 %
Værktøj:
www.webpagetest.org

43. 43
www.webpagetest.org

44. 44
www.webpagetest.org

45. • Reducering af antal HTTP forespørgsler
• Reducering af website indholdet
Hvor skal jeg fokusere mine
optimeringer?

46. 46
Reducering af antal HTTP forespørgsler
Hvor skal jeg fokusere mine
optimeringer?

47. 47
Reducering af antal websites indhold
500 kb
250 kb
4 sek. svartid
2 sek. svartid
250 kb
2 sek. svartid
Hvor skal jeg fokusere mine
optimeringer?

48. 48
Optimér websitet – Køb ikke mere hardware
500 kb
90 req.
250 kb
45 req.
Hvor skal jeg fokusere mine
optimeringer?

49. 49
Gør som Seatwave
Hvor skal jeg fokusere mine
optimeringer?

50. 50
Hvad er årsagen til dårlig
web performance?

51. 51
For meget indhold
Tungt indhold som ikke
er komprimeret korrekt
Server konfigurationer
Spidsbelastninger med
høj trafik
Netværks latency
3. part komponenter
Hvad er årsagen til dårlig
web performance?

52. 52
Indhold
Ansvarsområder
Applikation
It-infratruktur
Hvad er årsagen til dårlig
web performance?

53. 53
Ansvarsområde:
- Indhold
• Web redaktører
• Webmasters
• E-commerce managers
Hvad er årsagen til dårlig
web performance?

54. 54
Ansvarsområde:
- Applikation
• Webbureauer
• Udviklings-hus
• In-house udvikling
Hvad er årsagen til dårlig
web performance?

55. 55
Ansvarsområde:
- It-infrastruktur
• Webhotel
• Hosting partner
• In-house hosting
Hvad er årsagen til dårlig
web performance?

56. 56
Hvilke værktøjer findes der
inden for web performance optimering?

57. 57
Udvælg de
rigtige værktøjer
Monitorering
Test
Optimering
Testværktøjer

58. 58
• Svartider
• Tilgængelighed
• IKKE ping
• Brugernes oplevelse udefra
• 3. part monitorering
Monitorering
Testværktøjer – Web performance

59. 59
• Load test
• Hvor meget kan websitet
holde til
• Stress test
• Hvor meget kan websitet
holde til under en stor
belastning
• Endurance test
• Hvordan opfører websitet
sig under en længere
vedvarende belastning
Performancetest
Testværktøjer – Web performance

60. 60
Performance
optimering
• Lokalisér potentielle optimeringstiltag
• Udbedre ’flaskehalse’
• Reducér svartider
• Reducér båndbreddeforbrug
• Reducér belastning på it-infrastruktur
Testværktøjer – Web performance

61. 61
Performance
værktøjer
Testværktøjer – Web performance

62. 62
YSlow plugin PageSpeed plugin Webperformance X-ray
Antal performance checks 23 31 400+
Mobil specifikke
performance checks
Nej Nej Ja
Omfang 1 URL 1 URL Hele websitet
Administrationsmodul Nej Nej Ja, op til flere brugere
PDF rapporter Nej Nej Ja, 14 forskellige
Sammenligning af
scanninger
Nej Nej Ja
API Ja Ja Ja
Dansk support Nej Nej Ja
Testværktøjer – Web performance

63. 63
Værktøjerne
er på plads!
Udvælg dine testværktøjer

64. 64
Reducér antallet
af forespørgsler
Hvad kan optimeres på dit website

65. 65
1)
Combinable JavaScript/CSS files

66. 66
URL: http://www.smartguy.dk
• Dyre HTTP forespørgsler
• Længere svartider
• Større belastning på
infrastrukturen
• Effektiv komprimering
Reducér forespørgsler:
Combinable
JavaScript/CSS files
Hvad kan optimeres på dit website

67. 67
Hvad kan optimeres på dit website

68. 68
Hvor gode er I?

69. 69
1 7

70. 70
2)
Domain Sharding

71. 71
Reducér forespørgsler:
Domain Sharding
• 6 åbne forbindelse ad
gangen
• Per domæne
• Statiske komponenter
• Cookie-less domæner
Hvad kan optimeres på dit website

72. 72
Hvad kan optimeres på dit website

73. 73
Hvor gode er I?

74. 74
1 7

75. 75
3)
Caching (Expire Headers)

76. 76
“The fastest HTTP request is the one not made.”
Reducér forespørgsler:
1) Caching (Expire Headers)
Hvad kan optimeres på dit website

77. 77
“The fastest HTTP request is the one not made.”
Kilde: http://www.httparchive.org/
Reducér forespørgsler:
1) Caching (Expire Headers)
• Caching Headers
• Pas på med dynamiske
komponenter!
• Indfør versionsnumre
o Javascript_v01.js
o Javascript_v02.js
• Last-Modified løser
næsten problemet
Hvad kan optimeres på dit website

78. 78
Reducér forespørgsler:
1) Caching (Expire Headers)
Hvad kan optimeres på dit website

79. 79
Reducér forespørgsler:
1) Caching (Expire Headers)
Hvad kan optimeres på dit website

80. 80
Hvor gode er I?

81. 81
6 2

82. 82
4)
Content Delivery Network (CDN)

83. 83
Hvad kan optimeres på dit website
Reducér forespørgsler:
Content Delivery Network (CDN)

84. 84
• Smart-route teknologi
• Komponenter placeret
geografisk tættere på
brugeren
• Typisk statiske
Fordele:
• Reducering af trafik
• Større skalérbarhed
Hvad kan optimeres på dit website

85. 85
Hvad kan optimeres på dit website
Reducér forespørgsler:
Content Delivery Network (CDN)

86. 86
Fra Holland Fra Australien
Hvad kan optimeres på dit website

87. 87
Fra Holland Fra Australien
Hvad kan optimeres på dit website

88. 88
Fra Holland Fra Australien
Hvad kan optimeres på dit website

89. 89
Hvad kan optimeres på dit website
Reducér forespørgsler:
Content Delivery Network (CDN)

90. 90
www.cloudflare.com
Hvad kan optimeres på dit website
Reducér forespørgsler:
Content Delivery Network (CDN)

91. 91
Hvor gode er I?

92. 92
0 8

93. 93
Reducér indhold
Hvad kan optimeres på dit website

94. 94
5)
Activate HTTP Compression

95. 95
• Komprimering af:
HTML, CSS og JavaScript
• Ikke billeder, videoer
eller PDF’er
• Konfiguration på
webserver
• Load balancer problem
Uden gzip/deflate
Med gzip/deflate
Reducér indhold:
HTTP Compression
Hvad kan optimeres på dit website

96. 96
Reducér indhold:
HTTP Compression
Hvad kan optimeres på dit website

97. 97
Hvor gode er I?

98. 98
3½ 4½

99. 99
6)
Minify JavaScript/CSS-files

100. 100
Reducér indhold:
Minify JavaScript/CSS-files
/* Highlight */
#content table tr.sfhover, #content table tr.sfhover td {
background-color: #b5dff3;
color: #000
}
/* Selected */
/* This always takes precedence over highlight color! */
#content table.ledger tr.selected td, #content table tr.selected td {
background-color: #4775d1;
color: #fff;
border-left: 1px solid #346dbe;
border-bottom: 1px solid #7daaea
}
#content table tr.sfhover,#content table tr.sfhover td{background-
color:#b5dff3;color:#000}#content table.ledger tr.selected td,#content table
tr.selected td{background-color:#4775d1;color:#fff;border-left:1px solid
#346dbe;border-bottom:1px solid #7daaea}
Minified
Not Minified
Hvad kan optimeres på dit website

101. 101
Reducér indhold:
Minify JavaScript/CSS-files
• YUI Compressor, Java baseret command line - developer.yahoo.com/yui/compressor/
• CSS Tidy - http://csstidy.sourceforge.net/
• Webperformance X-ray - http://www.digicure.dk/webperformance-x-ray.html
Hvad kan optimeres på dit website

102. 102
6)
Optimise images

103. 103
JPEG-filer kan indeholde:
• Embedded thumbnail images
• EXIF metadata
• Adobe XMP metadata
• Camera information and settings
• Geographical and timing data
• ICC color profile data
• Comments
• Kan ikke komprimeres med
HTTP Compression!
• Benyt JPEGTran -
http://jpegclub.org/jpegtran/
• Webperformance X-ray
Reducér indhold:
Optimise images - JPEG
Hvad kan optimeres på dit website

104. 104
Reducér indhold:
Optimise images - PNG
Hvad kan optimeres på dit website

105. 105
7)
JPEG Candidate Images

106. 106
URL: http://www.tryg.dk/media/boerneulykke-kampagne_220x420_75-15831.png
Reducér indhold:
JPEG Candidate Images
879 kb
ImageMagick.org
• PNG/GIF filer  JPEG
filer
• Reducering i størrelse
Ulemper:
• Skarpe hjørner (logoer
eller grafer)
45 kb~94 %
Hvad kan optimeres på dit website

107. 107
Optimér rendering
Hvad kan optimeres på dit website

108. 108
8)
CSS in top / JavaScript at bottom

109. 109
JavaScript i bunden
JavaScript i toppen
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css”/>
…
</head>
CSS i toppen
Optimér rendering:
CSS i toppen og
JavaScript i bunden
Hvad kan optimeres på Tryg.dk

110. 110
Hvor gode er I?

111. 111
8 0

112. 112
9)
Apply Image Tag Dimensions

113. 113
Optimér rendering:
Apply Image Tag Dimensions
<html>
<title>Funny Birds</title>
<p> ... ...
lots of content about birds ... ...
</p>
<img src="bird.jpg" />
<p> ... ...
more content about birds ... ...
</p>
</html>
<html>
<title>Funny Birds</title>
<p> ... ...
lots of content about birds ... ...
</p>
<img src="bird.jpg“width="30" height="20" />
<p> ... ...
more content about birds ... ...
</p>
</html>
Hvad kan optimeres på dit website

114. 114
10)
Prioritize visible content

115. 115
Optimér rendering:
Prioritize visible content
Hvad kan optimeres på dit website

116. 116
Optimér rendering:
Prioritize visible content
Hvad kan optimeres på dit website

117. 117
Optimér rendering:
Prioritize visible content
Hvad kan optimeres på dit website

118. 118
Optimér rendering:
Prioritize visible content
Hvad kan optimeres på dit website

119. 119
11) – Ekstra
Avoid 3. party SPOF (scripts)

120. 120
DNS
Load Balancers App Servers
Read-only DB
Master DB
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

121. 121
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

122. 122
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

123. 123
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

124. 124
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

125. 125
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
DEMO

126. 126
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

127. 127
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

128. 128
Hvad kan optimeres på dit website
Se dig for når du implementerer
3. part JavaScript til social widgets

129. 129
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
Facebook buttons == 270 Kb!
Parametre:
u : Sidens URL

130. 130
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

131. 131
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
Parametre:
url : Sidens URL
text : Valgfri tekst
hashtags : Kommaseparerede hashtags
Via : Via tekst
https://twitter.com/intent/tweet?url=http://www.eksempel.dk
&text=Performance%20analyse&hashtags=fdih,digicure,web
perf&via=digicuredk

132. 132
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website

133. 133
Hvad kan optimeres på dit website
https://plus.google.com/share?url=http://digicure.dk
http://www.linkedin.com/shareArticle?mini=true&url=http://www.dig
icure.dk&title=Performance analyse&source=Digicure&summary=I
analysen har Digicure udf%F8rt performance-checks p%E5 505 FDIH
medlemmers websites forside, og benchmarket dem ift. hinanden.
Parametre:
mini=true : Påkrævet
url: URL
title : Valgfri titel
source : Valgfri kilde
summary : Valgfrit resumé
Parametre:
url : URL

134. 134
Optimér rendering:
Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
www.cdnperf.com

135. 135
Hvor gode er I?

136. 136
5 3

137. 137
Opsummering
Combinable JavaScripts 1 7
Domain Sharding 1 7
Caching 6 2
Content Delivery Network (CDN) 0 8
HTTP Compression 3½ 4½
CSS i top 8 0
3. part SPOF 5 3

138. 138
Performance analyse
Seminar
deltagere
Webshops
Okt 2013
Kommuner
Marts 2013
International
(httparchive.org)
Forespørgsler 82 req. 80 req. 62 req. 94 req.
Størrelse 1639 KB 1.229 KB 991 KB 1590 KB
Potentiel
Besparelse
(størrelse)
20,5 % 19 % 38 % --

139. 139
Og husk nu…

140. 140
Performance optimering
som en løbende process

141. 141
Performance optimering - som en løbende proces

142. 142
Fremtiden indenfor web performance
Hvor er vi
på vej hen?

143. 143
Højere krav
til performance
2006 = <4 sekunder
2009 = <2 sekunder
2013 = <1 sekund
1960 = <10 sekunder
De besøgendes forventninger

144. 144
Fremtiden indenfor web performance
”Performance
budgettet”
• Tim Kadlec, www.timkadlec.com
• Inddrag performance tidligt i et projekt
• Ender med et langsomt website med
tungt indhold
• Kontrol
• ”Performance budgettet”
Kilde: http://timkadlec.com/2013/01/setting-a-performance-budget/

145. 145
• Fokus på forespørgsler
• Fokus på websites
indhold
• Nedsættes!
• Ikke svartider og
tilgængelighed
Fremtiden indenfor web performance
”Performance
budgettet”

146. 146
Fremtiden indenfor web performance
”Performance
budgettet”
• Sætter et budget
• Må ikke overskrides
• Antal forespørgsler og websites
indhold

147. 147
Fremtiden indenfor web performance
”Performance
budgettet”
Eksempel:
Instantalarm.dk
Antal forespørgsler: 30
Websites indhold: 350 KB

148. 148
Fremtiden indenfor web performance
”Performance
budgettet”
Eksempel:
Instantalarm.dk
• Optimér eksisterende features eller
komponenter på websitet
• Fjern eksisterende features eller
komponenter på websitet
• Lad være med at tilføje den nye
feature eller komponent

149. 149
Fremtiden indenfor web performance
Fra desktop PC til..

150. 150
Fremtiden indenfor web performance
Mobil performance

151. 151
Adgang fra flere
forskellige enheder

152. 152
Fremtiden indenfor web performance
Det mobile netværk
Båndbredde
Latency

153. 153
Fremtiden indenfor web performance
• D. 21. november
• Kl. 13:00 – 16:00
• Digicure.dk

154. 154
Fremtiden indenfor web performance

155. 155
Hvad kan jeg gøre for at få hurtigere
svartider på mit website?
Coming up:
Workshop: Webperformance X-ray

156. 156
login.webperformancexray.com

157. 157

158. 158

159. 159

160. 160
Webperformance X-ray udfører mere end 400 performance
tjeks og flere kommer til

161. 161
Demo

162. Tak for i dag!
Tobias Borg Petersen,
mail: tbp@digicure.dk
www: digicure.dk