digicure seminar | web performance monitorering

Web performance workshop26. september 2013

Monitorering

Hvordan kommer jeg godt fra start med web performance

Tobias Borg Petersen,Performancekonsulent fra Digicure A/S

www.digicure.dk

Hvem er jegTobias Borg Petersen

@_tobibp

tbp@digicure.dk

Webperformance.nu/blog

Performancekonsulent i Digicure

Front End udvikler (.NET)

dk.linkedin.com/in/tobiasbp

www.digicure.dk

• 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

DispositionTobias 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?

Fokus på web performance

Fordi det kan betale sig

Og fordi man har ikke råd til at lade være

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

Websites bliver langsommere og langsommere…

Danske webshops Danske kommuner

Web performanceHvordan står det til i dag?

10Kilde: http://httparchive.org

400000

800000

1200000

1600000

2000000International

1.551 KB

Danskekommuner

991 KB

FDIHmedlemmer

1.229 KB

Flash1%

CSS5% HTML

JavaScript20%

Andet4%Billeder

Flash2%

CSS4% HTML

JavaScript22%

Andet3%

Billeder64%

Danske webshops Danske kommuner

13Kilde: http://blog.radware.com/wp-content/uploads/2013/07/Radware_SOTU_Summer2013_Infographic_Final-1.jpg

20 %.. mindre trafik blot ved at øge svartiden med 500 ms.

Web performance – Hvorfor? Lavere bruger engagement

16Kilde: 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

• 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

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

• 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

20Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf

Nedetider kan koste dyrt

Web performance – Hvorfor?Nedetider

Søgeoptimering og lange svartider

‘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)

‘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

Båndbredde og svartider

Men vil den stigende hastighed på båndbreddelinjerne ikke løse vores problemer?

• Båndredde og latency

• Båndbredde indikerer ‘tykkelsen’• Latency indikerer transporttiden • Transporttiden fra A til B = Latency

Båndbredde og svartiderFra Holland Fra Australien

Fra Holland Fra Australien

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

De besøgendes forventninger

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

ForresterResearch

2006 = 4 sekunder

2006 og 2009 2009 = 2 sekunder

Kilde: http://www.getelastic.com/performance/

Kilde: http://www.akamai.com/html/about/press/releases/2009/press_091409.html

• 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

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder

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

Performance er en fundamental del af brugeroplevelsen på websitet!

Brugeroplevelsen

”Facebook sucks!”

• Intuitive navigering

• Timelines elegance

• Svartiden!

Brugeroplevelsen

Performanceis 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/

Hvordan kommer man godt fra start

Fælles interesse

Brug de rette termer

Udviklerne: - Optimering

Driftsfolkene: - Reduceret belastning

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!

Økonomi folkene:- Lavere drift omkostninger!

• Reduceret båndbreddeforbrug

• Reduceret behov for server kraft

• Reduceret strømforbrug

• Reduceret CO2 udledning

Web performance optimering - Return of Invesment (ROI)

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!

Hvorfor gør vi ikke mere ved performance?

Opsætning af KPI’er

Noget der kan måles på

KPI’er

• 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

Ikke i blinde!

Du kan ikke forbedre det du ikke måler på!

Sådan laver du en SLA for performance niveauet

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)

• 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

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)

• 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

Når forretningen bliver global

CDN,Content Delivery Network

• Smart-route teknologi

• Komponenter placeret geografisk tættere på brugeren

• Typisk statiske

Fordele:

• Reducering af trafik

• Større skalérbarhed

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

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

www.cloudflare.com

Hvor skal jeg fokusere mine optimeringer?

Dit websites svartider skal være hurtigere!

Dit website skal på slankekur..

“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/

• Reducering af antal HTTP forespørgsler

• Reducering af website indholdet

Reducering af antal HTTP forespørgsler

Reducering af antal websites indhold

500 kb

250 kb

4 sek. svartid

2 sek. svartid

250 kb

2 sek. svartid

Optimér websitet – Køb ikke mere hardware

500 kb90 req.

250 kb45 req.

Gør som Seatwave

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

Indhold

Ansvarsområder

Applikation

It-infratruktur

Ansvarsområde: - Indhold

• Web redaktører

• Webmasters

• E-commerce managers

Ansvarsområde: - Applikation

• Webbureauer

• Udviklings-hus

• In-house udvikling

Ansvarsområde: - It-infrastruktur

• Webhotel

• Hosting partner

• In-house hosting

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

Udvælg de rigtige værktøjer

Monitorering

Optimering

Udvælg dine testværktøjer

• Svartider

• Tilgængelighed

• IKKE ping

• Brugernes oplevelse udefra

• 3. part monitorering

Monitorering

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

Performance optimering

• Lokalisér potentielle optimeringstiltag

• Udbedre ’flaskehalse’

• Reducér svartider

• Reducér båndbreddeforbrug

• Reducér belastning på it-infrastruktur

Performance værktøjer

Værktøjerne er på

plads!

Udvælg dine testværktøjer

Udvælg dine optimeringer med omhu

Størst effekt

Mindste arbejdsbyrde

Næste gang..

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

Performance optimering som en løbende process

Performance optimering - som en løbende proces

Coming up:

Workshop: 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@larmStep 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

Digicure anbefaler som minimum:

• 1x URL-måling• 1x Transaktions-måling

instant@larm

Tak for i dag!

Tobias Borg Petersen,

mail: tbp@digicure.dkwww: digicure.dk

digicure seminar | web performance monitorering

Technology

medicinordination på hospitaler - rhpharm.org · warfarin...

performance gear microphones...

performance management system -...

behandling og monitorering av akutt hjertesvikt og... ·...

performance managerユーザガイド(performance monitor...

cp performance - performance marine parts, boat parts

ciclo integrato della performance. indice il ciclo delle...

flow yh - lymfoid - hematology.dk boe... · på afvigende...

profit performance stabilitÉ profit performance …

performance play: consumo como performance no …

archive as performance, performance as archive

performance managerユーザガイド(performance...

patofysiologien bag traume-induceret … ·...

mÅl & strategi mjØndalen...

ca application performance management application...

pprom - præterm primær vandafgang forfattere...der findes...

haemodynamisk monitorering och underliggande fysiologiska...

hvornår går jeg i fødsel bachelorprojekt tine og...

monitorering af vækst hos 0-5-årige børn - vejledning til

erfaringsopsamling, koncept og guide · 2.1 metode cowi har...