1. www.digicure.dk
God performance
er god kundeservice
7. maj 2014
Session 2 – ”Sådan får du et hurtigt website”
Tobias Borg Petersen,
Performancekonsulent fra Digicure A/S

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

3. www.digicure.dk
3
• Stiftet i 2003
• Kontor i Lyngby
• 22 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. Agenda
Tobias Borg Petersen
4
• Hvilke typer værktøjer har jeg behov for?
• Top 10 tips og tricks til at øge performance niveauet
• Mobil performance optimering – de mobile sites kræver
opmærksomhed
• Når forretningen bliver global, sætter det store krav til performance
• Web performance optimering som en løbende proces
• Hvad byder fremtiden på? Hvilke udfordringer kommer vi til at stå
med?

5. 5

6. 6
Hvorfor optimere web performance?

7. 7
Websites bliver langsommere
og langsommere…

8. 8
Danske webshops Danske kommuner
Web performance
Hvordan står det til i dag?
Kilde: http://www.digicure.dk/performance.html

9. 9
20 %
.. mindre trafik blot ved at øge svartiden med
500 ms.
Web performance – Hvorfor?
Lavere bruger engagement
Kilde: http://velocityconf.com/velocity2009/public/schedule/detail/8523

10. 10
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
Web performance – Hvorfor?
Lavere bruger engagement

11. 11
• 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

12. 12
1.5 seconds == SLOW
Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Web performance – Hvorfor?
Search Engine Optimization (SEO)

13. 13
De besøgendes forventninger

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

15. 15
Web performance optimering

16. 16
Båndbredde og svartider

17. 17
Vil den stigende hastighed på
båndbreddelinjerne løse vores problemer?
NEJ!
Båndbredde og svartider

18. 18
Båndbredde og svartider

19. 19
Båndbredde og svartider
Båndredde og latency
• Båndbredde indikerer ‘tykkelsen’
• Latency indikerer transporttiden
• Transporttiden fra A til B == Latency

20. Fra Danmark
20
Båndbredde og svartider

21. 21
Latency == transporttiden fra A til B
Båndbredde

22. Fra Danmark
22
Båndbredde og svartider

23. 23
Båndbredde og svartider
Fra Danmark Fra Australien

24. 24
Båndbredde og svartider
Fra Danmark Fra Australien

25. 25
Båndbredde og svartider
Streaming er begrænset af båndbredde
Web browsing er begrænset af latency

26. 26
Hvordan indlæser
browseren et website

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

28. 28

29. 29
Ekstra info:
• CSS filer
• JavaScript filer

30. 30

31. 31
Dit websites svartider
skal være hurtigere
Hvilke typer værktøjer har
man behov for?

32. 32
Hvilke typer af værktøjer
har man behov for?

33. 33
Udvælg de
rigtige værktøjer
Monitorering
Test
Optimering
Hvilke typer af værktøjer
har man behov for?

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

35. 35
Ikke i blinde!
Du kan ikke forbedre
det du ikke måler på!
Testværktøjer – Web performance

36. 36
• 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

37. 37
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

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

39. 39
Testværktøjer – Web performance
Værktøjet som
bliver benyttet

40. 40
Værktøjerne
er på plads!
Hvilke typer af værktøjer
har man behov for?

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/
Hvilke typer af værktøjer
har man behov for?

42. • Reducering af antal HTTP forespørgsler
• Reducering af website indholdet
Hvilke typer af værktøjer
har man behov for?

43. 43
Optimér websitet – Køb ikke mere hardware
500 kb
90 req.
250 kb
45 req.
Hvilke typer af værktøjer
har man behov for?

44. 44
Gør som Seatwave
Hvilke typer af værktøjer
har man behov for?

45. 45
Reducér antallet
af forespørgsler
Top 10 tips og tricks til at øge
performance niveauet

46. 46
1)
Combinable JavaScript/CSS files

47. 47
• Dyre HTTP forespørgsler
• Længere svartider
• Større belastning på
infrastrukturen
• Effektiv komprimering
Reducér forespørgsler:
Combinable
JavaScript/CSS files
Top 10 tips og tricks

48. 48
Top 10 tips og tricks

49. 49
Hvor gode er I?

50. 50
8 8

51. 51
2)
Domain Sharding

