1. instant@larm workshop
5. februar 2014
Få fuld udbytte af din investering i instant@larm
Tobias Borg Petersen,
Performancekonsulent fra Digicure A/S
www.digicure.dk
2. Hvem er jeg
Tobias Borg Petersen
2
@_tobibp
tbp@digicure.dk
Webperformance.nu/blog
Performancekonsulent i Digicure
Front End udvikler (.NET)
dk.linkedin.com/in/tobiasbp
3. www.digicure.dk
3
• Stiftet i 2003
• 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
4. www.digicure.dk
4
• Performance afdelingen
• 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
5. Agenda
Tobias Borg Petersen
5
• 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
12. 12
20 %
.. mindre trafik blot ved at øge svartiden med
500 ms.
Web performance – Hvorfor?
Lavere bruger engagement
Kilde: http://velocityconf.com/velocity2009/public/schedule/detail/8523
13. 13Kilde: 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
19. 19
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
De besøgendes forventninger
20. 20
Forrester
Research
2006 = 4 sekunder
2006 og 2009 2009 = 2 sekunder
Kilde: http://www.getelastic.com/performance/
De besøgendes forventninger
Kilde: http://www.akamai.com/html/about/press/releases/2009/press_091409.html
23. 23
Hvis dit website er længere end
1 sekund om at blive vist,
taber du allerede besøgende nu
De besøgendes forventninger
24. 24
Performance er en fundamental del af
brugeroplevelsen på websitet!
Brugeroplevelsen
De besøgendes forventninger
Højere krav
til performance
25. 25
”Facebook sucks!”
• Intuitive navigering
• Timelines elegance
• Svartiden!
De besøgendes forventninger
Brugeroplevelsen
Højere krav
til performance
26. 26
Performance
is 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/
De besøgendes forventninger
30. 30
Marketing og salg:
- Øget aktivitet
på websitet
• Lavere bounce rate
• Øget antal sidevisninger
• Længere besøgstid
• Bedre søgerangering
• Øget konverteringsrater
• Større brugertilfredshed!
Hvordan kommer man godt fra start
31. 31
Økonomi folkene:
- Lavere drift
omkostninger!
Hvordan kommer man godt fra start
• Reduceret båndbreddeforbrug
• Reduceret behov for server kraft
• Reduceret strømforbrug
• Reduceret CO2 udledning
33. 33
Du bruger massevis af penge
på din tilstedeværelse på
Internettet
Hvordan kommer man godt fra start
• Website design og udvikling
• Driftsomkostninger
• Marketing
• eCommerce software
Performance optimering
øger ROI for alle punkter!
36. 36
• 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
Hvordan kommer man godt fra start
39. 39
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
40. 40
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
41. 41
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)
42. 42
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
48. 48
Båndbredde og svartider
Båndredde og latency
• Båndbredde indikerer ‘tykkelsen’
• Latency indikerer transporttiden
• Transporttiden fra A til B = Latency
54. 54
“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/
Hvor skal jeg fokusere mine
optimeringer?
60. 60
For meget indhold
Tungt indhold som ikke
er komprimeret korrekt
Server konfigurationer
3. part komponenter
Hvad er årsagen til dårlig
web performance?
67. 67
• Svartider
• Tilgængelighed
• IKKE ping
• Brugernes oplevelse udefra
• 3. part monitorering
Monitorering
Testværktøjer – Web performance
68. 68
Testværktøjer – Web performance
Real User MonitoringSynthetic 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
• Trend spotting
• Fast testopsætning:
• Software
• Hardware
• Netværk
• Alarmer
• Simulering af user-flow
• Tilgængeligheds monitorering
70. 70
Testværktøjer – Web performance
<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
Real User Monitoring
74. 74
• 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
Testværktøjer – Web performance
87. 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 fejl-
beskrivelser
• Webperformance X-ray score
i rapporter
instant@larm
91. 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
Det nye instant@larm
94. 94
URL: http://www.smartguy.dk
• Dyre HTTP forespørgsler
• Længere svartider
• Større belastning på
infrastrukturen
• Effektiv komprimering
Reducér forespørgsler:
Combinable
JavaScript/CSS files
Hvad kan optimeres på dit website
104. 104
“The fastest HTTP request is the one not made.”
Reducér forespørgsler:
Caching (Expire Headers)
Hvad kan optimeres på dit website
105. 105
“The fastest HTTP request is the one not made.”
Kilde: http://httparchive.org/
Reducér forespørgsler:
Caching (Expire Headers)
• Caching Headers
• Pas på med dynamiske
komponenter
• Indfør versionsnumre
o Javascript_v01.js
o Javascript_v02.js
• Last-Modified løser
næsten problemet
Hvad kan optimeres på dit website
112. 112
• Komprimering af:
HTML, CSS og JavaScript
• Ikke billeder, videoer
eller PDF’er
• Konfiguration på
webserver
• Load balancer problem
Uden gzip/deflate
Med gzip/deflate
Reducér indhold:
HTTP Compression
Hvad kan optimeres på dit website
117. 117
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
Hvad kan optimeres på dit website
124. Tak for i dag!
Tobias Borg Petersen,
mail: tbp@digicure.dk
www: digicure.dk
Editor's Notes
#7:Når man ser på alle dem som understøtter og er med til at skabe fundamentet for at vi overhovedet har adgang til informationer på nettet er der en ting der går igen
HASTIGHED
#20:http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
invented the BASIC programming language
#21:http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
invented the BASIC programming language
#22:Responsive Web Design
Internettet kan tilgås og interageres på op til flere forskellige enheder
PC’er, mobiltelefoner, tablets
Internettets evner til at blive tilgået på flere typer og hastigheder af netværk
Båndbredde, latency, mobil netværk, osv.
Web performance har stor betydning for brugeroplevelse
Cases som KISSMetrics, GlassesDirect og Seatwave
#23:Responsive Web Design
Internettet kan tilgås og interageres på op til flere forskellige enheder
PC’er, mobiltelefoner, tablets
Internettets evner til at blive tilgået på flere typer og hastigheder af netværk
Båndbredde, latency, mobil netværk, osv.
Web performance har stor betydning for brugeroplevelse
Cases som KISSMetrics, GlassesDirect og Seatwave
#24:http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
invented the BASIC programming language
#31:Længere besøgstid
Bedre søgerangering
Øget konverteringsrater
Øget antal sidevisninger
Lavere bounce rate
Større brugertilfredshed!
#37:Konverteringsrater
Køb af varer, tilmeldelse til nyhedsbreve
Sidevisninger
Antal sidevisninger per minut en brugerne besøger
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
#62:Content
Web redaktører, ecommerce managers
Application
Webbureauer, udviklingshuse, in-house development
Infrastructure
Hosting partner, webhotel, driftfolk
#63:Content
Web redaktører, ecommerce managers
Application
Webbureauer, udviklingshuse, in-house development
Infrastructure
Hosting partner, webhotel, driftfolk
#64:Content
Web redaktører, ecommerce managers
Application
Webbureauer, udviklingshuse, in-house development
Infrastructure
Hosting partner, webhotel, driftfolk
#65:Content
Web redaktører, ecommerce managers
Application
Webbureauer, udviklingshuse, in-house development
Infrastructure
Hosting partner, webhotel, driftfolk
#68:Svartider
Tilgængelighed
IKKE ping
Brugernes oplevelse udefra
3. part monitorering
#69:Svartider
Tilgængelighed
IKKE ping
Brugernes oplevelse udefra
3. part monitorering
#70:Svartider
Tilgængelighed
IKKE ping
Brugernes oplevelse udefra
3. part monitorering
#71:Svartider
Tilgængelighed
IKKE ping
Brugernes oplevelse udefra
3. part monitorering
#72:Svartider
Tilgængelighed
IKKE ping
Brugernes oplevelse udefra
3. part monitorering
#73:Svartider
Tilgængelighed
IKKE ping
Brugernes oplevelse udefra
3. part monitorering
#74:Svartider
Tilgængelighed
IKKE ping
Brugernes oplevelse udefra
3. part monitorering
![70
Testværktøjer – Web performance
<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
Real User Monitoring](https://image.slidesharecdn.com/iaworkshopfinal-140615110446-phpapp02/85/instant-larm-workshop-Digicure-70-320.jpg)
