instant@larm - Breakfast Meeting
Hvem er jeg Tobias Borg Petersen Performancekonsulent i Digicure Front End udvikler (.NET) tbp@digicure.dk @_tobibp dk.linkedin.com/in/tobiasbp 2
Agenda Breakfast Meeting Hvorfor er god web performance vigtigt? Og hvad er brugernes forventninger til svartider? Hvad skal man fokusere på, for at få et hurtigere website? Opsætning af KPI'er - Hvilke KPI'er er relevante inden for web performance? Og hvordan opsætter jeg SLA er i instant@larm? Gennemgang af den nye instant@larm portal Web performance optimering - som en løbende proces Tips til at øge performanceniveauet og derved få hurtigere svartider Spørgsmål og diskussion 3
Hvorfor er god web performance vigtigt? 4
5
Web performance Hvorfor? Lavere bruger engagement 20 %.. mindre trafik blot ved at øge svartiden med 500 ms. 6
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/ 7
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/ 8
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/ 9
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 10
Web performance Hvorfor? Nedetider Nedetider kan koste dyrt Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf 11
Søgemaskineoptimering og lange svartider 12
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 13
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 14
Web performance Hvorfor? Search Engine Optimization (SEO) 15
De besøgendes forventninger 16
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 17
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 18
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 19
De besøgendes forventninger 1960 = <10 sekunder 2006 = <4 sekunder 2009 = <2 sekunder 2014 = <1 sekund Højere krav til performance 20
De besøgendes forventninger Hvis dit website er længere end 1 sekund om at blive vist, taber du allerede besøgende nu 21
De besøgendes forventninger Performance er en fundamental del af brugeroplevelsen på websitet! Brugeroplevelsen Højere krav til performance 22
De besøgendes forventninger Facebook sucks! Intuitive navigering Timelines elegance Svartiden! Brugeroplevelsen Højere krav til performance 23
Hvor skal man fokusere sine optimeringer? 24
Båndbredde og svartider 25
Båndbredde og svartider Men vil den stigende hastighed på båndbreddelinjerne ikke løse vores problemer? NEJ! 26
Båndbredde og svartider 27
Båndbredde og svartider Båndredde og latency Båndbredde indikerer tykkelsen Latency indikerer transporttiden Transporttiden fra A til B = Latency 28
Båndbredde og svartider Fra Holland Fra Australien 29
Båndbredde og svartider Fra Holland Fra Australien 30
Båndbredde og svartider 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/indhold Kilde: http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/ 31
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 33
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 34
Hvor skal jeg fokusere mine optimeringer? Optimér websitet Køb ikke mere hardware 500 kb 90 req. 250 kb 45 req. 35
Hvor skal jeg fokusere mine optimeringer? Gør som Seatwave 36
Opsætning af KPI er 37
vordan kommer man godt fra start KPI er Noget der kan måles på 38
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 Performance/Svartider Hvor hurtigt får brugerne vist sidevisningerne 39
vordan kommer man godt fra start Du kan ikke forbedre det du ikke måler på! Ikke i blinde! 40
Sådan laver du en SLA for performance niveauet 41
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), dpi.digicure.dk 42
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 Time To First Byte Start Render Time Load Time Fully Loaded Time Oppetid Udvælg lokationer hvorfra målingerne skal foretages Lokalt og/eller globalt? Vælg browsertype Mobil Desktop 43
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 Firefox vers. 38 Værktøj: instant@larm Gennemsnitlig Load time: 2,41 sek. (DPI over automobiler, juni 2012) Krav til Load time: 2 sek. (Danmark), 4 sek. (USA), 5 sek. (Australien) Krav til Oppetid: 99,98 % (Danmark, USA og Australien) 44
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 45
Det nye
De nye Måletyper eller Monitoring Jobs
instant@larm Browser Monitoring Web Transaction Monitoring Uptime Monitoring Måler hvert 5. minut Simulering vha. rigtig browser Måler på 1x URL Performance metrikker: Time To First Byte, Start Render Time, Load time, Fully Loaded Time, Request, Page Size og Availability Måler hvert 15. minut Simulering vha. rigtig browser Måler på 1x User-Flow Performance metrikker: Load time og Availability Måler hvert 1. minut GET/POST/PATCH/UPDATE/HEAD forespørgsler Måler på 1x URL Performance metrikker: Availability
instant@larm Måletyper/Jobs Gamle instant@larm URL Check-måling Web Transaction-måling FTP-måling SMTP-måling CITRIX-måling Nye instant@larm Browser Monitoring Job Uptime Monitoring Job Web Transaction Monitoring Job i fremtiden Windows Transaction Job CITRIX-måling FTP SMTP
Den nye portal
instant@larm Flere kommer til..
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm instant@larm Performance Metrikker Browser Monitoring Time To First-Byte (sec.), Start Render Time (sec.), Load Time (sec.), Fully Loaded Time (sec.), Availability (%)
instant@larm Nye metrikker for Browser Monitoring Time To First-Byte, TTFB Start Render Time Load Time Document Complete Fully Loaded Time asynkrone forespørgsler reklamer, web analytics, osv. i fremtiden Cashed vs. Non-Cashed Speed Index Apdex Score
instant@larm Time To First Byte Start Render Time Load Time Fully Loaded Time
instant@larm instant@larm Performance Metrikker Browser Monitoring Time To First-Byte (sec.), Start Render Time (sec.), Load Time (sec.), Fully Loaded Time (sec.), Availability (%) Uptime Monitoring Availability (%) Web Transaction Monitoring Response Time (sec., complete flow), Availability (%)
instant@larm
instant@larm
instant@larm Alt info på én side Browser Monitoring Job
instant@larm Uptime Monitoring
instant@larm Web Transaction Monitoring
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm Browser Monitoring Job
instant@larm Web Transaction Monitoring Job
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm Dashboard Statistics
instant@larm
instant@larm Browser Monitoring Job
instant@larm Browser Monitoring Job
instant@larm Browser Monitoring Job
instant@larm Browser Monitoring Job
instant@larm Uptime Monitoring Job
instant@larm Uptime Monitoring Job
instant@larm Uptime Monitoring Job
instant@larm Uptime Monitoring Job
instant@larm Uptime Monitoring Job
instant@larm Web Transaction Monitoring Job
instant@larm Browser + Uptime + Web Transaction Monitoring Job
instant@larm Browser + Uptime + Web Transaction Monitoring Job
instant@larm Browser + Uptime + Web Transaction Monitoring Job
instant@larm Browser + Uptime + Web Transaction Monitoring Job
instant@larm Browser + Uptime + Web Transaction Monitoring Job
instant@larm Browser + Uptime + Web Transaction Monitoring Job
instant@larm
instant@larm
instant@larm
instant@larm
instant@larm API til instant@larm Browser /api/[api-key]/browser/alljobstatus /api/[api-key]/browser/alljobs /api/[api-key]/browser/jobstatus /api/[api-key]/browser/joblocation /api/[api-key]/browser/jobinfo /api/[api-key]/browser/changestatus /api/[api-key]/browser/slastatus /api/[api-key]/browser/events /api/[api-key]/browser/report /api/[api-key]/browser/thresholdalarms /api/[api-key]/browser/alarmlog /api/[api-key]/browser/createjob Uptime /api/[api-key]/uptime/alljobstatus /api/[api-key]/uptime/alljobs /api/[api-key]/uptime/jobstatus /api/[api-key]/uptime/changestatus /api/[api-key]/uptime/slastatus /api/[api-key]/uptime/jobinfo /api/[api-key]/uptime/report /api/[api-key]/uptime/events /api/[api-key]/uptime/thresholdalarms /api/[api-key]/uptime/alarmlog /api/[api-key]/uptime/createjob
instant@larm API til instant@larm Web Transaction /api/[api-key]/uptime/alljobstatus /api/[api-key]/uptime/alljobs /api/[api-key]/uptime/jobstatus /api/[api-key]/uptime/changestatus /api/[api-key]/uptime/slastatus /api/[api-key]/uptime/jobinfo /api/[api-key]/uptime/report /api/[api-key]/uptime/events /api/[api-key]/uptime/thresholdalarms /api/[api-key]/uptime/alarmlog
instant@larm API til instant@larm
instant@larm Android App [ios og Windows Phone er på vej] LINK https://play.google.com/store/apps/details?id=com.digicure.instantalarm
instant@larm
instant@larm Nye fremtidige features Video optagelse HAR-fil generator Screenshots ved fejl Valg af browsertype Ændre målelokation Tilføj målelokation Note ved ændringer Public dashboard Custom Metrics Gruppering af Monitoring Jobs Mobil app API udvidelse Sitecore plugin Wordpress plugin Slow label overvågning Google Safe API overvågning
Feedback ønskes, tak! 126
instant@larm SSL Monitor i instant@larm
instant@larm SSL Monitor i instant@larm
instant@larm RBL Monitor i instant@larm Kommer snart..
Tips til at øge performanceniveauet på dit website 130
Hvad kan optimeres på dit website Reducér antallet af forespørgsler 131
1) Combinable JavaScript/CSS files 132
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 133
Hvad kan optimeres på dit website 134
Hvor gode er I? 135
4 3 136
2) Caching (Expire Headers) 137
Hvad kan optimeres på dit website The fastest HTTP request is the one not made. Reducér forespørgsler: 1) Caching (Expire Headers) 138
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: 1) Caching (Expire Headers) Last-Modified løser næsten problemet Kilde: http://www.httparchive.org/ 139
Hvad kan optimeres på dit website Reducér forespørgsler: 1) Caching (Expire Headers) 140
Hvad kan optimeres på dit website Reducér forespørgsler: 1) Caching (Expire Headers) 141
Hvor gode er I? 142
5 2 143
Hvad kan optimeres på dit website Reducér indhold 144
3) Activate HTTP Compression 145
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 146
Hvad kan optimeres på dit website Reducér indhold: HTTP Compression 147
Hvor gode er I? 148
2 5 149
4) Minify JavaScript/CSS-files 150
Hvad kan optimeres på dit website /* Highlight */ #content table tr.sfhover, #content table tr.sfhover td { background-color: #b5dff3; color: #000 } /* Selected */ /* This always takes precedence over highlight color! */ #content table.ledger tr.selected td, #content table tr.selected td { background-color: #4775d1; color: #fff; border-left: 1px solid #346dbe; border-bottom: 1px solid #7daaea } Not Minified #content table tr.sfhover,#content table tr.sfhover td{backgroundcolor:#b5dff3;color:#000}#content table.ledger tr.selected td,#content table tr.selected td{background-color:#4775d1;color:#fff;border-left:1px Minified solid #346dbe;border-bottom:1px solid #7daaea} Reducér indhold: Minify JavaScript/CSS-files 151
Hvad kan optimeres på dit website YUI Compressor, Java baseret command line - developer.yahoo.com/yui/compressor/ CSS Tidy - http://csstidy.sourceforge.net/ Webperformance X-ray - http://www.digicure.dk/webperformance-x-ray.html Reducér indhold: Minify JavaScript/CSS-files 152
5) Optimise images 153
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 154
Hvad kan optimeres på dit website Reducér indhold: Optimise images - PNG 155
6) JPEG Candidate Images 156
Hvad kan optimeres på dit website ImageMagick.org 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) 157
Hvad kan optimeres på dit website Optimér rendering 158
7) CSS in top / JavaScript at bottom 159
Hvad kan optimeres på dit website CSS i toppen <head> <link rel= stylesheet href= style.css type= text/css /> </head> JavaScript i toppen JavaScript i bunden Optimér rendering: CSS i toppen og JavaScript i bunden 160
Hvor gode er I? 161
2 5 162
8) Avoid 3. party SPOF (scripts) 163
Hvad kan optimeres på dit website DNS Load Balancers App Servers Read-only DB Master DB Optimér rendering: Avoid 3. party SPOF (scripts) 164
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 165
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 166
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 167
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 168
Hvad kan optimeres på dit website DEMO Optimér rendering: Avoid 3. party SPOF (scripts) 169
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 170
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 171
Hvad kan optimeres på dit website Se dig for når du implementerer 3. part JavaScript til social widgets 172
Hvad kan optimeres på dit website Facebook buttons == 270 Kb! https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fwww.digicure.dk/cdn-whitepaper.html Optimér rendering: Avoid 3. party SPOF (scripts) Parametre: u : Sidens URL 173
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) Link: http://www.digicure.dk/whitepaper-cdn.html 174
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 175
Hvad kan optimeres på dit website https://twitter.com/intent/tweet?url=http://www.eksempel.dk &text=performance%20analyse&hashtags=fdih,digicure,webperf&via=d igicuredk Optimér rendering: Avoid 3. party SPOF (scripts) Parametre: url : Sidens URL text : Valgfri tekst hashtags : Kommaseparerede hashtags Via : Via tekst 176
Hvad kan optimeres på dit website Optimér rendering: Avoid 3. party SPOF (scripts) 177
Hvad kan optimeres på dit website http://www.linkedin.com/sharearticle?mini=true&url=http://www.dig icure.dk&title=performance analyse&source=digicure&summary=i analysen har Digicure udf%f8rt performance-checks p%e5 505 FDIH medlemmers websites forside, og benchmarket dem ift. hinanden. Parametre: mini=true : Påkrævet url: URL title : Valgfri titel source : Valgfri kilde summary : Valgfrit resumé https://plus.google.com/share?url=http://digicure.dk Parametre: url : URL 178
Hvad kan optimeres på dit website www.cdnperf.com Optimér rendering: Avoid 3. party SPOF (scripts) 179
Hvor gode er I? 180
5 2 181
Opsummering Combinable JavaScripts 4 3 Caching 5 2 HTTP Compression 2 5 CSS i top/javascript i bund 2 5 3. part SPOF 5 2 182
Performance analyse Breakfast Meeting September Breakfast Meeting Juni Seminar deltagere Webshops Okt 2014 Kommuner Marts 2014 International (httparchive.org, okt 2014) Forespørgsler 79 req. 70 req. 82 req. 80 req. 62 req. 94 req. Størrelse 1681 KB 1781 KB 1639 KB 1.229 KB 991 KB 1590 KB Potentiel Besparelse (størrelse) 26,9 % 24,7 % 20,5 % 19 % 38 % -- 183
Og husk nu 184
Performance optimering som en løbende process 185
Performance optimering - som en løbende proces 186
Spørgsmål!