52. 52
Reducér forespørgsler:
Domain Sharding
• 6 åbne forbindelse ad
gangen
• Per domæne
• Statiske komponenter
• Cookie-less domæner
Top 10 tips og tricks

53. 53
Top 10 tips og tricks

54. 54
Hvor gode er I?

55. 55
4 12

56. 56
Reducér forespørgsler:
Domain Sharding
Top 10 tips og tricks
www.browserscope.org

57. 57
3)
Caching (Expire Headers)

58. 58
“The fastest HTTP request is the one not made.”
- Steve Souders
Reducér forespørgsler:
Caching (Expire Headers)
Top 10 tips og tricks

59. 59
“The fastest HTTP request is the one not made.”
Reducér forespørgsler:
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
Top 10 tips og tricks

60. 60
Reducér forespørgsler:
Caching (Expire Headers)
Top 10 tips og tricks

61. 61
Reducér forespørgsler:
Caching (Expire Headers)
Top 10 tips og tricks

62. 62
Hvor gode er I?

63. 63
7 9

64. 64
Reducér indhold
Top 10 tips og tricks

65. 65
4)
Activate HTTP Compression

66. 66
• Komprimering af:
HTML, CSS, JavaScript,
Fonts, og ICO-filer
• Ikke billeder, videoer
eller PDF’er
• Konfiguration på
webserver
• Load balancer problem
Uden gzip/deflate
Med gzip/deflate
Reducér indhold:
HTTP Compression
Top 10 tips og tricks

67. 67
Reducér indhold:
HTTP Compression
Top 10 tips og tricks

68. 68
Hvor gode er I?

69. 69
11 5

70. 70
5)
Minify JavaScript/CSS-files

71. 71
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
Top 10 tips og tricks

72. 72
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
Top 10 tips og tricks

73. 73
6)
Unoptimized Images

74. 74
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:
Unoptimized Images - JPEG
Top 10 tips og tricks

75. 75
Reducér indhold:
Unoptimized Images - JPEG
Top 10 tips og tricks

76. 76
Reducér indhold:
Unoptimized Images - PNG
Top 10 tips og tricks
PNG-filer kan indeholde:
• Comments
• EXIF metadata
• Unused color or paletta data
• Compressed with an
unoptimized DEFLATE
compressor (Level 1-9)

77. 77
7)
JPEG Candidate Images

78. 78
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 %
Top 10 tips og tricks

79. 79
8)
High Quality JPEG Image

80. 80
Reducér indhold:
JPEG Candidate Images
• JPEG Quality 100

JPEG Quality 75
• Reducering i størrelse
Ulemper:
• Dårligere kvalitet
Top 10 tips og tricks
ImageMagick.org

81. 81
Optimér rendering
Top 10 tips og tricks

82. 82
9)
CSS in top / JavaScript at bottom

83. 83
JavaScript i bunden
JavaScript i toppen
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css”/>
…
</head>
CSS i toppen
Optimér rendering:
CSS in top and
JavaScript at bottom
Top 10 tips og tricks

84. 84
Hvor gode er I?

85. 85
8 8

86. 86
10)
Apply Image Tag Dimensions

87. 87
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>
Top 10 tips og tricks

88. 88
11) Ekstra
Prioritize visible content

89. 89
Optimér rendering:
Prioritize visible content
Top 10 tips og tricks

90. 90
Optimér rendering:
Prioritize visible content
Top 10 tips og tricks

91. 91
Optimér rendering:
Prioritize visible content
Top 10 tips og tricks

92. 92
12) – Ekstra
Avoid 3. party SPOF (scripts)

93. 93
DNS
Load Balancers App Servers
Read-only DB
Master DB
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

94. 94
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

95. 95
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

96. 96
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

97. 97
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

98. 98
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

99. 99
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

100. 100
Se dig for når du implementerer
3. part JavaScript til social widgets
Top 10 tips og tricks

101. 101
Optimér rendering:
Avoid 3. party SPOF (scripts)
Facebook buttons == 270 Kb!
Parametre:
u : Sidens URL
Top 10 tips og tricks

102. 102
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

103. 103
Optimér rendering:
Avoid 3. party SPOF (scripts)
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
Top 10 tips og tricks

104. 104
Optimér rendering:
Avoid 3. party SPOF (scripts)
Top 10 tips og tricks

105. 105
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
Top 10 tips og tricks

106. 106
Hvor gode er I?

