God performance er god kundeservice

Transkript

1 God performance er god kundeservice 7. maj 2014 Session 2 Tobias Borg Petersen, Performancekonsulent fra Digicure A/S

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

3 Stiftet i 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 3

4 Agenda Tobias Borg Petersen 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? 4

5 5

6 Hvorfor optimere web performance? 6

7 Websites bliver langsommere og langsommere 7

8 Web performance Hvordan står det til i dag? Danske webshops Danske kommuner Kilde: 8

9 Web performance Hvorfor? Lavere bruger engagement 20 %.. mindre trafik blot ved at øge svartiden med 500 ms. Kilde: 9

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

11 Web performance Hvorfor? Tekniske gevinster Svartider % Båndbredde forbrug 43 % DB CPU 75 % Samtidige brugere +300 % Kilde: 11

12 Web performance Hvorfor? Search Engine Optimization (SEO) 1.5 seconds == SLOW Kilde: 12

13 De besøgendes forventninger 13

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

15 Web performance optimering 15

16 Båndbredde og svartider 16

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

18 Båndbredde og svartider 18

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

20 Båndbredde og svartider Fra Danmark 20

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

22 Båndbredde og svartider Fra Danmark 22

23 Båndbredde og svartider Fra Danmark Fra Australien 23

24 Båndbredde og svartider Fra Danmark Fra Australien 24

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

26 Hvordan indlæser browseren et website 26

27 Link: 27

28 28

29 Ekstra info: CSS filer JavaScript filer 29

30 30

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

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

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

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

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

36 Testværktøjer Web performance 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 36

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

38 Testværktøjer Web performance YSlow plugin PageSpeed plugin Webperformance X-ray Antal performance checks 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 38

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

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

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

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

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

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

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

46 1) Combinable JavaScript/CSS files 46

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

48 Top 10 tips og tricks 48

49 Hvor gode er I? 49

50 8 8 50

51 2) Domain Sharding 51

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

53 Top 10 tips og tricks 53

55

56 Top 10 tips og tricks Reducér forespørgsler: Domain Sharding 56

57 3) Caching (Expire Headers) 57

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

59 Top 10 tips og tricks The fastest HTTP request is the one not made. Caching Headers Pas på med dynamiske komponenter Indfør versionsnumre o Javascript_v01.js o Javascript_v02.js Reducér forespørgsler: Caching (Expire Headers) Last-Modified løser næsten problemet 59

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

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

63 7 9 63

64 Top 10 tips og tricks Reducér indhold 64

65 4) Activate HTTP Compression 65

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

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

69

70 5) Minify JavaScript/CSS-files 70

