Web performance workshop 26. september 2013

Transkript

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

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 Hvorfor er web performance vigtigt? Hvad er brugernes forventninger til svartider? Søgeoptimering og lange svartider Opsætning af KPI er Hvordan laver jeg en SLA for performance? Når forretningen bliver global CDN Hvor skal jeg fokusere min optimeringer? Forskellige typer af testværktøjer Web performance optimering som en løbende proces WORKSHOP workshop Hvad kan hjælpe til med? 4

5 Fokus på web performance Fordi det kan betale sig Og fordi man har ikke råd til at lade være 5

6 Fokus på web performance 6

7 Fokus på web performance Hurtigere, hurtigere og hurtigere Internet forbindelser bliver hurtigere Computere bliver hurtigere Telefonerne bliver hurtigere Browserne bliver hurtigere Styresystemer bliver hurtigere Næsten 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? International KB Danske kommuner 991 KB FDIH medlemmer KB 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 Web performance Hvordan står det til i dag? 12

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

14 14

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

16 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: 16

17 Web performance Hvorfor? Lavere bruger engagement 3 ud af 4 online shoppere bliver stressede og irriterede ifm. handel på et langsomt website 1 ud af 5 af dem der før har forladt en indkøbskurv, var pga. et langsomt website Kilde: 17

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

19 Web performance Hvorfor? Tekniske gevinster Reducerede svartider med mellem % Reducerede båndbredde forbruget med 43 % Reducerede DB CPU forbrug med 75 % Øgede maks. antallet af samtidige brugere med 300 % Kilde: 19

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

21 Søgeoptimering og lange svartider 21

22 Web performance Hvorfor? Search Engine Optimization (SEO) Google suggests that any site taking longer than 1.5 seconds to load is slow and will consequently be relegated within their search engine ranking Kilde: Whitepaper1.pdf 22

23 Web performance Hvorfor? Search Engine Optimization (SEO) Google Recommends Mobile Websites Load in One Second or Less Nu også på mobile websites Kilde: 23

24 Båndbredde og svartider 24

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

26 Båndbredde og svartider 26

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

28 Båndbredde og svartider Fra Holland Fra Australien 28

29 Båndbredde og svartider Fra Holland Fra Australien 29

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

31 De besøgendes forventninger 31

32 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: 32

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

34 De besøgendes forventninger Forsinkelse Simple brugerinputs skal være besvaret inden 100 ms. For at engagere brugeren, skal en opgave udføres inden for 1 sekund 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: 34

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

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

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

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

39 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: 39

40 Hvordan kommer man godt fra start 40

41 vordan kommer man godt fra start Fælles interesse 41

42 vordan kommer man godt fra start Brug de rette termer 42

43 vordan kommer man godt fra start Udviklerne: - Optimering 43

44 vordan kommer man godt fra start Driftsfolkene: - Reduceret belastning 44

45 vordan kommer man godt fra start Længere besøgstid Bedre søgerangering Øget konverteringsrater Øget antal sidevisninger Lavere bounce rate Marketing og salg: Større brugertilfredshed! - Øget aktivitet på websitet 45

46 vordan kommer man godt fra start Reduceret båndbreddeforbrug Reduceret behov for server kraft Reduceret strømforbrug Reduceret CO 2 udledning Økonomi folkene: - Lavere drift omkostninger! 46

47 vordan kommer man godt fra start Web performance optimering - Return of Invesment (ROI) 47

48 vordan kommer man godt fra start Website design og udvikling Vedligeholdelsesomkostninger Driftsomkostninger Marketing ecommerce software Performance optimering øger ROI for alle punkter! Du bruger allerede penge på din tilstedelseværelse på Internettet 48

49 Hvorfor gør vi ikke mere ved performance? 49

50 Opsætning af KPI er 50

51 vordan kommer man godt fra start KPI er Noget der kan måles på 51

52 vordan kommer man godt fra start Konverteringsrater Køb af varer, tilmeldelse til nyhedsbreve Sidevisninger Antal sidevisninger per minut en bruger genererer Besøgstid på website Tiden brugerne tilbringer på websitet Bounce rate Hvor mange brugere hopper fra Tilgængelighed Nedetider hvor websitet ikke er tilgængeligt Svartider Hvor hurtigt får brugerne vist sidevisningerne 52

53 vordan kommer man godt fra start Du kan ikke forbedre det du ikke måler på! Ikke i blinde! 53