107. 107
10 6

108. 108
13) – Ekstra
CDNPerf.com

109. 109
Optimér rendering:
3. Party JavaScript Libraries
www.cdnperf.com
Top 10 tips og tricks

110. 110
Top 10 tips og tricks
Optimér rendering:
3. Party JavaScript Libraries

111. 111
14) – Ekstra
Embedded YouTubes

112. 112
Optimér rendering:
Embedded YouTubes
www.webperformance.nu
Top 10 tips og tricks
400 KB!!

113. 113
Optimér rendering:
Embedded YouTubes
www.webperformance.nu
Top 10 tips og tricks
3 KB!!

114. 114
Optimér rendering:
Embedded YouTubes
www.webperformance.nu
Top 10 tips og tricks
Ikke optimeret
Optimeret

115. 115
Opsummering
Combinable JavaScripts 8 8
Domain Sharding 4 12
Caching 7 9
HTTP Compression 11 5
CSS i top / JS i bund 8 8
3. part SPOF 10 6

116. 116
Performance analyse
Seminar
Jylland
Seminar
KBH
Webshops
Okt 2013
International
(httparchive.org)
Forespørgsler 81 req. 82 req. 80 req. 94 req.
Størrelse 1366 KB 1639 KB 1.229 KB 1590 KB
Potentiel
Besparelse
(størrelse)
15,73 % 20,5 % 19 % --

117. 117
Og husk nu…

118. 118
Performance optimering
som en løbende proces

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

120. 120
Mobil performance optimering

121. 121
Fremtiden indenfor web performance
Mobil performance

122. 122Kilde: http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6

123. 123
Adgang fra flere
forskellige enheder

124. 124

125. 125
Er de mobile brugere
mere tålmodige?

126. 126
”85 % af de mobile
bruger forventer at
mobile sites loader
lige så hurtigt eller
hurtigere end
desktop sites”
Kilde: http://www.strangeloopnetworks.com/web-performance-infographics/

127. 127

128. 128
”75 % af de mobile
bruger vil forlade
et website, hvis det
tager længere end
5 sekunder at få
indholdet vist”

129. 129
Båndbredde og mobilnetværket

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

131. 13
1
Båndbredde og svartider
Latency

132. 13
2
Fra Holland Fra Australien
Hvad kan optimeres på dit website

133. 13
3
Båndbredde og svartider
Kilde: http://www.webperformancetoday.com/2013/08/06/8-mobile-performance-
assumptions/
Belastning på radiomast
Vejret
Retning mod radiomast
Afstand

134. 13
4
Fra Holland Fra Australien
Båndbredde og svartider
4G Netværket
- ’Under the hood’

135. 13
5
Men er 4G ikke løsningen på
vores problemer?
NEJ!
Båndbredde og svartider

136. 13
6
Fra Holland Fra Australien
Båndbredde og svartider
4G Netværket
- Vil gøre livet nemmere
LTE/4G 3G
’Idle’ tilstand < 100 ms < 2,5 sek.
Forbundet < 5 ms <50 ms

137. 13
7
Fra Holland Fra Australien
Båndbredde og svartider
4G Netværket
- Vil gøre livet nemmere
4G 3G Edge
AT & T – Core network latency 40-50 ms 50-200 ms 600-750 ms
Kilde: https://docs.google.com/presentation/d/1wAxB5DPN-
rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present#slide=id.g11c1373c5_5_0

138. 13
8
Fra Holland Fra Australien
4G Netværket
- Vil gøre livet nemmere
Radio Access Core Network External Network Samlet latency ‘Idle’
Edge 50 ms 600-750 ms 10-30 ms 670-830 ms +2,5 sek.
3G 50 ms 50-200 ms 10-30 ms 120-280 ms +2,5 sek.
4G 5 ms 40-50 ms 10-30 ms 65-86 ms +100 ms
Desktop - - 10-30 ms 10-30 ms -
Kilde: https://docs.google.com/presentation/d/1wAxB5DPN-
rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present#slide=id.g11c1373c5_5_0
Båndbredde og svartider

139. 13
9
Båndbredde og svartider
4G Netværket
- Vil gøre livet nemmere
• 4G er ikke tilgængelig for os alle
endnu
• 3G netværket forsvinder ikke
foreløbigt
Hvad kan vi gøre ved det?
• Websites størrelse
• Antal forespørgsler (VIGTIG)
Løsninger:
• Reducér mængden af data
• Reducér antallet af forespørgsler
• Komprimering
• Caching

