www.digicure.dk instant@larm workshop 5. februar 2014 Få fuld udbytte af din investering i instant@larm 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 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
Performance afdelingen www.digicure.dk 5 medarbejdere Beskæftiger os med: Performance monitorering Performance test (load-, stress- og endurance-test) Performance audits (Webperformance X-ray) Rådgivning og andre konsulent opgaver Vores produkter 90 % selvudviklet 10 % software-in-a-box 4
Agenda Tobias Borg Petersen Hvorfor er god web performance vigtigt? Hvad er brugernes forventninger til svartider? Opsætning af KPI er. Hvilke KPI er er relevante? Hvordan laver jeg en SLA for performance? Hvilke typer værktøjer har jeg brug for? PAUSE instant@larm gennemgang PAUSE med sandwiches Tips til at øge performanceniveauet Web performance optimering som en løbende proces Eventuelle spørgsmål og tak for i dag 5
Fokus på web performance 6
Websites bliver langsommere og langsommere 7
Web performance Hvordan står det til i dag? Danske webshops Danske kommuner Kilde: http://www.digicure.dk/performance.html 8
Web performance Hvordan står det til i dag? 2000000 1600000 International 1.551 KB 1200000 800000 400000 Kilde: http://httparchive.org 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% 10
11
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 12
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/ 13
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/ 14
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 15
Web performance Hvorfor? Nedetider Nedetider kan koste dyrt Kilde: http://venturebeat.com/2013/08/19/amazon-website-down/ 16
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 17
De besøgendes forventninger 18
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 19
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 20
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 21
De besøgendes forventninger 1960 = <10 sekunder 2006 = <4 sekunder 2009 = <2 sekunder 2013 = <1 sekund Højere krav til performance 22
De besøgendes forventninger Hvis dit website er længere end 1 sekund om at blive vist, taber du allerede besøgende nu 23
De besøgendes forventninger Performance er en fundamental del af brugeroplevelsen på websitet! Brugeroplevelsen Højere krav til performance 24
De besøgendes forventninger Facebook sucks! Intuitive navigering Timelines elegance Svartiden! Brugeroplevelsen Højere krav til performance 25
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/ 26
Hvordan kommer man godt fra start 27
vordan kommer man godt fra start Fælles interesse 28
vordan kommer man godt fra start Driftsfolkene: - Reduceret belastning 29
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 30
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! 31
vordan kommer man godt fra start Web performance optimering - Return of Investment (ROI) 32
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 33
Opsætning af KPI er 34
vordan kommer man godt fra start KPI er Noget der kan måles på 35
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 36
vordan kommer man godt fra start Du kan ikke forbedre det du ikke måler på! Ikke i blinde! 37
Sådan laver du en SLA for performance niveauet 38
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 1 sekund. Til at starte med! Benchmark op imod konkurrenter Digicure Performance Index (DPI), www.digicure.dk 39
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 Connection time Oppetid (Download time) 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 40
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 svartid: 2,41 sek. (DPI over automobiler, juni 2012) Krav til Connection time: 0,3 sek. (Danmark), 0,7 sek. (USA), 0,9 sek. (Australien) Krav til svartid: 2 sek. (Danmark), 4 sek. (USA), 5 sek. (Australien) Krav til oppetid: 99,98 % (Danmark, USA og Australien) 41
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 Vigtige under udvikling af et website/applikation 42
Hvor skal jeg fokusere mine optimeringer? 43
Hvor skal jeg fokusere mine optimeringer? Dit websites svartider skal være hurtigere! 44
Båndbredde og svartider 45
Båndbredde og svartider Vil den stigende hastighed på båndbreddelinjerne løse vores problemer? NEJ! 46
Båndbredde og svartider 47
Båndbredde og svartider Båndredde og latency Båndbredde indikerer tykkelsen Latency indikerer transporttiden Transporttiden fra A til B = Latency 48
Båndbredde og svartider Fra Danmark 49
Latency = transporttiden fra A til B 50
Båndbredde og svartider Fra Danmark 51
Båndbredde og svartider Fra Danmark Fra Australien 52
Båndbredde og svartider Fra Danmark Fra Australien 53
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/ 54
Hvor skal jeg fokusere mine optimeringer? 55
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. 57
Hvor skal jeg fokusere mine optimeringer? Gør som Seatwave 58
Hvad er årsagen til dårlig web performance? 59
Hvad er årsagen til dårlig web performance? For meget indhold Tungt indhold som ikke er komprimeret korrekt Server konfigurationer 3. part komponenter 60
Hvad er årsagen til dårlig web performance? Indhold Applikation It-infratruktur Ansvarsområder 61
Hvad er årsagen til dårlig web performance? Web redaktører Webmasters E-commerce managers Ansvarsområde: - Indhold 62
Hvad er årsagen til dårlig web performance? Webbureauer Udviklings-hus In-house udvikling Ansvarsområde: - Applikation 63
Hvad er årsagen til dårlig web performance? Webhotel Hosting partner In-house hosting Ansvarsområde: - It-infrastruktur 64
Hvilke typer testværktøjer har jeg behov for? 65
Udvælg dine testværktøjer Monitorering Test Optimering Udvælg de rigtige værktøjer 66
Testværktøjer Web performance Svartider Tilgængelighed IKKE ping Brugernes oplevelse udefra 3. part monitorering Monitorering 67
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 68
Testværktøjer Web performance Real User Monitoring 69
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 70
Testværktøjer Web performance Synthetic Monitoring 71
Testværktøjer Web performance Synthetic Monitoring 72
Testværktøjer Anbefaling Synthetic Monitoring + Real User Monitoring 73
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 74
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 75
Testværktøjer Web performance Performance værktøjer 76
Udvælg dine testværktøjer Værktøjerne er på plads! 77
Hvordan kommer man godt fra start Coming up: Workshop: instant@larm 78
instant@larm
instant@larm
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 Digicure anbefaler som minimum: 1x URL-måling 1x Transaktions-måling
instant@larm
instant@larm Nye features i 2013 (3 opdateringer) Opdatering nr. 1 Internet Explorer 8 9 Opdatering nr. 2 Nye grafer Indtastning af SLA Webperformance X-ray scan Bestilling af målinger Live support-chat Opdatering nr. 3 HTTP forespørgsler på grafer URL størrelser på grafer instant@larm lokationer Hover hjælpe-menuer Nye features i 2014 (1-2 opdateringer) Opdatering nr. 1 Alarmering ved maks. antal HTTP-forespørgsler Alarmering ved maks. URL size Alarming ved brud på SLA Opdatering nr. 2 Opdatering af fejl-typer Opdatering af fejlbeskrivelser Webperformance X-ray score i rapporter
instant@larm Demo
instant@larm
Det nye 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
Hvad kan optimeres på dit website Reducér antallet af forespørgsler 92
1) Combinable JavaScript/CSS files 93
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: http://www.smartguy.dk 94
Hvad kan optimeres på dit website 95
Hvor gode er I? 96
3 9 97
2) Domain Sharding 98
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 99
Hvad kan optimeres på dit website 100
Hvor gode er I? 101
3 9 102
3) Caching (Expire Headers) 103
Hvad kan optimeres på dit website The fastest HTTP request is the one not made. Reducér forespørgsler: Caching (Expire Headers) 104
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: Caching (Expire Headers) Last-Modified løser næsten problemet Kilde: http://httparchive.org/ 105
Hvad kan optimeres på dit website Reducér forespørgsler: Caching (Expire Headers) 106
Hvad kan optimeres på dit website Reducér forespørgsler: Caching (Expire Headers) 107
Hvor gode er I? 108
6 6 109
Hvad kan optimeres på dit website Reducér indhold 110
4) Activate HTTP Compression 111
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 112
Hvad kan optimeres på dit website Reducér indhold: HTTP Compression 113
Hvor gode er I? 114
7 5 115
5) Optimise images 116
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 - http://jpegclub.org/jpegtran/ Webperformance X-ray Reducér indhold: Optimise images - JPEG 117
Hvad kan optimeres på dit website Reducér indhold: Optimise images - PNG 118
Hvad kan optimeres på dit website 879 kb ~94 % Reducér indhold: JPEG Candidate Images 45 kb URL: http://www.tryg.dk/media/boerneulykke-kampagne_220x420_75-15831.png PNG/GIF filer JPEG filer Reducering i størrelse Ulemper: Skarpe hjørner (logoer eller grafer) 119
Hvad kan optimeres på dit website Optimér rendering 120
Opsummering Combinable JavaScripts 3 9 Domain Sharding 3 9 Caching (Expire Headers) 6 6 HTTP Compression 7 5 121
Performance optimering som en løbende process 122
Performance optimering - som en løbende proces 123
Tak for i dag! Tobias Borg Petersen, mail: tbp@digicure.dk www: digicure.dk