A presentation at Front-End.IL in in Herzliya, Israel by Yonatan Mevorach
Measuring Performance 3% is your site as fast as you think? cbn http://flic.kr/p/92uGmU
6% which is fastest? meetup.com angularjs.org youtube linkedin yahoo wikipedia
9% and the results are in http://goo.gl/sFyvb3
12% Why invest in a fast site? http://goo.gl/nBhm7H http://flic.kr/p/mrr1qo
15% blog.cowchimp.com @cowchimp
18% MEASUREMENT “No science attains maturity until it acquires methods of measurement” - Dr. Logan Clendening (science wins!)
21% User Experience = Serverside + Clientside
24% Only 10-20% of the end user response time is spent downloading the HTML document. The other 80-90% is spent downloading all the components on the page. - Steve Souders http://goo.gl/2kjAf8 "High Performance Web Sites" (O'Reilly)
27% Metrics We need to be consistent in • What point in time? • What is the cache status? • What machine do we use? (location, connection, browser) • Based on how many samples? cb http://flic.kr/p/62hNF6
30% Example Metric • x = Page load time - Navigation start time • Of cached view • Running a Chrome with a DSL connection in Virginia • As measured by Webpagetest cb http://flic.kr/p/62hNF6
33% Top Level Metrics from start until... • Time to First Byte (TTFB) • Start Render • Page Load (aka Load time) cb http://flic.kr/p/62hNF6
36% Good enough? • These metrics do a good job at measuring generic network\browser events • But do they do a good job of reflecting the User Experience? http://goo.gl/2hIlGQ
39% The reported Load time for this page is 3.959s http://goo.gl/o6EXn2
Perceived Performance 42% http://goo.gl/mRBPDJ
45% Monitoring cbn http://flic.kr/p/4X3ect
48% Synthetic vs. RUM (Real User Monitoring) cb http://flic.kr/p/91r3Wz
51% Webpagetest.org (WPT) http://goo.gl/1qiL62
54% http://goo.gl/ecRZkj
57% Video frame analysis WPT captures screenshots at 10 frames / 1 sec 0.0 s 2.2 s 2.8 s 3.3 s 3.6 s 4.0 s 4.2 s 7.6 s Source: http://goo.gl/kJF9JU
60% Video frame analysis For each frame it calculates % of visual completeness compared the last frame Source: http://goo.gl/kJF9JU
63% “Speed Index” • New metric defined by WPT • Provides an excellent representation of the User Experience • Aggregates the visual completeness score of all frames into 1 final score Source: http://goo.gl/kJF9JU
Webpagetest API 66% Exposes all of WPT's functionality via HTTP API webpagetest.org/getkey.phpcbn http://flic.kr/p/bViZ2p
69% speedcurve.com
72% RUM Real User Monitoring http://goo.gl/JRuFyd
75% Poor Man’s RUM var startDate = new Date().getTime(); $(window).on('load', function() { var endDate = new Date().getTime(); var diff = endDate - startDate; $.ajax('/-/my-rum-endpoint', { url: window.location.href, pageLoad: diff }); });
78% 3rd party Open source Boomerang Bucky Commercial
Do It Yourself $(window).on('load', function() { var pageName = $('body').attr('id'); var t = window.performance.timing; var diff = t.loadEventStart - t.navigationStart; var url = baseUrl + '?' + pageName + '=' diff; new Image().src = url; }); grafana.org
84% Timing Browser APIs • New browser APIs –Navigation timing –Resource Timing –User Timing measure custom events with performance.mark("task1") • navigationStart is the real navigation start Spec: http://goo.gl/c79glK
Synthetic & RUM 87% Page metrics & Speed Index & Custom events cb http://flic.kr/p/aEHMU
90% Approach “Light Speed” ! • Calculate your page’s “Light Speed”: The fastest possible speed at which you can serve your UX • Approach Light Speed Existing project: New project: Complete feature set Light Speed Light Speed Complete feature set “Light Speed” coined by Tony Gentilcore http://goo.gl/B6ePS2 t t cbn http://flic.kr/p/bF1gCw
93% Correlation xkcd.com/552 Source: http://goo.gl/R1owqz
In the future… 96% Analyzing & improving cbnd http://flic.kr/p/fC19xo
100% Riddles? now or on twitter @cowchimp cbndhttp://flic.kr/p/kVkLHU
Making sure your web site is fast is a key part of delivering a superb user experience. Perhaps you're just now starting out with improving your pages' speed or you've already put a lot of effort into performance optimization.
But have you ever asked yourself what is a fast web site? If a page loads quickly on your machine, does it mean it's fast on your users' devices as well? Can a page that takes 20 seconds to load still be a fast page? How do you actually measure the speed of the web site?
This talk will explain how to go beyond measuring 'page.load' on your dev machine. We'll explore several performance metrics, Synthetic and Real User Monitoring, automation techniques, new browser APIs, measuring custom events, perceived performance, and more.
for free. You
can too.