140. 140
Performance
optimering
Testværktøjer
Mobil performance

141. 141
Performance
værktøjer
Testværktøjer
Mobil performance

142. 142
www.webpagetest.org
Testværktøjer – Web performance

143. 143
Mobitest.akamai.com
Testværktøjer – Web performance

144. 144
Httpwatch.com
Testværktøjer – Web performance

145. 145
Google.dk/chrome
Testværktøjer – Web performance
F12

146. 146
Google.dk/chrome
Testværktøjer – Web performance

147. 147
Google.dk/chrome
Testværktøjer – Web performance

148. 148
Google.dk/chrome
Testværktøjer – Web performance

149. 149
Digicure.dk
Testværktøjer – Web performance

150. 150
Digicure.dk
Testværktøjer – Web performance

151. 151
Digicure.dk
Testværktøjer – Web performance

152. 152
Digicure.dk
Testværktøjer – Web performance

153. 153
Digicure.dk
Testværktøjer – Web performance

154. 154
Optimering af mobile websites

155. 155
15)
Eleminate software latency

156. 156
Hvad kan optimeres på dit
mobile website
Kilde: http://venturebeat.com/2013/09/19/apples-iphone-5-touchscreen-is-2-5-
times-faster-than-android-devices/

157. 157
Fast-Click
300 ms. forsinkelse
Dobbelt-klik
Løsningen findes!
Hvad kan optimeres på dit
mobile website

158. 158
Fast-Click
Kilde: http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/
Hvad kan optimeres på dit
mobile website

159. 159
InstantClick.io
Kilde: http://instantclick.io/
Hvad kan optimeres på dit
mobile website

160. 160
kortlink.dk/e9k2
Demo
Fast-Click
Hvad kan optimeres på dit
mobile website

161. 161
Demo
Fast-Click
Hvad kan optimeres på dit
mobile website

162. 162
16)
Turn Off Autocorrect and Autocapitalize

163. 163
<input type=”text” autocapitalize=”off” autocorrect=”off”>
HTML5 input typer
Hvad kan optimeres på dit
mobile website

164. 164

165. 165
<input type=”text”>
<input type=”url”
<input type=”email”>
<input type=”text” pattern=”[09]*”
HTML5 input typer
Hvad kan optimeres på dit
mobile website

166. 166
17)
Perceived Performance
vs.
Actual Performance

167. 167Kilde: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-
torture.html?pagewanted=all&_r=0
Hvad kan optimeres på dit
mobile website
Perceived Performance vs.
Actual Performance

168. 168
Kilde: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-
torture.html?pagewanted=all&_r=0
Hvad kan optimeres på dit
mobile website
Perceived Performance vs.
Actual Performance

169. 169
Hvad kan optimeres på dit
mobile website
Perceived Performance vs.
Actual Performance

170. 170
Hvad kan optimeres på dit
mobile website
Perceived Performance vs.
Actual Performance

171. 171
Loading…
Hvad kan optimeres på dit
mobile website

172. 172
Loading…
Kilde: http://www.lukew.com/ff/entry.asp?1797=
Hvad kan optimeres på dit
mobile website

173. 173
Loading…
Hvad kan optimeres på dit
mobile website

174. 174
Loading…
Hvad kan optimeres på dit
mobile website

175. 175
Hvornår bør man benytte
en spinner?
<100 ms = Ingen spinner
100-1000 ms = Spinner
1000+ ms = Ingen spinner
Sørg for at ‘Loading’-bjælken
starter på ca. 10 %
Hvad kan optimeres på dit
mobile website

176. 176
18)
Responsive
Web
Design (RWD)

177. 177
Det her er ikke internettet
Hvad kan optimeres på dit
mobile website

178. 178
Det her er internettet
Hvad kan optimeres på dit
mobile website

179. 179
Det her bliver internettet
Hvad kan optimeres på dit
mobile website

180. 180
”If your website is
15mb, it’s not HTML5 or
RWD. It’s stupid”
- Christian Heilmann

181. 181
Kilde: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Hvad kan optimeres på dit
mobile website

182. 182
Kilde: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Hvad kan optimeres på dit
mobile website

183. 183
Kilde: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Hvad kan optimeres på dit
mobile website

