QA Fes 2016. Jacek Okrojek. Website performance from user perspective

QAFEST
Web Application
Performance From
User Perspective
JACEK OKROJEK
01.10.2016

1. Why it matters
2. Tips for improving web page performance
3. Metrics
4. Measurements techniques
AGENDA

GFT Technologies SE 25.06.2016 3
Why it matters
W EB APPLICATION PERFORMANCE FROM USER PERSPECTIVE

High Performance Web Sites Rules
 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

Checking conformance to High Performance Web Sites Rules
 YSlow
 Google PageSpeed Insights

Server Metrics
 HTML Document download time is 68ms

USING REAL BROWSER IN PERFORMANCE TESTS
 Key advantages
 Provides metrics from real
browser
 You can run them when you
want
 Key disadvantage
 User perspective as if she use
test equipment
browser, hardware, connections
speed, location)
 Key challenges
 What metrics should be
collected
 Where to put test equipment
SYNTHETIC MEASUREMENTS

Navigation API
BROW SER METRICS

USING REAL BROWSER IN PERFORMANCE TESTS
 Key advantages
 Provides metrics from real
browser
 You can run them when you
want
 User perspective as if she use
test equipment
browser, hardware, connections
speed, location)
 Key challenges
 What metrics should be
collected
 Where to put test equipment

Navigation Timing API
var t = performance.timing || {};
var i = t.domInteractive - t.navigationStart,
d = t.domContentLoadedEventStart - t.navigationStart,
c = t.domComplete - t.navigationStart;
return i + ', ' + d + ', ' + c;
BROW SER METRICS

Zasoby
 Typowe metryki
 Czas pobrania wybranego zasobu
 Czas pobrania ostatniego zasobu
BROW SER METRICS

Resource Timing API
var resources = performance.getEntriesByType("resource");
for (var i=0; i < resources.length; i++) {
log("== Resource[" + i + "] - " + resources[i].name);
// Start until reponse end
t = (resources[i].startTime > 0) ? "0":
(resources[i].responseEnd - resources[i].startTime);
log("... Start until response end time = " + t);
}
BROW SER METRICS

User Timing API
 Typowe metryki
 Wyświetlony wybrany element strony
BROW SER METRICS
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="contentSearchUI.css">
</head>
…
<body>
<img src="hero.jpg" onload="performance.mark('hero1')">
<script>performance.mark('hero2')</script>
</body>
</html>

Tools and services
 Open Source
 Selenium, BrowserMob i HarStorage
 SiteSpeed.io
 WebPageTest
 Płatne
 NewRelic
 CatchPoint

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
 You can not run it when you want (for
example before release)
 Key challenges
 What to measure

Dodatkowe informacje
 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
Tim Kaldec
@tkaldec

GFT Technologies SE
Jacek Okrojek
Email: jacek.okrojek@gft.com
Twitter: @Okrojek
Thank you

QA Fes 2016. Jacek Okrojek. Website performance from user perspective

More Related Content

What's hot (20)

Similar to QA Fes 2016. Jacek Okrojek. Website performance from user perspective (20)

More from QAFest (20)

Recently uploaded (20)

QA Fes 2016. Jacek Okrojek. Website performance from user perspective

Editor's Notes