Demystifying Performance Timings
A presentation at Prairie Dev Con in in Winnipeg, MB, Canada by Jeremy Wagner
@malchata
If you've ever experimented with the navigation and resource timing APIs in the browser, it can be a daunting task to understand the performance timings they provide. What's the difference between connectStart and fetchStart? Where does SSL time figure in? What the heck does domInteractive mean, and how is that different from domComplete? What order do these timings even occur in?
In this talk, we're going to demystify these performance timings. We'll define them, place them in proper order, and you'll learn how to quantify the time your site and its assets are taking to load in distinct phases. All you'll need is a basic working knowledge of JavaScript, and simple arithmetic skills. If you've wanted to make sense of performance timings, this is the talk for you!
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Navigation Timing Level 2 Specification
This specification defines an interface for web applications to access the complete timing information for navigation of a document.
-
Resource Timing Level 2 Specification
This specification defines an interface for web applications to access the complete timing information for page resources.
-
PerformanceObserver Documentation on MDN
The PerformanceObserver interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
