Ideal web page performance
How to maximize your content view with minimal attention span of your viewers?
Impact of page performance on Business metrics
Profiling a Http request
Browser Architecture, Critical Rendering Path
Applying FFSUx to get optimal webpage performance.
7. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Website Response time
(+/-)
Result
Amazon +100 ms 1% drop in sales
Yahoo +400 ms 5-9% drop in requests
Google +500 ms 20% drop in requests
Bing +2000 ms 4.3% drop in revenue/user
Shopzilla -4800 ms
7-12% increase in revenue
25 % increase in page views
Mozilla -2200 ms 15.4% increase in downloads
Google Maps
Reduced the file volume by
30%
30% increase in map requests
Walmart -100 ms 1% increase revenue
Performance impact on business metrics
8. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
• Higher search ranking resulting in increased Customer traffic
• Higher page views.
• Better Conversion Rate resulting in increased Revenue
• Improved Ux and higher Customer Satisfaction
• Retention of Customers
• Reduced cost (Cost Optimization e.g: Infrastructure costs)
Business need for great Performance!
9. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Why the slowdown?
The median ecommerce page contains 99 resources (images, JS, CSS etc).
A year ago, it was 93 resources. Each of this additional resource incurs
latency and adds up to slower load times.
A median page size is 1436 KB which was 1094 KB a year ago. An
increase of 31% in page size.
13. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Client Side Performance
Optimization
• Earlier website performance was only about optimizing the server-
side and reducing the generation-time of the HTML. But server-
side does not seem to be the main issue.
• Yahoo found out that on an average only 10-20% of the loading
time is spent on the server-side; 80-90% is spent at the client-side
Average loading time of a website
15. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Usual suspects for Performance
bottlenecks
Performance bottlenecks because of any/all of these levels:
• Server layer
• Application Architecture/Coding/Design
• Network latency
• Database performance
• Operating Systems
Performance Tuning – zone of focus
16. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
User Interface: Address bar ,
back/forward button ,
bookmarking menu
Browser Engine: “Bridge” between
user interface (UI) and rendering
engine kernel , plug-ins ,
extensions , add-ons
Rendering Engine: It interprets the HTML, XML, and JavaScript that comprises a
given URL and generates the layout that is displayed in the UI. So HTML parsers,
XML parsers, JS interpreter are the key components of the Rendering Engine.
Data Persistence: Stores data on the client machine. Eg: Cookies, HTML, Cache
Browser Architecture
17. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Starts receiving the data. First packet is about 14 k bytes.
Parses the HTML and starts constructing the DOM.
Starts downloading of assets (CSS, Images, JS) – in the same
order as specified in the HTML source code.
Parses CSS and constructs CSS OM.
Constructs the Render tree (DOM + CSS OM)
Calculates layout size and position.
Paints and composites the layers.
Submitted the request? - Let us go behind
the scene
18. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Parsing of the HTML document is what constructs the Document Object Model
(DOM). In parallel, the CSS Object Model (CSSOM) is constructed from the specified
stylesheet rules.
DOM and CSSOM are then combined to create the "render tree," at which point the
browser has enough information to perform a layout and paint something to the
screen.
Critical Rendering Path
19. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Critical Rendering Path
JavaScript execution can issue a synchronous doc.write and block DOM
parsing and construction. Similarly, scripts can query for a computed style
of any object, which means that JavaScript can also block on CSS.
Since JS can change the DOM and the CSS OM, when the browser sees a
<script> tag it will block downloading of other assets until the JS has been
downloaded and executed
23. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Fewer in count: - Reduce no of http requests/CSS/JS/Images
Reduction in number of Round Trips
CSS Spriting
Remove duplicate scripts
Configure Entity tags
Enable caching
Set expiry dates / Add an expires header
Avoid Redirects
24. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Smaller in size:
Compression of html/CSS/JS (gzip, deflate)
Proper image format (Jpeg, WebP, PNG?)
Minification of html/JS
User Experience
Time To Interact (TTI)
CSS on top
JS in the bottom
Asynchronous JS
Above the fold rendering
Progressive Image loading
25. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Request without DNS Prefetch
Total Time of request = DNS lookup + Initial Connection + Time to First Byte +
Content Download.
Request with DNS Prefetch
Total time of request = Initial Connection + Time to First Byte + Content Download.
Using DNS prefetch can reduce DNS lookup time by pre resolving DNS (Domain
Name Server).Google PageSpeed has incorporated DNS prefetch (pre resolving
DNS) as one of performance improvement methods.
Typical DNS lookup time is from 20 ms to 120 ms.
Reduce DNS lookups
32. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
When CSS @import is used from an external stylesheet, browser is
unable to download stylesheets in parallel. This results in additional
round-trips to the overall page load. If first.css contains,
@import url("second.css")
The browser must download, parse, and execute first.css before it is
able to discover that it needs to download second.css.
Use <link> tag instead of @import.
<link rel="stylesheet" href="first.css"> <link rel="stylesheet"
href="second.css">
This allows the browser to download stylesheets in parallel, which
results in faster page load times.
CSS@Import vs <link>
33. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Reduce HTTP Requests
Repeat the same for CSS:
Before:
<script src="jquery.js"></script>
<script src="jquery.twitter.js"></script>
<script src="jquery.cookie.js"></script>
<script src="myapp.js"></script>
<link href="all.css"
rel="stylesheet"
type="text/css”/>
After:
<script src="all.js"
type="text/javascript">
</script>
34. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
How Spriting works:
• Finds background images
• Groups images into sprites
• Generates the sprite
• Injects the sprite into the current page
• Recomputes the CSS background-position
• Combines all small images into one large image
• Use CSS to control displaying of each image
• Spriteme.org, Csssprites.com
CSS Sprites
35. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
• Webservers can be configured to send an ETag (entity tag) header in file
responses. This ETag can be a Md5 hash of the file. Browser will send the ETag
from its cache in its next request for the same file.
• The server checks if the ETag is still valid (the file hasn’t changed). If valid
server only sends a 304 code (Not Modified ) without sending the file again. If
the file has changed, the server sends the whole file as usual. With this
technique a lot of traffic can be saved, but there’s still a HTTP to be made.
Entity Tag
36. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
• Use Expires header to tell the browser how long to keep the resource.
• Browsers won't fetch the resource again until its expiry.
• This is perfect for static files when it’s known that they won’t change
during the time specified in the Expires header.
Expires Header
37. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Impact of Cookies on Response Time
Cookie Size Time Delta
0 bytes 78 ms 0 ms
500 bytes 79 ms +1 ms
1000 bytes 94 ms +16 ms
1500 bytes 109 ms +31 ms
2000 bytes 125 ms +47 ms
2500 bytes 141 ms +63 ms
3000 bytes 156 ms +78 ms
Website Total Cookie
Size
Amazon 60 bytes
Google 72 bytes
Yahoo 122 bytes
CNN 184 bytes
YouTube 218 bytes
MSN 268 bytes
eBay 331 bytes
MySpace 500 bytes
Cookie sizes across websites
38. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Reduce cookie weight
• Cookie’s are sent back with every request
• Keep cookie size small and only store what’s required – use
server-side storage for everything else
• Consider cookie free domains for static content
Keep it clean
• Always asynchronous
• Use JSON over XML
Accessing JSON faster and cheaper
Less overhead compared to XML
• Use GET requests over POSTs wherever possible
POST is a 2-step process: send headers, send body
POST without a body is essentially a GET anyway
39. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
• Add an Expires header
Not just for images – should be used on all static content
Set a “Never expire” or far future expires policy if you can
Reduces HTTP requests – once component is served, the browser
never asks for it again
Date stamping in file names makes it easier
“Empty cache” means the browser has to request the components
instead of pulling them from the browser disk cache.
Maximize the cache
42. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
<img src="photos/awesome_cat.png" width="800">
awesome_cat.png 350 KB
awesome_cat.jpg 80 KB
awesome_cat.webp 60 KB
Note: .webp - supported on chrome/opera/android browsers.
Servers can do UA or Accept Check to send the .jpg or .webp image
based on the browser.
Optimize images
Images are one of the greatest impediments for performance.
Either in the wrong format
Uncompressed
Not optimized to load progressively
All of the above.
43. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Minification is the process of removing all unnecessary characters from source
code, without changing its functionality. Includes white spaces, new line characters,
comments, and sometimes block delimiters, which adds readability to the code but
are not required for execution.
Minify all static content
(CSS, JavaScript, XML, JSON, HTML)
Reduced 24% from the original sizeTools: JSMin, CSSTidy, YUI Compressor
44. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
Analysis of the Alexa top 1000 sites found:
42% don't gzip
44% have more than 2 css files
56% serve css from a cookied domain
62% don't minify
31% have more than 100k size css
Top 1000 retail sites
50% aren't doing both keep-alive and compression (the 2
easiest things!!)
Industry Observations: Alexa
46. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
CSS external and on top
● Move all inline CSS to external style sheets for both reuse and caching
● Put all style sheet references at the top
JavaScript external and below
• Promotes better script design
• Push scripts as low as possible
• Be pragmatic – think about splitting JavaScript into “must be loaded” and “can be loaded
on demand”
• Scripts will block both downloading and rendering until parsed
• Remove duplicate scripts (IE has a habit of downloading them again)
49. www.unicomlearning.com/Test_Automation_Summit_Bangalore/
YSlow
Yahoo’s YSlow is a plugin for Firebug which can test a
website for many basic optimizations. The tests are based
on the best practices from Yahoo’s Performance team.
Grades performance – not about response times but about
how well a site has adopted the suggested techniques.