This document discusses web application performance from a user perspective. It describes how performance testing is typically done with load generators, which can simulate many users but do not behave exactly like browsers. Factors like page size, complexity, and browser hardware impact user experience. Guidelines are provided for high performance sites, and tools like YSlow and PageSpeed are recommended for checking adherence. Both synthetic and real user measurements are important, with each having advantages and disadvantages.

1. Web Application
Performance From
User Perspective
Jacek Okrojek
29.03.2016
FOUNDATIONS OF SOFTWARE TESTING

2. GFT Group 30.03.2016 2
Performance testing with load generators
 Overview
 Performed with tools like Jmeter, Gatling, AB, LoadRunner etc.
 Generates concurrent requests based on scripted instruction
 Provides metrics based on response time for request
 Advantages
 Requires relatively small amount of hardware for simulating huge amount of concurrent users
 Loads server resources (CPU, memory) and network
 Easy to run and collect results
 Disadvantages
 Does not work exactly as browsers
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

3. GFT Group 30.03.2016 3
Results collected when testing with load generators
 Give us information about performance as if a page looks like in the example on the left (and
even this is not fully true) however actual page looks like in the example on the right.
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

4. GFT Group 30.03.2016 4
Factors that impact user experience
 Size
 1995 – mean page size 14.1k, average number of objects 2.3
 2010 – mean page size 498k, average number of objects 75
 2012 – mean page size 684k, average number of objects 83
 Complexity
 JavaScript execution
 Content stored on CDNs
 Calls to external APIs
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

5. GFT Group 30.03.2016 5
Tips For High Performance Web Sites
 Gzip Components
 Put StyleSheets at the Top
 Put Scripts at the Bottom
 Minimize HTTP Requests
 Minify JavaScript and CSS
 Make JavaScript and CSS External
 Use a Content Delivery Network
 Avoid empty src or href
 Add an Expires or a Cache-Control
Header
 Avoid CSS Expressions
 Reduce DNS Lookups
 Remove Duplicate Scripts
 Make AJAX Cacheable
 Use GET for AJAX Requests
 Reduce the Number of DOM Elements
 Use Cookie-Free Domains for
Components
 Do Not Scale Images in HTML
 Make favicon.ico Small and Cacheable
 Configure ETags
 Avoid Redirects
 Reduce Cookie Size
 Avoid Filters
 No 404s
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

6. GFT Group 30.03.2016 6
Checking conformance to High Performance Web Sites Rules
 YSlow
 Google PageSpeed
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

7. GFT Group 30.03.2016 7
Synthetic page load measurements
 Synthetic page load measurements are collected with help of real browser
 Used to monitor performance of production and test sites
 Key advantages
 You can run them when you want
 Key disadvantage
 Still you have approximation of performance seen from user perspective
 Key challenges
 What browser should be used
 What hardware should be used
 What connections speed should be used
 What location should be used
 What tools should be used
 What metrics should be collected
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

8. GFT Group 30.03.2016 8
Before we start
 Generating load for capacity tests and as a background for synthetic measurements with browser
 Fast feedback about improvements related to generating main html document
 Checking stability of the environment
 Example: downloading 6kb image every 5 seconds
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE
0
1
2
3
4
5
6
7
8
9
10
0 200 400 600 800 1000 1200
0
1
2
3
4
5
6
7
8
9
10
0 2000 4000 6000 8000
During a day (100min from 15:30PM) During night (960min from 6:00PM)

9. GFT Group 30.03.2016 9
Tools and services for synthetic page load measurements
 Open Source
 Selenium with BrowserMob and Har Storage – tools for building custom tool that performs action and the web site
and collects har files via proxy. Har Storage is a tool for storing har files and present performance trends out of them.
 WebPageTest – collect measurements from various locations, browsers and connection seeds. It captures filmstrips,
allows for scripting, heavy customization and calling via API
 ShowSlow – daily checks for yslow results, integrates and can collects result with WebPageTest, public and private
instances
 SiteSpeed.io – tool that can crawl part or entire web site and collects yslow and performance measurements
 Commercial services
 NewRelic – affordable tool that can be used to synthetic and RUM measurements from various locations (AWS)
 CatchPoint – gives you give insight into application performance from lots of locations around the world
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

10. GFT Group 30.03.2016 10
What to measure
 First View or Repeated View (80/20 rule)
 DOM Content Loaded or Page Loaded*
 Speed Index **
 Custom Event with Navigation, Resources or User Timing APIs***
<link rel="stylesheet" type="text/css" media="all" href="contentSearchUI.css">
…
<img src="hero.jpg" onload="performance.mark('hero1')">
<script>performance.mark('hero2')</script>
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE
* http://web.archive.org/web/20150405114023/http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html
** http://www.webpagetest.org/video/compare.php?tests=150912_EG_RPD,150912_96_RK5
*** https://www.youtube.com/watch?v=f5_iAzS3WMQ

11. GFT Group 30.03.2016 11
Real User Measurements (RUM)
 Collected from real user devices (mobile and desktop)
and helps understands how performance is seen by real
users
 Key advantages
 You know what performance is seen by real users
 Solves most of the challenges of synthetic monitoring
 Key disadvantage
 You can not run it when you want (for example before release)
 Key challenges
 What to measure
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

12. GFT Group 30.03.2016 12
References
 https://www.soasta.com/blog/measuring-web-performance-video/
 https://dzone.com/articles/a-brief-history-of-web-performance-roi
 https://developers.google.com/web/fundamentals/performance
 http://yslow.org/
 http://www.softwareishard.com/blog/har-viewer/
 https://www.soasta.com/blog/ebook-usertiming-performance-monitoring/
 https://codeascraft.com/
 https://www.soasta.com/blog/ebook-usertiming-performance-monitoring/
 https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/
 https://blog.twitter.com/2012/improving-performance-on-twittercom
 http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics
Steve Souders
@Souders
Tammy Everts
@tameverts
Ilya Grigorik
@igrigorik

13. Thank you
GFT
Jacek Okrojek
Email: Jacek.okrojek@gft.com