Upload
tobias-borg-petersen
View
57
Download
0
Tags:
Embed Size (px)
Citation preview
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
2
@_tobibp
Webperformance.nu/blog
Performancekonsulent i Digicure
Front End udvikler (.NET)
dk.linkedin.com/in/tobiasbp
www.digicure.dk
3
• 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
4
• Hvordan indlæser browseren et website• Front End vs. Back End optimering• Hvilke parametre skal man fokusere på, for at reducere svartider?• Hvilke værktøjer findes der inden for web performance optimering• Top 10 web performance optimerings tiltag• Content Delivery Network (CDN) – Tips til websites som ofte bliver
tilgået fra udlandet• Hvad byder fremtiden på? Hvad er de næste udfordringer?• ’Performance budgettet’
WORKSHOPWebperformance X-ray: Få scannet dit website og få et par tips med hjem i tasken
10Kilde: http://httparchive.org
400000
800000
1200000
1600000
2000000International
1.551 KB
Danskekommuner
991 KB
FDIHmedlemmer
1.229 KB
Web performanceHvordan står det til i dag?
11
Flash1%
CSS5% HTML
3%
JavaScript20%
Andet4%Billeder
67%
Flash2%
CSS4% HTML
5%
JavaScript22%
Andet3%
Billeder64%
Web performanceHvordan står det til i dag?
Danske webshops Danske kommuner
13
20 %.. mindre trafik blot ved at øge svartiden med 500 ms.
Web performance – Hvorfor? Lavere bruger engagement
Kilde: http://blog.kissmetrics.com/speed-is-a-killer/
14Kilde: 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
15
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
16
• 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
Web performance – Hvorfor?Tekniske gevinster
17Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Nedetider kan koste dyrt
Web performance – Hvorfor?Nedetider
18
1.5 seconds == SLOW
Kilde: http://www.qubitproducts.com/wp-content/uploads/2012/04/Site-Speed-Whitepaper1.pdf
Web performance – Hvorfor?Search Engine Optimization (SEO)
20
Men vil den stigende hastighed på båndbreddelinjerne ikke løse vores problemer?
NEJ!
Båndbredde og svartider
22
Båndbredde og svartider
• Båndredde og latency
• Båndbredde == “Tykkelsen”
• Latency == Transporttiden
23
Båndbredde og svartider
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
25
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
26
ForresterResearch
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
27Kilde: 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
De besøgendes forventninger
28
Højere krav til performance
2006 = <4 sekunder
2009 = <2 sekunder
2013 = <1 sekund
1960 = <10 sekunder
De besøgendes forventninger
29
Hvis dit website er længere end 1 sekund om at blive vist, taber du allerede besøgende nu
De besøgendes forventninger
30
Performance er en fundamental del af brugeroplevelsen på websitet!
Brugeroplevelsen
De besøgendes forventninger
Højere krav til performance
31
”Facebook sucks!”
• Intuitive navigering
• Timelines elegance
• Svartiden!
De besøgendes forventninger
Brugeroplevelsen
Højere krav til performance
32
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/
De besøgendes forventninger
34Link: http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html
41
“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?
42
Back End: 16 % – Front End: 84 % Back End: 31 % – Front End: 69 % Back End: 9 % – Front End: 91 %
Back End: 8 % – Front End: 92 %Back End: 4 % – Front End: 96 %Back End: 11 % – Front End: 79 %
Back End: 11 % – Front End: 89 % Back End: 13 % – Front End: 87 %
Værktøj:www.webpagetest.org
• Reducering af antal HTTP forespørgsler
• Reducering af website indholdet
Hvor skal jeg fokusere mine optimeringer?
47
Reducering af antal websites indhold
500 kb
250 kb
4 sek. svartid
2 sek. svartid
250 kb
2 sek. svartid
Hvor skal jeg fokusere mine optimeringer?
48
Optimér websitet – Køb ikke mere hardware
500 kb90 req.
250 kb45 req.
Hvor skal jeg fokusere mine optimeringer?
51
For meget indhold
Tungt indhold som ikke er komprimeret korrekt
Server konfigurationer
Spidsbelastninger med høj trafik
Netværks latency
3. part komponenter
Hvad er årsagen til dårlig web performance?
53
Ansvarsområde: - Indhold
• Web redaktører
• Webmasters
• E-commerce managers
Hvad er årsagen til dårlig web performance?
54
Ansvarsområde: - Applikation
• Webbureauer
• Udviklings-hus
• In-house udvikling
Hvad er årsagen til dårlig web performance?
55
Ansvarsområde: - It-infrastruktur
• Webhotel
• Hosting partner
• In-house hosting
Hvad er årsagen til dårlig web performance?
58
• Svartider
• Tilgængelighed
• IKKE ping
• Brugernes oplevelse udefra
• 3. part monitorering
Monitorering
Testværktøjer – Web performance
59
• 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
60
Performance optimering
• Lokalisér potentielle optimeringstiltag
• Udbedre ’flaskehalse’
• Reducér svartider
• Reducér båndbreddeforbrug
• Reducér belastning på it-infrastruktur
Testværktøjer – Web performance
62
YSlow plugin PageSpeed plugin Webperformance X-ray
Antal performance checks 23 31 400+
Mobil specifikke performance checks
Nej Nej Ja
Omfang 1 URL 1 URL Hele websitet
Administrationsmodul Nej Nej Ja, op til flere brugere
PDF rapporter Nej Nej Ja, 14 forskelligeSammenligning af scanninger
Nej Nej Ja
API Ja Ja JaDansk support Nej Nej Ja
Testværktøjer – Web performance
66URL: http://www.smartguy.dk
• Dyre HTTP forespørgsler• Længere svartider• Større belastning på
infrastrukturen
• Effektiv komprimeringReducér forespørgsler:Combinable
JavaScript/CSS files
Hvad kan optimeres på dit website
71
Reducér forespørgsler:Domain Sharding
• 6 åbne forbindelse ad gangen
• Per domæne
• Statiske komponenter
• Cookie-less domæner
Hvad kan optimeres på dit website
76
“The fastest HTTP request is the one not made.”
Reducér forespørgsler:1) Caching (Expire Headers)
Hvad kan optimeres på dit website
77
“The fastest HTTP request is the one not made.”
Kilde: http://www.httparchive.org/
Reducér forespørgsler:1) Caching (Expire Headers)
• Caching Headers
• Pas på med dynamiske komponenter!
• Indfør versionsnumreo Javascript_v01.jso Javascript_v02.js
• Last-Modified løser næsten problemet
Hvad kan optimeres på dit website
84
• Smart-route teknologi
• Komponenter placeret geografisk tættere på brugeren
• Typisk statiske
Fordele:
• Reducering af trafik
• Større skalérbarhed
Hvad kan optimeres på dit website
90
www.cloudflare.com
Hvad kan optimeres på dit website
Reducér forespørgsler:Content Delivery Network (CDN)
95
• 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
100
Reducér indhold:Minify JavaScript/CSS-files
/* 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
}
#content table tr.sfhover,#content table tr.sfhover td{background-color:#b5dff3;color:#000}#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}
Minified
Not Minified
Hvad kan optimeres på dit website
101
Reducér indhold:Minify JavaScript/CSS-files
• 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
Hvad kan optimeres på dit website
103
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
106
URL: http://www.tryg.dk/media/boerneulykke-kampagne_220x420_75-15831.png
Reducér indhold:JPEG Candidate Images
879 kb
ImageMagick.org
• PNG/GIF filer JPEG filer
• Reducering i størrelse
Ulemper:• Skarpe hjørner (logoer
eller grafer)
45 kb~94 %
Hvad kan optimeres på dit website
109
JavaScript i bunden
JavaScript i toppen
<head> <link rel=”stylesheet” href=”style.css” type=”text/css”/> …</head>
CSS i toppen
Optimér rendering:CSS i toppen og JavaScript i bunden
Hvad kan optimeres på Tryg.dk
113
Optimér rendering:Apply Image Tag Dimensions
<html> <title>Funny Birds</title> <p> ... ... lots of content about birds ... ... </p> <img src="bird.jpg" /> <p> ... ... more content about birds ... ... </p> </html>
<html> <title>Funny Birds</title> <p> ... ... lots of content about birds ... ... </p> <img src="bird.jpg“width="30" height="20" /> <p> ... ... more content about birds ... ... </p> </html>
Hvad kan optimeres på dit website
120
DNS
Load Balancers App Servers
Read-only DB
Master DB
Optimér rendering:Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
128
Hvad kan optimeres på dit website
Se dig for når du implementerer 3. part JavaScript til social widgets
129
Optimér rendering:Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
Facebook buttons == 270 Kb!
Parametre:
u : Sidens URL
131
Optimér rendering:Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
Parametre:
url : Sidens URLtext : Valgfri teksthashtags : Kommaseparerede hashtagsVia : Via tekst
https://twitter.com/intent/tweet?url=http://www.eksempel.dk
&text=Performance
%20analyse&hashtags=fdih,digicure,webperf&via=digicuredk
133
Hvad kan optimeres på dit website
https://plus.google.com/share?url=http://digicure.dk
http://www.linkedin.com/shareArticle?mini=true&url=http://www.digicure.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æveturl: URLtitle : Valgfri titelsource : Valgfri kildesummary : Valgfrit resumé
Parametre:
url : URL
134
Optimér rendering:Avoid 3. party SPOF (scripts)
Hvad kan optimeres på dit website
www.cdnperf.com
137
Opsummering
Combinable JavaScripts 1 7Domain Sharding 1 7Caching 6 2Content Delivery Network (CDN) 0 8HTTP Compression 3½ 4½CSS i top 8 03. part SPOF 5 3
138
Performance analyse
Seminar deltagere
WebshopsOkt 2013
KommunerMarts 2013
International(httparchive.org)
Forespørgsler 82 req. 80 req. 62 req. 94 req.
Størrelse 1639 KB 1.229 KB 991 KB 1590 KB
Potentiel Besparelse (størrelse)
20,5 % 19 % 38 % --
143
Højere krav til performance
2006 = <4 sekunder
2009 = <2 sekunder
2013 = <1 sekund
1960 = <10 sekunder
De besøgendes forventninger
144
Fremtiden indenfor web performance
”Performance budgettet”
• Tim Kadlec, www.timkadlec.com
• Inddrag performance tidligt i et projekt
• Ender med et langsomt website med tungt indhold
• Kontrol
• ”Performance budgettet”
Kilde: http://timkadlec.com/2013/01/setting-a-performance-budget/
145
• Fokus på forespørgsler
• Fokus på websites indhold
• Nedsættes!
• Ikke svartider og tilgængelighed
Fremtiden indenfor web performance
”Performance budgettet”
146
Fremtiden indenfor web performance
”Performance budgettet”
• Sætter et budget
• Må ikke overskrides
• Antal forespørgsler og websites indhold
147
Fremtiden indenfor web performance
”Performance budgettet”
Eksempel:Instantalarm.dk
Antal forespørgsler: 30
Websites indhold: 350 KB
148
Fremtiden indenfor web performance
”Performance budgettet”
Eksempel:Instantalarm.dk
• Optimér eksisterende features eller komponenter på websitet
• Fjern eksisterende features eller komponenter på websitet
• Lad være med at tilføje den nye feature eller komponent
155
Hvad kan jeg gøre for at få hurtigeresvartider på mit website?
Coming up:
Workshop: Webperformance X-ray