www.digicure.dk God performance er god kundeservice 7. maj 2014 Session 1 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 Kontor i Lyngby 22 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
Agenda Tobias Borg Petersen Morgenmad Velkomst v/ Jesper Helbrandt, direktør Digicure A/S Introduktion til hvorfor web performance er vigtigt Opsætning af KPI er og SLA er inden for web performance Hvor skal man fokusere sine optimeringer? Hvor er effekten størst? Hvilke typer af værktøjer har man behov for? God web performance på de mobile enheder. Hvordan? 4
Fokus på web performance 5
Hvorfor er performance vigtigt? 6
Hvorfor er performance vigtigt? 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 Kilde: http://www.digicure.dk/performance.html 9
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% Kilde: http://www.digicure.dk/performance.html 10
Web performance Hvordan står det til i dag? 2000000 1600000 International 1.590 KB 1200000 800000 400000 Kilde: http://httparchive.org 11
Web performance Hvordan står det til i dag? Svartid Tilgængelighed Kilde: http://httparchive.org Kilde: http://www.digicure.dk/performance.html 12
Web performance Hvordan står det til i dag? Kommuner Mar 2013 Webshops Okt 2013 International (httparchive.org) Forespørgsler 62 req. 80 req. 94 req. Størrelse 991 KB 1.229 KB 1590 KB Potentiel Besparelse (størrelse) 38 % 19 % -- 13
14
Web performance Hvorfor? Lavere bruger engagement 20 %.. mindre trafik blot ved at øge svartiden med 500 ms. Kilde: http://velocityconf.com/velocity2009/public/schedule/detail/8523 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 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 19
Web performance Hvorfor? Nedetider Nedetider kan koste dyrt Kilde: http://venturebeat.com/2013/08/19/amazon-website-down/ 20
Web performance Hvorfor? Search Engine Optimization (SEO) Søgeoptimering og lange svartider 21
Web performance Hvorfor? Search Engine Optimization (SEO) An SEO expert walks into a bar, bars, pub, tavern, public house, Irish pub, drinks, beer, alcohol 22
Web performance Hvorfor? Search Engine Optimization (SEO) 1.5 seconds == SLOW Kilde: http://www.qubitproducts.com/wp-content/uploads/2012/04/site-speed- Whitepaper1.pdf 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-inone-second-or-less-022080.php 24
De besøgendes forventninger 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: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-fleeslow-loading-sites.html?pagewanted=all&_r=0 26
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 27
De besøgendes forventninger 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 Kilde: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-fleeslow-loading-sites.html?pagewanted=all&_r=0 28
De besøgendes forventninger 1960 = <10 sekunder 2006 = <4 sekunder 2009 = <2 sekunder 2013 = <1 sekund Højere krav til performance 29
De besøgendes forventninger Hvis dit website er længere end 1 sekund om at blive vist, taber du allerede besøgende nu 30
De besøgendes forventninger Performance er en fundamental del af brugeroplevelsen på websitet! Brugeroplevelsen Højere krav til performance 31
De besøgendes forventninger Facebook sucks! Intuitive navigering Timelines elegance Svartiden! Brugeroplevelsen Højere krav til performance 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: http://bradfrostweb.com/blog/post/performance-as-design/ 33
Hvordan kommer man godt fra start 34
vordan kommer man godt fra start Fælles interesse 35
vordan kommer man godt fra start Driftsfolkene: - Reduceret belastning 36
vordan kommer man godt fra start Lavere bounce rate Øget antal sidevisninger Længere besøgstid Bedre søgerangering Øget konverteringsrater Marketing og salg: Større brugertilfredshed! - Øget aktivitet på websitet 37
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! 38
vordan kommer man godt fra start Web performance optimering - Return of Investment (ROI) 39
vordan kommer man godt fra start Website design og udvikling Driftsomkostninger Marketing ecommerce software Performance optimering øger ROI for alle punkter! Du bruger massevis af penge på din tilstedeværelse på Internettet 40
Opsætning af KPI er 41
vordan kommer man godt fra start KPI er Noget der kan måles på 42
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 Apdex En indikation på om der bliver leveret acceptable svartider 43
vordan kommer man godt fra start Svartider Time To First Byte, TTFB Tiden det tager at forbinde til webserveren Time To Render, TTR Tiden det tager at vise det første visuelle af websitet Document Complete Tiden det tager onload() at bliver udført Fully Loaded Tiden det tager at hente alt indhold på siden Requests Antallet af forespørgsler som websitet består af Pagesize Mængden af data som er at finde på websitet 44
vordan kommer man godt fra start Apdex Værdi mellem 0,00 1,00 1,00 er det højst opnåelige Apdex = Tilfredsstillende forespørgsler + (Acceptable forespørgsler/2) Total antal forespørgsler Eksempel: Tilfredsstillende forespørgsler = <1 sek. Document Complete Acceptable forespørgsler == 1-2 sek. Document Complete Uacceptable forespørgsler == >2 sek. Document Complete 45
vordan kommer man godt fra start Svartider og Apdex Svartider og Apdex ved generelle sideindlæsninger Tiden det tager at forbinde til webserveren Svartider og Apdex for forretningskritiske funktioner Login, køb af vare eller udfyldning af formular Testopsætning Side-typer (forside, produktside, osv.) Geografiske målelokationer Browsertype Måleværktøj Benchmarking, DPI 46
vordan kommer man godt fra start Du kan ikke forbedre det du ikke måler på! Ikke i blinde! 47
Sådan laver du en SLA for performance niveauet 48
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 have en Time-To-First-Byte tid under 300 ms. og Document Complete på under 2 sekunder. Der skal måles fra Danmark. Målingerne skal foretages i tidsrummet 08:00 16:00 med en Internet Explorer Browser 9. Måleværktøjet er instant@larm. Vær realistisk Hvis websitet er 8 sekunder om at blive hentet, skal kravet ikke være 1 sekund. Benchmark op imod konkurrenter Digicure Performance Index (DPI), www.digicure.dk 49
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 metrikker Time-To-First-Byte, TTFB Oppetid (Time-To-Render, TTR Document Complete Fully Loaded) Udvælg lokationer hvorfra målingerne skal foretages Lokalt og/eller globalt? Hvad er dine brugernes forventninger? Brugerundersøgelse Case studies Vælg browsertype Mobil Desktop 50
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 Document Complete: 2,41 sek. (DPI over automobiler) Krav til TTFB: 0,3 sek. (Danmark), 0,7 sek. (USA), 0,9 sek. (Australien) Krav til Document Complete: 2 sek. (Danmark), 4 sek. (USA), 5 sek. (Australien) Krav til oppetid: 99,98 % (Danmark, USA og Australien) 51
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 Performance SLA er er vigtige under udvikling af websites/applikationer 52
Når forretningen bliver global 53
Når forretningen bliver global CDN, Content Delivery Network 54
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 55
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 56
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 Kompensering Ikke kun pr. minuts nedetid 57
Når forretningen bliver global HUSK! Monitorér CDN performance 58
Performance optimering kræver en strategi 59
Performance optimering kræver en strategi $ 1. Identificér en forretningskritisk funktion på websitet 2. Definér målemetoden og succeskriterierne 3. Mål det nuværende performance niveau 4. Optimér performance niveauet 5. Indkassér fortjenesten 60
Performance optimering kræver en strategi Igen og igen og igen.. $ 61
Hvor skal jeg fokusere mine optimeringer? 62
Hvor skal jeg fokusere mine optimeringer? Dit websites svartider skal være hurtigere! 63
Båndbredde og svartider 64
Båndbredde og svartider Vil den stigende hastighed på båndbreddelinjerne løse vores problemer? NEJ! 65
Båndbredde og svartider 66
Båndbredde og svartider Båndredde og latency Båndbredde indikerer tykkelsen Latency indikerer transporttiden Transporttiden fra A til B == Latency 67
Båndbredde og svartider Fra Danmark 68
Latency == transporttiden fra A til B Båndbredde 69
Båndbredde og svartider Fra Danmark 70
Båndbredde og svartider Fra Danmark Fra Australien 71
Båndbredde og svartider Fra Danmark Fra Australien 72
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 73
Båndbredde og svartider Streaming er begrænset af båndbredde Web browsing er begrænset af latency 74
Hvor skal jeg fokusere mine optimeringer? What s Steve Souders saying! 75
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 76
Back End: 13 % Front End: 87 % Back End: 20 % Front End: 80 % Back End: 11 % Front End: 89 % Back End: 16 % Front End: 84 % Back End: 13 % Front End: 87 % Back End: 23 % Front End: 77 % Back End: 15 % Front End: 85 % Back End: 6 % Front End: 94 % 77
Hvor skal jeg fokusere mine optimeringer? Reducering af antal HTTP forespørgsler
Hvor skal jeg fokusere mine optimeringer? 79
Hvor skal jeg fokusere mine optimeringer? Reducering af antal HTTP forespørgsler Reducering af website indholdet
Hvor skal jeg fokusere mine optimeringer? Optimér websitet Køb ikke mere hardware 500 kb 90 req. 250 kb 45 req. 81
Hvor skal jeg fokusere mine optimeringer? Gør som Seatwave 82
Hvad er årsagen til dårlig web performance? 83
Hvad er årsagen til dårlig web performance? For mange forespørgsler Tungt indhold som ikke er komprimeret korrekt Server konfigurationer 3. part komponenter 84
Hvad er årsagen til dårlig web performance? Indhold Applikation It-infratruktur Ansvarsområder 85
Hvad er årsagen til dårlig web performance? Web redaktører Webmasters E-commerce managers Ansvarsområde: - Indhold 86
Hvad er årsagen til dårlig web performance? Webbureauer Udviklings-hus In-house udvikling Ansvarsområde: - Applikation 87
Hvad er årsagen til dårlig web performance? Webhotel Hosting partner In-house hosting Ansvarsområde: - It-infrastruktur 88
Hvilke typer testværktøjer har man behov for? 89
Udvælg dine testværktøjer Monitorering Test Optimering Udvælg de rigtige værktøjer 90
Testværktøjer Web performance Svartider Tilgængelighed IKKE kun ping Brugernes oplevelse udefra 3. part monitorering Monitorering 91
Testværktøjer Web performance Synthetic Monitoring Trend spotting Fast testopsætning: Software Hardware Netværk Alarmer Simulering af user-flow Tilgængeligheds monitorering Real User Monitoring Data fra brugernes browsers Stor mængde data IKKE fra Safari, Opera, IE8, Blackberry og Android 2.3 Man har ingen indflydelse på: Netværk Hardware Andet software installeret hos brugerne Ingen data når brugerne sover 92
Testværktøjer Web performance Real User Monitoring 93
Testværktøjer Web performance Real User Monitoring <script> _gaq.push(['_setaccount','ua-xxxx-x']); _gaq.push(['_setsitespeedsamplerate', 100]); // #protip _gaq.push(['_trackpageview']); </script> Google Analytics >> Content >> Site Speed Automatisk opsamling af data standard er kun 1% af besøgene Maksimalt 10.000 sidevisninger/day 94
Testværktøjer Web performance Synthetic Monitoring 95
Testværktøjer Web performance Synthetic Monitoring 96
Testværktøjer Anbefaling Synthetic Monitoring + Real User Monitoring 97
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 98
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 99
Testværktøjer Web performance Performance værktøjer 100
WebPageTest.org 101
WebPageTest.org 102
WebPageTest.org 103
WebPageTest.org 104
WebPageTest.org 105
WebPageTest.org 106
WebPageTest.org 107
Waterfall charts typer 108
Manglende caching 109
Langsom Back-End 110
Redirect 111
Langsom Redirect 112
Manglende filer 113
Manglende Keep-Alive 114
Langsom og blokerende fil 115
Store filer 116
For mange filer 117
Langsom Time-To-Render 118
Udvælg dine testværktøjer Værktøjerne er på plads! 119
God web performance på de mobile enheder 120
Performance på mobile enheder Fra desktop PC til.. 121
Performance på mobile enheder Mobil performance 122
Performance på mobile enheder Kilde: http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6 123
Performance på mobile enheder Land Mobile-only brugere Egypten 70 % Indien 59 % Sydafrika 57 % Indonesien 44 % USA 25 % Kilde: ondevice Research 124
Der er flere der har adgang til mobiltelefon, end adgang til rindende vand og tandbørster Kilde: http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets 125
Performance på mobile enheder 126
Er de mobile brugere mere tålmodige? 127
85 % af de mobile bruger forventer at mobile sites loader lige så hurtigt eller hurtigere end desktop sites Kilde: http://www.strangeloopnetworks.com/web-performance-infographics/ 128
Performance på mobile enheder 129
Performance på mobile enheder 130
75 % af de mobile brugere vil forlade et website, hvis det tager længere end 5 sekunder at få indholdet vist 131
Hvad skal man være opmærksom på når man skal levere god performance på det mobile netværk? 132
Performance på mobile enheder Afstand Vejret Retning mod radiomast Belastning på radiomast Kilde: http://www.webperformancetoday.com/2013/08/06/8-mobile-performanceassumptions/ 13 3
Performance på mobile enheder Fra Holland Fra Australien 4G Netværket - Under the hood 13 4
Performance på mobile enheder Fra Holland Fra Australien 4G Netværket - Vil gøre livet nemmere LTE/4G 3G Idle tilstand < 100 ms < 2,5 sek. 13 5
Performance på mobile enheder Fra Holland Fra Australien Samlet latency Idle Edge 670-830 ms +2,5 sek. 3G 120-280 ms +2,5 sek. 4G 65-86 ms +100 ms Desktop 10-30 ms - 4G Netværket - Vil gøre livet nemmere Kilde: https://docs.google.com/presentation/d/1waxb5dpnrcelwbgo6lcous_s1rp24lmqa8m1exedro/present#slide=id.g11c1373c5_5_0 13 6
Båndbredde og svartider Fra Danmark Fra Australien 13 7
Performance på mobile enheder Fra Holland Fra Australien OpenSignal.com 13 8
Performance på mobile enheder Samlet latency Idle Edge 670-830 ms +2,5 sek. 3G 120-280 ms +2,5 sek. 4G 65-86 ms +100 ms Desktop 10-30 ms - TDC Telia Telenor 3 Idle Edge 994 ms 1109 ms 1294 ms 930 ms +2,5 sek. 3G 437 ms 280 ms 399 ms 317 ms +2,5 sek. 4G 76 ms 223 ms 90 ms 162 ms +100 ms 4G Netværket - Vil gøre livet nemmere Kilde: https://docs.google.com/presentation/d/1waxb5dpnrcelwbgo6lcous_s1rp24lmqa8m1exedro/present#slide=id.g11c1373c5_5_0 13 9
Performance på mobile enheder 4G er ikke tilgængelig for os alle endnu 3G netværket forsvinder ikke foreløbigt Hvad kan vi gøre ved det? Websites størrelse Antal forespørgsler (VIGTIG) 4G Netværket - Vil gøre livet nemmere Løsninger: Reducér mængden af data Reducér antallet af forespørgsler Komprimering Caching 14 0
Opsummering 1/2 Hvad har vi gennemgået? Introduktion til hvorfor web performance er vigtigt Cases, SEO og svartider Brugernes forventning Hvordan kommer man godt fra start Opsætning af KPI er og SLA er inden for web performance Hvilke KPI er har web performance indflydelse på Hvilke SLA er har man mulighed for at opsætte Hvordan specificerer man en SLA SLA er for CDN udbydere Performance optimering kræver en strategi Performance optimering som en løbende proces 14 1
Opsummering 2/2 Hvad har vi gennemgået? Hvor skal man fokusere sine optimeringer? Hvor er effekten størst? Båndbredde og svartider Reducér forespørgsler og indhold Hvilke typer af værktøjer har man behov for? Monitorering, test og optimering instant@larm og WebPageTest.org God web performance på de mobile enheder. Hvordan? Mobil brugernes stigende trafik og forventninger 3G /4G netværket og latency 14 2
Google har altid ret know that speed is product feature - Larry Page (Google Founder)
Tobias Borg Petersen, mail: tbp@digicure.dk www: digicure.dk
145
instant@larm
instant@larm Performance monitorering Synthetic monitoring Uvildig 3. part 24/7/365 overvågning SaaS løsning ingen installation Alarmering pr. SMS og/eller e-mail Simulering af en reel brugeradfærd Målt udefra foran firewall, load balancers, LAN Simulerer Internet Explorer 9 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
instant@larm
Det nye instant@larm
instant@larm
instant@larm
Det nye instant@larm Nye måle metrikker Time-to-render, TTR Document Complete/Fully Loaded Cashed vs. Non-Cashed Speed Index Fejlfinding (Debug-mode) Video optagelse HAR-fil generator Screenshots ved fejl Andet Helt nyt design og teknisk platform Automatisk oprettelse af målinger Valg af browsertype API Mobil app
signup.instantalarm.dk
Gratis demo i 2 måneder