54 Sådan laver du en SLA for performance niveauet 54

55 Sådan laver du en SLA for performance niveauet 1/4 Klar og tydelig X : Websitet skal være hurtigt X : Websites forside skal være hentet inden for 2 sekunder : Websites forside skal være hentet inden for 2 sekunder, målt fra Danmark. Målingerne skal foretages i tidsrummet 08:00 16:00 Vær realistisk Hvis websitet er 8 sekunder om at blive hentet, skal kravet ikke være 3 sekunder. Benchmark imod konkurrenter Digicure Performance Index (DPI) 55

56 Sådan laver du en SLA for performance niveauet 2/4 Hvilke sider er en del af SLA en? Forside, produktside, checkout-flow, kontaktside, søgning Udvælg performance metrics Connection time Download time Oppetid Udvælg lokationer hvorfra målingerne skal foretages Lokalt og/eller globalt? Hvad er dine brugeres forventninger? Brugerundersøgelse Vælg browsertype Mobil Desktop 56

57 Sådan laver du en SLA for performance niveauet 3/4 Eksempel Service Level Agreement (SLA) Webside: Forsiden af Lokationer: Danmark, USA og Australien Browsertype: Desktop Internet Explorer 9 Værktøj: instant@larm Gennemsnitlig svartider: 2,41 sek. (DPI over automobiler, juni 2012) Krav til svartid: 2 sek. (Danmark), 4 sek. (USA), 5 sek. (Australien) Krav til oppetid: 99,98 % (Danmark, USA og Australien) 57

58 Sådan laver du en SLA for performance niveauet 4/4 SMART Specific, Measureable, Attainable, Realistic and Time bound Revurdér en SLA løbende Monitorér dine konkurrenter Foretag løbende brugerundersøgelser Sørg for at monitorere performance niveauet Også selvom det ser godt ud! Gør brugerne opmærksomme på at der arbejdes hen imod højt performance niveau 58

59 Når forretningen bliver global 59

60 Når forretningen bliver global CDN, Content Delivery Network 60

61 Når forretningen bliver global Smart-route teknologi Komponenter placeret geografisk tættere på brugeren Typisk statiske Fordele: Reducering af trafik Større skalérbarhed 61

62 Når forretningen bliver global Hvilke fil formater skal du have hosted? Hvor kommer dine brugere fra? (geografiske lokationer) Hvad er trafikken på nuværende tidspunkt? Hvordan vælger jeg den rette CDN udbyder? Få styr på dit behov! Hvad forventer man af fremtidig trafik? Og ikke mindst.. Lyt ikke til rygter! CDN er stadig en forholdsvis ny teknologi 62

63 Når forretningen bliver global Supporteres de nødvendige fil formater? Hvor er datacentrene geografisk placeret? Spørgsmål til udbyderen Hvordan bliver man faktureret? Er der en SLA for performance? Oppetid Netværk og server Svartider Fra flere geografiske lokationer Kompentation Ikke kun pr. minuts nedetid 63

66 Hvor skal jeg fokusere mine optimeringer? 66

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

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

69 Hvor skal jeg fokusere mine optimeringer? 69

70 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: 70

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

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

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

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

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

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

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

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

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

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

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

82 Hvilke typer testværktøjer har jeg behov for? 82

83 Udvælg dine testværktøjer Monitorering Test Optimering Udvælg de rigtige værktøjer 83

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

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

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

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

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

89 Næste gang.. Størst effekt Mindste arbejdsbyrde Udvælg dine optimeringer med omhu 89

90 Gratis seminar - Hvad kan jeg gøre for at få hurtigere svartider på mit website? Oktober Desktop Optimering November Mobil optimering 90

91 Performance optimering som en løbende process 91

92 Performance optimering - som en løbende proces 92

93 Hvordan kommer man godt fra start Coming up: Workshop: 93

94

95 Performance monitorering Synthetic monitoring Uvildig 3. part monitoring 24/7/365 SaaS løsning ingen installation Alarmering pr. SMS og/eller Simulering af en reel brugeradfærd Målt udefra bag firewall, load balancers, LAN Simulerer Internet Explorer 9 Screenshot/HTML capture Typer af målinger URL-måling Inkl. mobile enheder FTP-måling SMTP-måling PING-måling CITRIX-måling Transaktions-måling

96 Step 1 Gå til forside Step 2 Indtaster Step 3 Indtaster Password Step 4 Klikker Sign-in Step 5 Klikker Sign Out