www.digicure.dk Web performance workshop 26. september 2013 Monitorering Hvordan kommer jeg godt fra start med web performance Tobias Borg Petersen, Performancekonsulent fra Digicure A/S
Hvem er jeg Tobias Borg Petersen Performancekonsulent i Digicure Front End udvikler (.NET) tbp@digicure.dk Webperformance.nu/blog @_tobibp dk.linkedin.com/in/tobiasbp 2
Stiftet i 2003 www.digicure.dk 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 3
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 instant@larm workshop Hvad kan instant@larm hjælpe til med? 4
Fokus på web performance Fordi det kan betale sig Og fordi man har ikke råd til at lade være 5
Fokus på web performance 6
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
Websites bliver langsommere og langsommere 8
Web performance Hvordan står det til i dag? Danske webshops Danske kommuner 9
Web performance Hvordan står det til i dag? 2000000 1600000 International 1.551 KB 1200000 800000 Danske kommuner 991 KB FDIH medlemmer 1.229 KB 400000 Kilde: http://httparchive.org 10
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
Web performance Hvordan står det til i dag? 12
Web performance Hvordan står det til i dag? Kilde: http://blog.radware.com/wp-content/uploads/2013/07/radware_sotu_summer2013_infographic_final-1.jpg 13
14
Web performance Hvorfor? Lavere bruger engagement 20 %.. mindre trafik blot ved at øge svartiden med 500 ms. 15
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: http://blog.kissmetrics.com/loading-time/ 16
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: http://blog.kissmetrics.com/loading-time/ 17
Web performance Hvorfor? Økonomiske gevinster GlassesDirect.co.uk Kilde: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7- loss-in-customer-conversions/ 18
Web performance Hvorfor? Tekniske gevinster 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 19
Web performance Hvorfor? Nedetider Nedetider kan koste dyrt Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf 20
Søgeoptimering og lange svartider 21
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: http://www.qubitproducts.com/wp-content/uploads/2012/04/site-speed- Whitepaper1.pdf 22
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-inone-second-or-less-022080.php 23
Båndbredde og svartider 24
Båndbredde og svartider Men vil den stigende hastighed på båndbreddelinjerne ikke løse vores problemer? NEJ! 25
Båndbredde og svartider 26
Båndbredde og svartider Båndredde og latency Båndbredde indikerer tykkelsen Latency indikerer transporttiden Transporttiden fra A til B = Latency 27
Båndbredde og svartider Fra Holland Fra Australien 28
Båndbredde og svartider Fra Holland Fra Australien 29
Båndbredde og svartider Lysets hastighed er en begrænsning Læg kortere kabler 450 millioner kroner per sparet ms. Kilde: http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/ Løsning: Flyt indholdet tættere på og reducér antallet af forespørgsler 30
De besøgendes forventninger 31
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: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-fleeslow-loading-sites.html?pagewanted=all&_r=0 32
De besøgendes forventninger 2006 = 4 sekunder 2006 og 2009 2009 = 2 sekunder Forrester Research Kilde: Kilde: http://www.getelastic.com/performance/ http://www.akamai.com/html/about/press/releases/2009/press_091409.html 33
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 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 Kilde: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-fleeslow-loading-sites.html?pagewanted=all&_r=0 34
De besøgendes forventninger 1960 = <10 sekunder 2006 = <4 sekunder 2009 = <2 sekunder 2013 = <1 sekund Højere krav til performance 35
De besøgendes forventninger Hvis dit website er længere end 1 sekund om at blive vist, taber du allerede besøgende nu 36
De besøgendes forventninger Performance er en fundamental del af brugeroplevelsen på websitet! Brugeroplevelsen Højere krav til performance 37
De besøgendes forventninger Facebook sucks! Intuitive navigering Timelines elegance Svartiden! Brugeroplevelsen Højere krav til performance 38
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: http://bradfrostweb.com/blog/post/performance-as-design/ 39
Hvordan kommer man godt fra start 40
vordan kommer man godt fra start Fælles interesse 41
vordan kommer man godt fra start Brug de rette termer 42
vordan kommer man godt fra start Udviklerne: - Optimering 43
vordan kommer man godt fra start Driftsfolkene: - Reduceret belastning 44
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
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
vordan kommer man godt fra start Web performance optimering - Return of Invesment (ROI) 47
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
Hvorfor gør vi ikke mere ved performance? 49
Opsætning af KPI er 50
vordan kommer man godt fra start KPI er Noget der kan måles på 51
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
vordan kommer man godt fra start Du kan ikke forbedre det du ikke måler på! Ikke i blinde! 53
Sådan laver du en SLA for performance niveauet 54
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
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
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) 57
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
Når forretningen bliver global 59
Når forretningen bliver global CDN, Content Delivery Network 60
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
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
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
Når forretningen bliver global 64
Når forretningen bliver global www.cloudflare.com 65
Hvor skal jeg fokusere mine optimeringer? 66
Hvor skal jeg fokusere mine optimeringer? Dit websites svartider skal være hurtigere! 67
Hvor skal jeg fokusere mine optimeringer? Dit website skal på slankekur.. 68
Hvor skal jeg fokusere mine optimeringer? 69
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: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ 70
Hvor skal jeg fokusere mine optimeringer? Reducering af antal HTTP forespørgsler Reducering af website indholdet
Hvor skal jeg fokusere mine optimeringer? Reducering af antal HTTP forespørgsler 72
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
Hvor skal jeg fokusere mine optimeringer? Optimér websitet Køb ikke mere hardware 500 kb 90 req. 250 kb 45 req. 74
Hvor skal jeg fokusere mine optimeringer? Gør som Seatwave 75
Hvad er årsagen til dårlig web performance? 76
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
Hvad er årsagen til dårlig web performance? Indhold Applikation It-infratruktur Ansvarsområder 78
Hvad er årsagen til dårlig web performance? Web redaktører Webmasters E-commerce managers Ansvarsområde: - Indhold 79
Hvad er årsagen til dårlig web performance? Webbureauer Udviklings-hus In-house udvikling Ansvarsområde: - Applikation 80
Hvad er årsagen til dårlig web performance? Webhotel Hosting partner In-house hosting Ansvarsområde: - It-infrastruktur 81
Hvilke typer testværktøjer har jeg behov for? 82
Udvælg dine testværktøjer Monitorering Test Optimering Udvælg de rigtige værktøjer 83
Testværktøjer Web performance Svartider Tilgængelighed IKKE ping Brugernes oplevelse udefra 3. part monitorering Monitorering 84
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
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
Testværktøjer Web performance Performance værktøjer 87
Udvælg dine testværktøjer Værktøjerne er på plads! 88
Næste gang.. Størst effekt Mindste arbejdsbyrde Udvælg dine optimeringer med omhu 89
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 90
Performance optimering som en løbende process 91
Performance optimering - som en løbende proces 92
Hvordan kommer man godt fra start Coming up: Workshop: instant@larm 93
instant@larm
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
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
instant@larm
instant@larm Digicure anbefaler som minimum: 1x URL-måling 1x Transaktions-måling
instant@larm
instant@larm Demo
Tak for i dag! Tobias Borg Petersen, mail: tbp@digicure.dk www: digicure.dk