71 Top 10 tips og tricks /* 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 } Not Minified #content table tr.sfhover,#content table tr.sfhover td{backgroundcolor:#b5dff3;color:#000}#content table.ledger tr.selected td,#content table tr.selected td{background-color:#4775d1;color:#fff;border-left:1px Minified solid #346dbe;border-bottom:1px solid #7daaea} Reducér indhold: Minify JavaScript/CSS-files 71

72 Top 10 tips og tricks YUI Compressor, Java baseret command line - developer.yahoo.com/yui/compressor/ CSS Tidy - Webperformance X-ray - Reducér indhold: Minify JavaScript/CSS-files 72

73 6) Unoptimized Images 73

74 Top 10 tips og tricks 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 - Webperformance X-ray Reducér indhold: Unoptimized Images - JPEG 74

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

76 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) Reducér indhold: Unoptimized Images - PNG 76

77 7) JPEG Candidate Images 77

78 Top 10 tips og tricks ImageMagick.org PNG/GIF filer JPEG filer Reducering i størrelse 879 kb ~94 % Reducér indhold: JPEG Candidate Images 45 kb Ulemper: Skarpe hjørner (logoer eller grafer) 78

79 8) High Quality JPEG Image 79

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

81 Top 10 tips og tricks Optimér rendering 81

82 9) CSS in top / JavaScript at bottom 82

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

85 8 8 85

86 10) Apply Image Tag Dimensions 86

87 Top 10 tips og tricks <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> Optimér rendering: Apply Image Tag Dimensions 87

88 11) Ekstra Prioritize visible content 88

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

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

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

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

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

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

103 Top 10 tips og tricks &text=performance%20analyse&hashtags=fdih,digicure,web perf&via=digicuredk Optimér rendering: Avoid 3. party SPOF (scripts) Parametre: url : Sidens URL text : Valgfri tekst hashtags : Kommaseparerede hashtags Via : Via tekst 103

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

107

108 13) Ekstra CDNPerf.com 108

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

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

111 14) Ekstra Embedded YouTubes 111

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

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

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

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

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 KB 1590 KB Potentiel Besparelse (størrelse) 15,73 % 20,5 % 19 %

117 Og husk nu 117

118 Performance optimering som en løbende proces 118

119 Performance optimering - som en løbende proces 119

120 Mobil performance optimering 120

121 Fremtiden indenfor web performance Mobil performance 121

122 Kilde: 122

123 Adgang fra flere forskellige enheder 123

124 124

125 Er de mobile brugere mere tålmodige? 125

126 85 % af de mobile bruger forventer at mobile sites loader lige så hurtigt eller hurtigere end desktop sites Kilde: 126

127 127

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

129 Båndbredde og mobilnetværket 129

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

131 Båndbredde og svartider Latency 13 1

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

133 Båndbredde og svartider Afstand Vejret Retning mod radiomast Belastning på radiomast Kilde:

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

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

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

137 Båndbredde og svartider Fra Holland Fra Australien 4G Netværket - Vil gøre livet nemmere 4G 3G Edge AT & T Core network latency ms ms ms Kilde:

138 Båndbredde og svartider Fra Holland Fra Australien Radio Access Core Network External Network Samlet latency Idle Edge 50 ms ms ms ms +2,5 sek. 3G 50 ms ms ms ms +2,5 sek. 4G 5 ms ms ms ms +100 ms Desktop ms ms - 4G Netværket - Vil gøre livet nemmere Kilde:

139 Båndbredde og svartider 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) 4G Netværket - Vil gøre livet nemmere Løsninger: Reducér mængden af data Reducér antallet af forespørgsler Komprimering Caching 13 9

140 Testværktøjer Mobil performance Performance optimering 140

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

142 Testværktøjer Web performance 142

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

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

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

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

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

154 Optimering af mobile websites 154

155 15) Eleminate software latency 155

156 Hvad kan optimeres på dit mobile website Kilde: times-faster-than-android-devices/ 156

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

158 Hvad kan optimeres på dit mobile website Fast-Click Kilde: 158

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

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

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

162 16) Turn Off Autocorrect and Autocapitalize 162

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

164 164

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

166 17) Perceived Performance vs. Actual Performance 166

167 Hvad kan optimeres på dit mobile website Perceived Performance vs. Actual Performance Kilde: 167

168 Hvad kan optimeres på dit mobile website Perceived Performance vs. Actual Performance Kilde: 168

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

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

171 Hvad kan optimeres på dit mobile website Loading 171

172 Hvad kan optimeres på dit mobile website Loading Kilde: 172

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

176 18) Responsive Web Design (RWD) 176

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

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

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

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

181 Hvad kan optimeres på dit mobile website Kilde: 181

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

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

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

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

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

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

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

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

195 Performance budgettet 195

196 Fremtiden indenfor web performance Tim Kadlec, Inddrag performance tidligt i et projekt Ender med et langsomt website med tungt indhold Kontrol Performance budgettet Performance budgettet Kilde: 196

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

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

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

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

201 HTTP

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 202

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

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 204

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

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 206

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

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

209 Hvad kommer HTTP 2.0 til at have af betydning? Komprimering af HTTP Headers 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) 209

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 210

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 211

212 HTTP 2.0 eller HTTP 1.1? 212

213 Gratis scanning af forside

214 Fremtiden indenfor web performance 214