162
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

Digicure seminar | Web performance optimering

Embed Size (px)

Citation preview

Web performance workshop26. september 2013

Monitorering

Hvordan kommer jeg godt fra start med web performance

Tobias Borg Petersen,Performancekonsulent fra Digicure A/S

www.digicure.dk

Hvem er jegTobias Borg Petersen

2

@_tobibp

[email protected]

Webperformance.nu/blog

Performancekonsulent i Digicure

Front End udvikler (.NET)

dk.linkedin.com/in/tobiasbp

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

DispositionTobias 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’

WORKSHOPWebperformance X-ray: Få scannet dit website og få et par tips med hjem i tasken

5

Fokus på web performance

6

Fokus på web performance

7

Fokus på web performance

Alt bliver hurtigere

Og brugerne bliver mere og mere utålmodige

8

Websites bliver langsommere og langsommere…

9

Danske webshops Danske kommuner

Web performanceHvordan står det til i dag?

10Kilde: http://httparchive.org

400000

800000

1200000

1600000

2000000International

1.551 KB

Danskekommuner

991 KB

FDIHmedlemmer

1.229 KB

Web performanceHvordan står det til i dag?

11

Flash1%

CSS5% HTML

3%

JavaScript20%

Andet4%Billeder

67%

Flash2%

CSS4% HTML

5%

JavaScript22%

Andet3%

Billeder64%

Web performanceHvordan står det til i dag?

Danske webshops Danske kommuner

12

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/

14Kilde: 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

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

• 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

17Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf

Nedetider kan koste dyrt

Web performance – Hvorfor?Nedetider

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

Båndbredde og svartider

20

Men vil den stigende hastighed på båndbreddelinjerne ikke løse vores problemer?

NEJ!

Båndbredde og svartider

21

Båndbredde og svartider

22

Båndbredde og svartider

• Båndredde og latency

• Båndbredde == “Tykkelsen”

• Latency == Transporttiden

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

De besøgendes forventninger

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

ForresterResearch

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

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

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder

De besøgendes forventninger

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

Performance er en fundamental del af brugeroplevelsen på websitet!

Brugeroplevelsen

De besøgendes forventninger

Højere krav til performance

31

”Facebook sucks!”

• Intuitive navigering

• Timelines elegance

• Svartiden!

De besøgendes forventninger

Brugeroplevelsen

Højere krav til performance

32

Performanceis 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

Hvordan indlæserbrowseren et website

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

35

36

37

Ekstra info:

• CSS filer• JavaScript filer• Asynkrone forespørgsler

38

39

Dit websites svartider skal være hurtigere!

Hvor skal jeg fokusere mine optimeringer?

40

Dit website skal på slankekur..

Hvor skal jeg fokusere mine optimeringer?

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

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

43www.webpagetest.org

44www.webpagetest.org

• Reducering af antal HTTP forespørgsler

• Reducering af website indholdet

Hvor skal jeg fokusere mine optimeringer?

46

Reducering af antal HTTP forespørgsler

Hvor skal jeg fokusere mine optimeringer?

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

Optimér websitet – Køb ikke mere hardware

500 kb90 req.

250 kb45 req.

Hvor skal jeg fokusere mine optimeringer?

49

Gør som Seatwave

Hvor skal jeg fokusere mine optimeringer?

50

Hvad er årsagen til dårlig web performance?

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

Indhold

Ansvarsområder

Applikation

It-infratruktur

Hvad er årsagen til dårlig web performance?

53

Ansvarsområde: - Indhold

• Web redaktører

• Webmasters

• E-commerce managers

Hvad er årsagen til dårlig web performance?

54

Ansvarsområde: - Applikation

• Webbureauer

• Udviklings-hus

• In-house udvikling

Hvad er årsagen til dårlig web performance?

55

Ansvarsområde: - It-infrastruktur

• Webhotel

• Hosting partner

• In-house hosting

Hvad er årsagen til dårlig web performance?

56

Hvilke værktøjer findes derinden for web performance optimering?

57

Udvælg de rigtige værktøjer

Monitorering

Test

Optimering

Testværktøjer

58

• Svartider

• Tilgængelighed

• IKKE ping

• Brugernes oplevelse udefra

• 3. part monitorering

Monitorering

Testværktøjer – Web performance

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

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

Performance værktøjer

Testværktøjer – Web performance

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 forskelligeSammenligning af scanninger

Nej Nej Ja

API Ja Ja JaDansk support Nej Nej Ja

Testværktøjer – Web performance

63

Værktøjerne er på

plads!

Udvælg dine testværktøjer

64

Reducér antalletaf forespørgsler

Hvad kan optimeres på dit website

65

1)

Combinable JavaScript/CSS files

66URL: http://www.smartguy.dk

• Dyre HTTP forespørgsler• Længere svartider• Større belastning på

infrastrukturen

• Effektiv komprimeringReducér forespørgsler:Combinable

JavaScript/CSS files

Hvad kan optimeres på dit website

67

Hvad kan optimeres på dit website

68

