Hvem er jeg Tobias Borg Petersen

Transkript

1

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

5 Fokus på web performance 5

6 Fokus på web performance 6

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

8 Websites bliver langsommere og langsommere 8

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

10 Web performance Hvordan står det til i dag? Kilde: 10

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

12 12

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

14 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 52 % af de adspurgte brugere mener at hurtige sidevisninger er vigtigt for websites loyalitet Kilde: 14

15 Web performance Hvorfor? Økonomiske gevinster GlassesDirect.co.uk Kilde: loss-in-customer-conversions/ 15

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

17 Web performance Hvorfor? Nedetider Nedetider kan koste dyrt Kilde: 17

18 Web performance Hvorfor? Search Engine Optimization (SEO) 1.5 seconds == SLOW Kilde: Whitepaper1.pdf 18

19 Båndbredde og svartider 19

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

21 Båndbredde og svartider 21

22 Båndbredde og svartider Båndredde og latency Båndbredde == Tykkelsen Latency == Transporttiden 22

23 Båndbredde og svartider Lysets hastighed er en begrænsning Læg kortere kabler 450 millioner kroner per sparet ms. Kilde: Løsning: Flyt indholdet tættere på og reducér antallet af forespørgsler 23

24 De besøgendes forventninger 24

25 De besøgendes forventninger We found, that any response time that averages more than 10 seconds, destroys the illusion of having one s own computer 1960 erne John Kemeny & Thomas Kurtz Kilde: 25

26 De besøgendes forventninger 2006 = 4 sekunder 2006 og = 2 sekunder Forrester Research Kilde: Kilde:

27 De besøgendes forventninger Forsinkelse Brugerens reaktion ms. Instant/øjebklikkelig ms. En mindre forsinkelse ms. Fortsat fokus på opgave 1 sek. + Mental fokus forsvinder 10 sek. + Jeg kommer tilbage senere.. hvis det sker Kilde: 27

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

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

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

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

32 De besøgendes forventninger Respect your user s time and they will be more likely to walk away with a positive experience. Brat Frost Performance is about respect Kilde: 32

33 Hvordan indlæser browseren et website 33

34 Link: 34

35 35

36 36

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

38 38

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

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

41 Hvor skal jeg fokusere mine optimeringer? 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 Back End: 16 % Front End: 84 % Back End: 31 % Front End: 69 % Back End: 9 % Front End: 91 % Back End: 11 % Front End: 79 % Back End: 4 % Front End: 96 % Back End: 8 % Front End: 92 % Værktøj: Back End: 11 % Front End: 89 % Back End: 13 % Front End: 87 % 42

43 43

44 44

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

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

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

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

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

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

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

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

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

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

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

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

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

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

59 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 59

60 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 60

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

62 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 62

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

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

65 1) Combinable JavaScript/CSS files 65

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

67 Hvad kan optimeres på dit website 67

68 Hvor gode er I? 68

69 1 7 69

70 2) Domain Sharding 70

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

72 Hvad kan optimeres på dit website 72

74 1 7 74

75 3) Caching (Expire Headers) 75

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

77 Hvad kan optimeres på dit website 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: 1) Caching (Expire Headers) Last-Modified løser næsten problemet Kilde: 77

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

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

81 6 2 81

82 4) Content Delivery Network (CDN) 82

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

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

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

92 0 8 92

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

94 5) Activate HTTP Compression 94

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

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

98 3½ 4½ 98

99 6) Minify JavaScript/CSS-files 99

100 Hvad kan optimeres på dit website /* 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 100

101 Hvad kan optimeres på dit website YUI Compressor, Java baseret command line - developer.yahoo.com/yui/compressor/ CSS Tidy - Webperformance X-ray - Reducér indhold: Minify JavaScript/CSS-files 101

102 6) Optimise images 102

103 Hvad kan optimeres på dit website 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: Optimise images - JPEG 103

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

105 7) JPEG Candidate Images 105

106 Hvad kan optimeres på dit website ImageMagick.org 879 kb ~94 % Reducér indhold: JPEG Candidate Images 45 kb URL: PNG/GIF filer JPEG filer Reducering i størrelse Ulemper: Skarpe hjørner (logoer eller grafer) 106

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

108 8) CSS in top / JavaScript at bottom 108

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

111

112 9) Apply Image Tag Dimensions 112

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

114 10) Prioritize visible content 114

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

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

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

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

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

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

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

131 Hvad kan optimeres på dit website &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 131

133 Hvad kan optimeres på dit website 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 133

136

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 part SPOF

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

139 Og husk nu 139

140 Performance optimering som en løbende process 140

141 Performance optimering - som en løbende proces 141