184. 184
Hvilke udfordringer
findes der ifm. RWD?
Download og gem væk
Download og formindsk
Overdreven brug af DOM
Er RWD sites mindre på mobile enheder?
Responsive Images
bør benyttes

185. 185
Content Delivery Network (CDN)
Når forretningen
bliver global

186. 186
Reducér forespørgsler:
Content Delivery Network (CDN)
Top 10 tips og tricks

187. 187
• Smart-route teknologi
• Komponenter placeret
geografisk tættere på
brugeren
• Typisk statiske
Fordele:
• Reducering af trafik
• Større skalérbarhed
Top 10 tips og tricks

188. 188
Reducér forespørgsler:
Content Delivery Network (CDN)
Top 10 tips og tricks

189. 18
9
Fra Holland Fra Australien
Top 10 tips og tricks

190. 19
0
Fra Holland Fra Australien
Top 10 tips og tricks

191. 191
Reducér forespørgsler:
Content Delivery Network (CDN)
Top 10 tips og tricks

192. 192
www.cloudflare.com
Reducér forespørgsler:
Content Delivery Network (CDN)
Top 10 tips og tricks

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

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

195. 195
Performance budgettet

196. 196
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/

197. 197
• Fokus på forespørgsler
• Fokus på websites
indhold
• Forespørgsler og indhold
skal reduceres
• Ikke svartider og
tilgængelighed
Fremtiden indenfor web performance
”Performance
budgettet”

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

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

200. 200
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

201. 201
HTTP 2.0

202. 202
Hvad kommer HTTP 2.0 til
at have af betydning?
Performance og HTTP 2.0
• Reducér latency
• Priotering af forespørgsler
• Server-push events
• Komprimering af HTTP Headers
• ’Streaming’ af data
• Løsning på Head-of-line-blocking
HTTP 2.0 ændrer ikke på data strukturen i
vores HTTP Headers

203. 203
Hvad kommer HTTP 2.0 til
at have af betydning?
’Streaming’ af data

204. 204
Hvad kommer HTTP 2.0 til
at have af betydning?
’Streaming’ af data
• Streaming af data via en enkel TCP fobindelse
• Elimenering af Head-Of-Line-Blocking
• Priotering af forespørgsler/filtyper
• Lavere CPU og Memory forbrug
• Færre TCP forbindelser == flere samtidige brugere
• Mindre tid på TCP slow-start
• Hurtigere TCP congestion/loss recovery

205. 205
Hvad kommer HTTP 2.0 til
at have af betydning?
’Server push’ events

206. 206
Hvad kommer HTTP 2.0 til
at have af betydning?
’Server push’ events
• Fungerer som inlining og data URIs
• Reducerer latency
• ’Pushed’ filer kan blive cached
• ’Pushed’ filer kan genbruges på flere sider
• ’Pushed’ filer kan prioteres af serveren

207. 207
Hvad kommer HTTP 2.0 til
at have af betydning?
Komprimering af HTTP Headers
• 500-800 bytes + cookie info
• ’Header tables’ – Undgå identiske HTTP Headers
• ’Header tables’ udløber når forbindelsen lukkes

208. 208
Hvad kommer HTTP 2.0 til
at have af betydning?

209. 209
Hvad kommer HTTP 2.0 til
at have af betydning?
Komprimering af HTTP Headers
• 500-800 bytes + cookie info
• ’Header tables’ – Undgå identiske HTTP Headers
• ’Header tables’ udløber når forbindelsen lukkes
• Komprimering af data (CRIME sårbarhed løst)

210. 210
Hvad kommer HTTP 2.0 til
at have af betydning?
Store krav til TCP forbindelse
• TCP cwnd == 10 segments
• Support TLS med ALPN negotiation (NPN for
SPDY)
• Support af TLS resumption
Læs High Performance Browser
Networking

211. 211
Hvad kommer HTTP 2.0 til
at have af betydning?
Gamle vaner skal ud
• Domain sharding (Vigtig)
• Combinable JavaScript/CSS
• Image Spriting
• Inlining
• Data URIs

212. 212
HTTP 2.0 eller HTTP 1.1?

213. Gratis scanning af forside

214. 214
Fremtiden indenfor web performance

215. Tobias Borg Petersen,
mail: tbp@digicure.dk
www: digicure.dk

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