Transcript
Owning Web Performance@wesleyhales
How long does it take the page to load?
@wesleyhales
What are we measuring?
@wesleyhales
The Perception of (Load) TimeSpeedperception.org
@wesleyhales
How the web perf industry “thinks” users interact with our page.
The average attention span of a human being dropped from 12 seconds in 2000 to 8.25 seconds in 2015.
- National Center for Biotechnology Information at the US National Library of Medicine
//Chromewindow.chrome.loadTimes().startLoadTime;
//IEwindow.performance.timing.msFirstPaint
Start render is measured by capturing video of the page load and looking at each frame for the first time the browser displays something other than a blank page.
Or…
Start Render / First Paint
Document Complete
What it means depends highly on what the page actually does. For example:
“The page was completely blank at onloadand the content was all rendered afterward in JavaScript”
https://www.webpagetest.org/forums/showthread.php?tid=13266
Critical ResourcesThe main blockers to fast rendering are stylesheets and synchronous scripts.
Stylesheets block all rendering in the page until they finish loading.
Synchronous scripts (e.g., <script src="main.js">) block rendering for all following DOM elements.
Synchronous scripts in the HEAD of the page block the entire page from rendering until they finish loading.
https://www.stevesouders.com/blog/2016/02/10/critical-metric-critical-resources/
a bug:fire drill when things are broken
a criteria at all stages:UX → development → production
a continuous process:Monitoring → learning → improvement
Performance is…
Fast is good… Faster is better
Google Dev Summit
@wesleyhales
Performance Reality
@wesleyhales
@wesleyhales
Happy Place
We can’t get to a happy place without monitoring…
@wesleyhales
Local vs. Remote Monitoring
@wesleyhales
Local vs. Remote Monitoring
@wesleyhales
Real User Monitoring (RUM)
• Provides a restricted subset of performance API’s and metrics.
• It’s restricted because such data may reveal private or sensitive information about the visitor.
Local vs. Remote Monitoring
@wesleyhales
Just because something is possible to measure, and perhaps is even highly desirable and useful to many developers, does not mean that it can be exposed as a RUM API.
http://bit.ly/29obv1d
What can we measure (remotely)?
@wesleyhales
Performance Timing APIs
• Performance Timeline• HR Time• Navigation Timing• Resource Timing• User Timing• Frame Timing• Server Timing
Navigation Timing API(The starting point of Web
Performance APIs)
@wesleyhales
@wesleyhales
Browser Support
http://www.w3.org/2015/10/webperf-all.html
Advance Browser Support
Navigation is about how user agents convert the requested
HTML, CSS, and JavaScript into rendered pixels, which is one of the most critical steps for users
to navigate a document.
@wesleyhales
From the spec…
window.performance.timingsimple-new.html
@wesleyhales
Measurements are in HRT
• All measurements are at microsecond precision.
• Does not depend on system clock or DOM processing
• Example: perf.now.html
performance.now()
@wesleyhales
window.performance.timing process model
@wesleyhales
Loadreport.js (2012-2015)
Same Pattern?
@wesleyhales
Browser without a UI
Able to run in a server environment
Intended for testing and automation
Headless Mode
@wesleyhales
Released Early 2015
Headless Web Browser
Based on WebKit
PhantomJS 2
@wesleyhales
Pros/Cons
Limited support for modern web features
No auto updates
Great for Continuous Integration!
PhantomJS 2
@wesleyhales
PhantomJS 2 Feature Detect
What About Headless Chrome?
https://www.youtube.com/watch?v=GivjumRiZ8c
Basic PhantomJS Scripts
@wesleyhales
@wesleyhales
Rewrite of loadreport.js
Leverages all implemented Navigation Timing APIs
(shims resource timing)
Speedgun.js
Speedgun.jsDemo normal and spider
@wesleyhales
@wesleyhales
Speedgun.io
Speedgun.js
Wrapper runs script on System out
@wesleyhales
Speedgun.io
Speedgun.js
Wrapper provides API
/go
/report
/beacon
/nodes
@wesleyhales
Speedgun.io
Speedgun.js
Wrapper provides API
/rest/performance/go?url=www.google.com
/rest/performance/report?uuid=629901
/rest/beacon/init
/rest/beacon/getlist
@wesleyhales
Speedgun.io
Speedgun.js
API Wrapper/go
/report
/beacon
/nodes
Docker Container
@wesleyhales
Speedgun.io
Speedgun.js
API Wrapper
Docker Container Docker Container
Postgres
@wesleyhales
Speedgun.jsDemo
Synthetic RUM
• Use Speedgun.io as centralized server
• All docker nodes send beacon with:• Current container CPU and
memory usage
• API demo...
http://wesleyhales.com/blog/2015/04/24/Speedgun/
Continuous Perf Monitoring
• Use Speedgun.io as centralized server
• All docker nodes send beacon with:• Current container CPU and
memory usage
• API demo...
Continuous Perf Monitoring - Local
Continuous Perf Monitoring - Remote
Thanks!!• speedgun.io (github)• Navigation Timing API• Navigation Timing 2• Resource Timing API• http://w3c.github.io/perf-timing-primer/
@wesleyhales
Perf Side Note: Browser Interventions
• Removing active scroll listeners• Blocking document.write• Throttling timers in background frames• Immediately fallback to system fonts on slow
connections• Lazy load images
top related