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
www.digicure.dk

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

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

4. Disposition
Tobias Borg Petersen
4
• 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
• instant@larm workshop – Hvad kan instant@larm
hjælpe til med?

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

6. 6
Fokus på web performance

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

8. 8
Websites bliver langsommere
og langsommere…

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

10. 10Kilde: http://httparchive.org
International
1.551 KB
Danske
kommuner
991 KB
FDIH
medlemmer
1.229 KB
400000
800000
1200000
1600000
2000000
Web performance
Hvordan står det til i dag?

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

12. 12
Web performance
Hvordan står det til i dag?

13. 13
Kilde: http://blog.radware.com/wp-content/uploads/2013/07/Radware_SOTU_Summer2013_Infographic_Final-1.jpg
Web performance
Hvordan står det til i dag?

14. 14

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

16. 16
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
• 52 % af de adspurgte
brugere mener at hurtige
sidevisninger er vigtigt for
websites loyalitet
Web performance – Hvorfor?
Lavere bruger engagement

17. 17
• 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: http://blog.kissmetrics.com/loading-time/
Web performance – Hvorfor?
Lavere bruger engagement

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

19. 19
• Reducerede svartider med mellem 50-70 %
• Reducerede båndbredde forbruget med 43 %
• Reducerede DB CPU forbrug med 75 %
• Øgede maks. antallet af samtidige brugere med 300 %
Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Web performance – Hvorfor?
Tekniske gevinster

20. 20Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Nedetider kan koste dyrt
Web performance – Hvorfor?
Nedetider

21. 21
Søgeoptimering og lange svartider

22. 22
‘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: http://www.qubitproducts.com/wp-content/uploads/2012/04/Site-Speed-
Whitepaper1.pdf
Web performance – Hvorfor?
Search Engine Optimization (SEO)

23. 23
Web performance – Hvorfor?
Search Engine Optimization (SEO)
‘Google Recommends Mobile Websites Load in
One Second or Less’
Nu også på
mobile websites
Kilde: http://www.cmswire.com/cms/customer-experience/google-recommends-mobile-websites-load-in-
one-second-or-less-022080.php

24. 24
Båndbredde og svartider

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

26. 26
Båndbredde og svartider

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

28. 28
Båndbredde og svartider
Fra Holland Fra Australien

29. 29
Båndbredde og svartider
Fra Holland Fra Australien

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

31. 31
De besøgendes forventninger

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

33. 33
Forrester
Research
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

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

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

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

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

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

39. 39
Performance
is 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

40. 40
Hvordan kommer man godt fra start

41. 41
Fælles
interesse
Hvordan kommer man godt fra start

42. 42
Brug de
rette termer
Hvordan kommer man godt fra start

43. 43
Udviklerne:
- Optimering
Hvordan kommer man godt fra start

44. 44
Driftsfolkene:
- Reduceret belastning
Hvordan kommer man godt fra start

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

46. 46
Økonomi folkene:
- Lavere drift
omkostninger!
Hvordan kommer man godt fra start
• Reduceret båndbreddeforbrug
• Reduceret behov for server kraft
• Reduceret strømforbrug
• Reduceret CO2 udledning

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

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

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

50. 50
Opsætning af KPI’er

51. 51
Noget der
kan måles på
KPI’er
Hvordan kommer man godt fra start

52. 52
• 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
Hvordan kommer man godt fra start

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

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

55. 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)

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

57. 57
Sådan laver du en SLA for
performance niveauet – 3/4
Eksempel Service Level Agreement (SLA)
Webside: Forsiden af www.eksempel.dk
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)

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

59. 59
Når forretningen bliver global

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

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

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

63. 63
Spørgsmål til
udbyderen
• Supporteres de nødvendige fil
formater?
• Hvor er datacentrene geografisk
placeret?
• 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
Når forretningen bliver global

64. 64
Når forretningen bliver global

65. 65
www.cloudflare.com
Når forretningen bliver global

66. 66
Hvor skal jeg fokusere mine
optimeringer?

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

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

69. 69
Hvor skal jeg fokusere mine
optimeringer?

70. 70
“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?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

91. 91
Performance optimering
som en løbende process

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

93. 93
Hvordan kommer man godt fra start
Coming up:
Workshop: instant@larm

94. instant@larm

95. instant@larm
Performance monitorering
• Synthetic monitoring
• Uvildig 3. part monitoring
• 24/7/365
• SaaS løsning – ingen installation
• Alarmering pr. SMS og/eller e-mail
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. instant@larm
Step 1 – Gå til forside
Step 2 – Indtaster ’E-mail’
Step 3 – Indtaster ’Password’
Step 4 – Klikker ’Sign-in’ Step 5 – Klikker ’Sign Out’

97. instant@larm

98. instant@larm
Digicure anbefaler som minimum:
• 1x URL-måling
• 1x Transaktions-måling

99. instant@larm

100. instant@larm
Demo

101. Tak for i dag!
Tobias Borg Petersen,
mail: tbp@digicure.dk
www: digicure.dk