Upload
stephen-thair
View
59.493
Download
2
Embed Size (px)
DESCRIPTION
Over of Web performance optimisation (WPO) as well as some results from 25 web performance site analysis. Some information on Mobile web performance as well.
Citation preview
• Defining “Web Performance”?
• Why performance matters (to your business)
• The “Rules” of Web Performance
• Practical Web Performance (“where to start!”)
AGENDA
MY DEFINITION OF WEB PERFORMANCE
“The delay perceived by the website visitor between an action (e.g click)
and a meaningful response”
“The delay perceived by the website visitor between an action (e.g click)
and a meaningful response”
“The delay perceived by the website visitor between an action (e.g click)
and a meaningful response”
PERCEPTION
http://velocityconf.com/velocity2010/public/schedule/detail/13019
Just because your Dev Mgr, QA Mgr, Ops Mgr tells you “performance is good”
doesn’t means that it is PERCEIVED that way by your CUSTOMERS…
• “Brain wave analysis from the experiment revealed that participants had to concentrate up to 50% more when using badly performing websites, while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods.
• http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf
POOR PERFORMANCE = WEB STRESS!!!
• 0.1 seconds gives the feeling of instantaneous response
• 1 second keeps the user's flow of thought seamless.
• 10 seconds keeps the user's attention
• Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
SO WHAT IS “GOOD PERFORMANCE”?
10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
“3 SECOND RULE”
WHY PERFORMANCE MATTERS
BOUNCE RATE GOES UP
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes /
PAGE VIEWS GOES DOWN
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes /
CONVERSION RATE GOES DOWN
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes
/
• “A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions”
Aberdeen Group• http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx
3RD PARTY RESEARCH
Artificial 1s delay = 2.8% reduction in revenue per user
EMPIRICAL TESTING
http://assets.en.oreilly.com/1/event/29/The%20User%20and%20Business%20Impact%20of%20Server%20Delays%2C%20Additional%20Bytes%2C%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx
• You are losing Visitors
• You are losing Sales
• You are losing Ad-revenue
• You are wasting SEO/SEM/PPC budget
• Spending £££ on bandwidth and servers
IN SUMMARY…
So how are we doing?
Largest Page…4,909,588 bytes
Slowest Page…12.436 secs
Most objects…227
1 was down for maintenance
1 didn’t re-direct from http to https
~28% had some type of error
So what can you do about it?
Answer = Optimise!
80% “Front End”20% “Back-end”
• Focus on the “front end”
• Optimise the interaction between the browser and the data-centre
• And how the browser processes the client-side objects
“FRONT END ENGINEERING”
Minimize HTTP Requests
Use a Content Delivery Network
Add an Expires or a Cache-Control Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
YAHOO’S RULES
Remove Duplicate Scripts
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small & Cacheable
http://developer.yahoo.com/yslow/help/#guidelines
Avoid bad requests Avoid CSS expressions Combine external CSS Combine external JavaScript Defer loading of JavaScript Enable compression Leverage browser caching Leverage proxy caching Minify CSS Minify HTML Minify JavaScript Minimize request size Minimize DNS lookups
GOOGLE’S RULES Minimize redirects
Optimize images
Optimize the order of styles and scripts
Parallelize downloads across hostnames
Put CSS in the document head
Remove unused CSS
Serve resources from a consistent URL
Serve scaled images
Serve static content from a cookieless domain
Specify a character set early
Specify image dimensions
Use efficient CSS selectors
http://code.google.com/speed/page-speed/docs/rules_intro.html
Informationoverload!
Where should you start?
Which optimisations are most common?
Which optimisations are most important?
And the survey says…
HTTP ARCHIVE - LOAD TIME CORRELATION
http://httparchive.org/interesting.php
HTTP ARCHIVE - RENDER TIME CORRELATION
http://httparchive.org/interesting.php
LESSONS LEARNT FROM CONSULTING…Generic Description
Reduce Page Size
Reduce Number of Requests
Implement GZIP
Compression
Optimise Loading of
external files
Defer JavaScript
loading
Optimise images
Optimize HTTP Caching
Domain Sharding
Cookie-free
Domains
Back-end performance
tuning
Remove Unnecessary
CSSHigh Street Retailer Yes Yes No No No No Yes No Yes No YesBudget Hotel Chain No Yes No No No Yes Yes Yes Yes Yes NoProfessional Body No Yes Yes Yes Yes Yes Yes Yes No Yes No
High Street Retailer No Yes No Yes Yes Yes Yes Yes Yes Yes NoVOD provider No Yes No No Yes Yes Yes Yes Yes Yes Yes
Consumer Electronics Brand Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes YesFashion Retailer No Yes No No Yes Yes Yes No Yes Yes Yes
Travel Sector No Yes Yes Yes Yes no Yes Yes Yes Yes NoFashion Retailer Yes Yes Yes Yes Yes No Yes Yes No Yes NoFashion Retailer Yes Yes No No Yes No Yes Yes Yes Yes No
Home Improvement Retail No Yes No No Yes No Yes Yes Yes Yes YesElectrical Retailer Yes Yes no Yes Yes No Yes No Yes Yes NoElectrical Retailer Yes Yes No No Yes Yes Yes Yes No Yes NoOnline Gambling Yes Yes Yes Yes No Yes Yes No Yes Yes Yes
Mobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes Yes No YesInsurance Provider No Yes No No Yes No Yes Yes No Yes Yes
Emergency Repair Service No Yes No Yes No Yes Yes Yes No Yes YesMobile Phone Retailer Yes Yes No Yes Yes Yes Yes Yes No Yes Yes
Car Manufacturer No Yes No No No Yes Yes Yes Yes Yes YesFinancial Services No Yes Yes No Yes No Yes Yes No Yes Yes
Travel Sector Yes Yes No No Yes No Yes Yes No No NoPublisher No Yes Yes No Yes Yes Yes Yes No No YesPublisher No Yes No No Yes No Yes Yes Yes No Yes
High Street Retailer Yes Yes No Yes Yes Yes Yes Yes No No YesNewspaper Yes Yes No Yes Yes Yes Yes No Yes Yes Yes
48% 100% 28% 48% 80% 60% 100% 80% 60% 76% 64%
Performance Rule Frequency Recommended
Reduce Number of Requests 100%
Optimize HTTP Caching 100%Defer JavaScript loading 80%
Domain Sharding 80%Back-end performance tuning 76%Remove Unnecessary CSS 64%
Optimise images 60%Cookie-free Domains 60%
Reduce Page Size 48%
Optimise Loading of external files 48%
Implement GZIP Compression 28%
1. Reduce Page Size (<500Kb)
2. Enable (Gzip) Compression
3. Reduce the number of roundtrips (<40 per page…)
4. HTTP Cache Headers (cache long & prosper!)
5. Structure the page (to improve render & download)
a) CSS First
b) Javascript last
5 IMPORTANT ONES
Even if you apply just those 5 rules…
Your page download times will drop by ~50%
LOW HANGING FRUIT…
Generally you are now measuring gains in milliseconds
WHAT ABOUT THE OTHER RULES?
But even milliseconds can make a difference…
OPTIMISING JAVASCRIPT & ASYNC LOADING
• Loading jquery Async
• Improving JS Execution time
• Delayed ad-loading
http://velocityconf.com/velocity2011/public/schedule/detail/18039
Faster does not always equal more
revenue!!!
“REDUCE THE NUMBER OF DOM ELEMENTS”
24,000 calls to a selector takes
time…
“USE A CONTENT DELIVERY NETWORK”
You can’t beat the speed of light…
And if your customers are not in the UK, invest in a CDN…
4.5 seconds in Londonbecomes
12.5 seconds in Singapore
“USE HTTP KEEP-ALIVES”
Tune your HTTP Keep-Alives!• KeepAliveTimeout Value (sec)• MaxKeepAlive Requests (# requests/connection)• Stop forcing your customers to re-negotiate
connections (even partway through a page!)• Even more important for SSL! (~4x slower)
“The Bigger Picture”
WPO is not just for Christmas…
Performance is a PROCESS
NOT aPROJECT
http://www.seriticonsulting.com/blog/2011/5/28/web-performance-is-not-just-for-christmashellip.html
Who should you have on your
WPO project team?
http://www.seriticonsulting.com/blog/2011/5/29/who-should-be-on-your-wpo-team.html
Who should you have on your
WPO Process! team?
http://www.seriticonsulting.com/blog/2011/5/29/who-should-be-on-your-wpo-team.html
Performance Lead / Evangelist
Front-end Developer
Back-end Developer
Performance QA
Database Administrator
Systems Administrator
Network Administrator
Web Analytics Analyst
Economics of WPO… is automation the
answer?
http://www.seriticonsulting.com/blog/2011/8/11/why-i-think-automation-is-the-future-of-webperf.html
Answer: Maybe?
What Else?
“I often say that when you can measure what you are speaking about, and express it in numbers, you know something about it; but when you cannot express it in numbers, your knowledge is of a meagre and unsatisfactory kind; it may be the beginning of knowledge, but you have scarcely, in your thoughts, advanced to the stage of Science, whatever the matter may be.”
-- William Thomson,1st Baron Kelvin
Make sure you can measure your website performance…
(and that the numbers are getting better, not worse!)
BETFAIR’S CUSTOMER PERFORMANCE CHARTER
”We aim for 99.9% of bets placed in less than a second and our aspirational website SLA is as follows. Under peak loads, with performance measured at the 95th percentile, for typical user bandwidths and a 0% error rate, our users shall experience Visual Progress (header loaded) in less than 1 second, Time to Interact with useful content within 1.5 seconds and full page loads within 3 seconds. (There is room for improvement on this front as our current sports home page loads in approx. 18 seconds at the 95th percentile). We will publish our aggregate stats here monthly.”
http://www.seriticonsulting.com/blog/2011/7/20/creating-an-performance-sla-with-your-customers-betfairrsquo.html
10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
“3 SECOND RULE”
1. JavaScript timing e.g. WebTuna, GA SiteSpeed
2. Browser plug-in e.g. HTTPwatch
3. Custom browser e.g. Site Confidence Active
4. Proxy timing e.g. Fiddler proxy
5. Web Server Module e.g. APM solutions
6. Network-level e.g. SC Organic, Atomic Labs Pion
6 WAYS OF MEASURING WEBPERF
WHICH IS BETTER?
Metric JavaScript Browser Plug-in Custom Browser Proxy Debugger Web Server-level Network-level
Example Product WebTuna HTTPWatch Webkit-variant Fiddler Proxy AppDynamics Pion
"Blocked/Wait" No Yes Yes Yes No No
DNS No Yes Yes Yes No No
Connect No Yes Yes Yes No Yes
Time to First Byte Partially Yes Yes Yes Partially Yes
Initial Render No Yes No No No No
DOMReady Partially Yes Yes No No No
"Page/HTTP Complete" Partially Yes Yes Yes Partially Yes
OnLoad Event Yes Yes Yes No No No
JS Execution Time Partially Yes No No No No
Affects Measurement Yes Yes Yes Yes Yes No
It Depends…
• Do you want to measure every visit to your website?
• Use a jscript tag, web server or network level solution
• Are you measuring as part of Dev or QA?
• Use a browser plug-in or proxy
• Do you want detailed browser metrics like render start time?
• Use a browser plug-in
• Are you a 3rd party monitoring provider?
• Use a custom browser variant!
IT DEPENDS ON…
• Active Monitoring
• Agent “pings” the web page
• “Real-User” Monitoring (RUM)
• “listening in” to real user traffic
• Complementary methods!
• Best solution is Active & Real-User
• Not Active or Real-User…
ACTIVE VS “REAL-USER”
What about client-side?
THE BROWSER PERFORMANCE WARS…
http://sixrevisions.com/infographics/performance-comparison-of-major-web-browsers/ (2009)
AUTOMATE CROSS-BROWSER PERF TESTING!
What about Mobile?
DIFFERENT OPERATING SYSTEMS
EVEN MORE BROWSERS?
http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php
slideshare.net/CMSummit/ms-internet-trends060710final
http://www.nytimes.com/2011/04/18/technology/18mobile.html
MOBILE PERFORMANCE IS LOCATION-DEPENDENT
http://mytests.3pmobile.com/context/?WyIyUFVDZHlWV2ErZHFISmxCSWFXRENnPT0iLCJEYnFYVVp3SEN4MD0iXQ%3D%3D
10/04/2023© SERITI CONSULTING 66
MOBILE LATENCY (OVER HSDPA)
http://blog.davidsingleton.org/mobiletcp
Max RTT = 20 seconds!
1. Latency kills…
a) DNS Lookups take far longer
b) Avoid re-directs (to http://m.yourdomain.com)
c) Reduce the number of roundtrips (<15 per page?)
MOBILE PERFORMANCE RULES???
10/04/2023(C) SERITI CONSULTING, 2011 68
2. “Intelligent Adaptation”
a) Be device & network aware!
b) Send only what you need
c) Send the right sized images
d) With the minimum of script/CSS/etc
MOBILE PERFORMANCE RULES???
10/04/2023(C) SERITI CONSULTING, 2011 69
3. Cache
a) Brower cache (small cache, with a different eviction algorithm…)
b) AppCache,
c) LocalStorage,
MOBILE PERFORMANCE RULES???
And that’s all I’ve got…
(but before I go…)
Velocity EU
Web Performance Conference
Berlin 8th/9th November
(see me for a discount code!)
http://velocityconf.com/velocityeu/