Hvor gode er I?

69

1 7

70

2)

Domain Sharding

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

Hvad kan optimeres på dit website

73

Hvor gode er I?

74

1 7

75

3)

Caching (Expire Headers)

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

“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 versionsnumreo Javascript_v01.jso Javascript_v02.js

• Last-Modified løser næsten problemet

Hvad kan optimeres på dit website

78

Reducér forespørgsler:1) Caching (Expire Headers)

Hvad kan optimeres på dit website

79

Reducér forespørgsler:1) Caching (Expire Headers)

Hvad kan optimeres på dit website

80

Hvor gode er I?

81

6 2

82

4)

Content Delivery Network (CDN)

83

Hvad kan optimeres på dit website

Reducér forespørgsler:Content Delivery Network (CDN)

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

Hvad kan optimeres på dit website

Reducér forespørgsler:Content Delivery Network (CDN)

86

Fra Holland Fra Australien

Hvad kan optimeres på dit website

87

Fra Holland Fra Australien

Hvad kan optimeres på dit website

88

Fra Holland Fra Australien

Hvad kan optimeres på dit website

89

Hvad kan optimeres på dit website

Reducér forespørgsler:Content Delivery Network (CDN)

90

www.cloudflare.com

Hvad kan optimeres på dit website

Reducér forespørgsler:Content Delivery Network (CDN)

91

Hvor gode er I?

92

0 8

93

Reducér indhold

Hvad kan optimeres på dit website

94

5)

Activate HTTP Compression

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

Reducér indhold:HTTP Compression

Hvad kan optimeres på dit website

97

Hvor gode er I?

98

3½ 4½

99

6)

Minify JavaScript/CSS-files

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

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

6)

Optimise images

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

Reducér indhold:Optimise images - PNG

Hvad kan optimeres på dit website

105

7)

JPEG Candidate Images

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

Optimér rendering

Hvad kan optimeres på dit website

108

8)

CSS in top / JavaScript at bottom

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

Hvor gode er I?

111

8 0

112

9)

Apply Image Tag Dimensions

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

10)

Prioritize visible content

115

Optimér rendering:Prioritize visible content

Hvad kan optimeres på dit website

116

Optimér rendering:Prioritize visible content

Hvad kan optimeres på dit website

117

Optimér rendering:Prioritize visible content

Hvad kan optimeres på dit website

118

Optimér rendering:Prioritize visible content

Hvad kan optimeres på dit website

119

11) – Ekstra

Avoid 3. party SPOF (scripts)

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

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

122

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

123

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

124

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

125

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

DEMO

126

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

127

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

128

Hvad kan optimeres på dit website

Se dig for når du implementerer 3. part JavaScript til social widgets

129

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

Facebook buttons == 270 Kb!

Parametre:

u : Sidens URL

130

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

131

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

Parametre:

url : Sidens URLtext : Valgfri teksthashtags : Kommaseparerede hashtagsVia : Via tekst

https://twitter.com/intent/tweet?url=http://www.eksempel.dk

&text=Performance

%20analyse&hashtags=fdih,digicure,webperf&via=digicuredk

132

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

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.digicure.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æveturl: URLtitle : Valgfri titelsource : Valgfri kildesummary : Valgfrit resumé

Parametre:

url : URL

134

Optimér rendering:Avoid 3. party SPOF (scripts)

Hvad kan optimeres på dit website

www.cdnperf.com

135

Hvor gode er I?

136

5 3

137

Opsummering

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

138

Performance analyse

Seminar deltagere

WebshopsOkt 2013

KommunerMarts 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

Og husk nu…

140

Performance optimering som en løbende process

141

Performance optimering - som en løbende proces

142

Fremtiden indenfor web performance

Hvor er vi på vej hen?

143

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder

De besøgendes forventninger

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

• Fokus på forespørgsler

• Fokus på websites indhold

• Nedsættes!

• Ikke svartider og tilgængelighed

Fremtiden indenfor web performance

”Performance budgettet”

146

Fremtiden indenfor web performance

”Performance budgettet”

• Sætter et budget

• Må ikke overskrides

• Antal forespørgsler og websites indhold

147

Fremtiden indenfor web performance

”Performance budgettet”

Eksempel:Instantalarm.dk

Antal forespørgsler: 30

Websites indhold: 350 KB

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

Fremtiden indenfor web performance

Fra desktop PC til..

150

Fremtiden indenfor web performance

Mobil performance

151

Adgang fra flere forskellige enheder

152

Fremtiden indenfor web performance

Det mobile netværk

Båndbredde

Latency

153

Fremtiden indenfor web performance

• D. 21. november

• Kl. 13:00 – 16:00

• Digicure.dk

154

Fremtiden indenfor web performance

155

Hvad kan jeg gøre for at få hurtigeresvartider på mit website?

Coming up:

Workshop: Webperformance X-ray

156

login.webperformancexray.com

157

158

159

160

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

161

Demo

Tak for i dag!

Tobias Borg Petersen,

mail: [email protected]: digicure.dk