Determine webpage load speed using Javascript and the window.performance.timing method

Question

Determine webpage load speed using Javascript and the window.performance.timing method

Utilizing Selenium in C#, I have devised a method to calculate page load times, as demonstrated by the code snippet below:

Code: Selenium C#

using OpenQA.Selenium;
double requestStart = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.requestStart");
double domComplete = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.domComplete");
var totaltime = domComplete - requestStart;

After some experimentation, I discovered that the variable totaltime in the code above corresponds to the value of Load as depicted in the image below. It seems that Load always matches the value of the DOMContentLoaded variable.

Question:

Why does the value for Finish not match the same time? What does Finish represent and how can it be calculated using JavaScript's window.performance.timing object?
How can the time between typing a URL into a web browser (and pressing enter) and when all the content on the page is fully loaded be calculated?

The document linked below provides a good description of what each timing variable measures in terms of resource loading timestamps, however, the Finish value in Chrome DevTools is causing confusion.

Figure: Extracting Performance information from Chrome's Devtool (F12) Network tab

https://i.sstatic.net/nHFWA.png

Edit:

Thank you @wOxxOm. I observed that the Finish time continuously increased as I interacted with the website, visiting different pages within the site. On the other hand, the DOMContentLoaded and Load values remained constant even after the initial loading event. This aligns with what you mentioned in your response. Following your suggestion, I updated my code to:

double connectStart = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.connectStart");
double loadEventEnd = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.loadEventEnd");
double newMeasure = (loadEventEnd - connectStart) / 1000.0;

I have also started exploring the LCP feature in Chrome 77.

I have another question:

Question 2: Initially, I expected the values within the window.performance object to change with new values as I navigated through the website by clicking on different links. However, all the window.performance values remained static after the initial website load (DOMContentLoaded and Load values in Chrome’s devtool network window also did not change as I navigated the site). Why did the window.performance values remain unchanged? Could this be due to the nature of the website being a Single Page Application (SPA)? In contrast, I noticed that when I navigated through a different, older website, the DOMContentLoaded and Load times changed to reflect the loading times for each page within that site as I clicked on links in the main menu.

javascript selenium google-chrome-devtools performance-testing

Answer 1

Answer №1

Why is the difference between 'finished' and 'domComplete - requestStart'?

DOMContentLoaded signifies that all the DOM content has loaded, but javascript and images are still in the process of loading.

Load indicates that all the content, including javascript and images, has been fully loaded. By initiating lazy loading of images and javascript prior to this event, it can lead to a delay in the load event and hinder the overall page speed. This can have a negative impact on your google lighthouse score.

Finished in chrome dev tools encompasses async loading of assets, which may continue to download even after the onload event has occurred. When additional content is loaded through scripts via ajax, the finished time will increase. This metric is crucial in determining the time taken to load all the content, including lazily loaded images, scripts, etc., which should ideally be loaded post the load event to enhance your page's SEO.

How do you measure the time from entering a URL in a web browser to the full page load?

The pivotal event to focus on, particularly for search engines, is the load event. Hence, the finish time holds less significance. The aim is to defer loading any content that is not required for the initial user interaction with your app until after the load event is triggered.

It is advisable to pay attention to navigationStart instead of requestStart. There is a time gap between when the user hits enter (navigationStart) and when the actual request is initiated (requestStart).

Referencing the W3C spec:

navigationStart

This attribute must return the time immediately after the user agent finishes prompting to unload the previous document. If there is no previous document, this attribute must return the time the current document is created.

Quoting MDN:

performance.timing.navigationStart + performance.now() will be approximately equal to Date.now()

Utilizing performance.now() at onload helps determine the duration taken to reach that point. However, this method lacks support in IE9 and some browsers round off the results. The more consistent choice is to use

Date.now() - window.performance.timing.navigationStart

, which is compatible with IE9.

JavaScript snippet for logging the load event time.

window.addEventListener('load', (event) => {
    console.log('All assets are loaded')
    console.log(Date.now() - window.performance.timing.navigationStart);
});

Why do window.performance values remain constant post initial load?

This phenomenon is common in Single Page Applications (SPAs). Once the DOM and initial assets are loaded, any subsequent content is fetched asynchronously. Routing in SPAs is managed on the client side and does not trigger a fresh page load in chrome dev tools. Even upon manually reloading the page, the 'preserve log' option in the network tab must be disabled to obtain updated performance values.

Answer 2

Why is the difference between 'finished' and 'domComplete - requestStart'?

DOMContentLoaded signifies that all the DOM content has loaded, but javascript and images are still in the process of loading.

Load indicates that all the content, including javascript and images, has been fully loaded. By initiating lazy loading of images and javascript prior to this event, it can lead to a delay in the load event and hinder the overall page speed. This can have a negative impact on your google lighthouse score.

Finished in chrome dev tools encompasses async loading of assets, which may continue to download even after the onload event has occurred. When additional content is loaded through scripts via ajax, the finished time will increase. This metric is crucial in determining the time taken to load all the content, including lazily loaded images, scripts, etc., which should ideally be loaded post the load event to enhance your page's SEO.

How do you measure the time from entering a URL in a web browser to the full page load?

The pivotal event to focus on, particularly for search engines, is the load event. Hence, the finish time holds less significance. The aim is to defer loading any content that is not required for the initial user interaction with your app until after the load event is triggered.

It is advisable to pay attention to navigationStart instead of requestStart. There is a time gap between when the user hits enter (navigationStart) and when the actual request is initiated (requestStart).

Referencing the W3C spec:

navigationStart

This attribute must return the time immediately after the user agent finishes prompting to unload the previous document. If there is no previous document, this attribute must return the time the current document is created.

Quoting MDN:

performance.timing.navigationStart + performance.now() will be approximately equal to Date.now()

Utilizing performance.now() at onload helps determine the duration taken to reach that point. However, this method lacks support in IE9 and some browsers round off the results. The more consistent choice is to use

Date.now() - window.performance.timing.navigationStart

, which is compatible with IE9.

JavaScript snippet for logging the load event time.

window.addEventListener('load', (event) => {
    console.log('All assets are loaded')
    console.log(Date.now() - window.performance.timing.navigationStart);
});

Why do window.performance values remain constant post initial load?

This phenomenon is common in Single Page Applications (SPAs). Once the DOM and initial assets are loaded, any subsequent content is fetched asynchronously. Routing in SPAs is managed on the client side and does not trigger a fresh page load in chrome dev tools. Even upon manually reloading the page, the 'preserve log' option in the network tab must be disabled to obtain updated performance values.

Determine webpage load speed using Javascript and the window.performance.timing method

Answer №1

Why is the difference between 'finished' and 'domComplete - requestStart'?

How do you measure the time from entering a URL in a web browser to the full page load?

Why do window.performance values remain constant post initial load?

Similar questions

What is the best way to send a parameter to a mousewheel event?

In Next.js, encountering an error when using canvas drawImage

Issues with Firebase-admin preventing writing to the database are occurring without any error messages being displayed

Efficiently sending VueJS data to a separate script

Guide to updating information in Firestore using Node.js, embedded in a map array

Troubleshooting problems with background-image in CSS using Javascript

Tips for injecting scripts into the head tag after an Angular component has been loaded

Modify the color of a div element in React when it is clicked on

Mobile Menu in wordpress stays visible after being clicked

PHP - Offline/Online Status Polling Protocol Guide for Beginners

dynamic rendering in React based on the value passed through props

What is the best way to modify a current state object without causing an endless loop of redirects?

The value of a select box cannot be retrieved until it has been clicked on

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file

Navigating the path for the script src dynamically with the help of Angular.js and Javascript

What is the best way to scrape information from a real-time website using Python?

Angular 2 Mixup: Using Leaflet and Google Maps with Incorrect Tile Order

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

What techniques can I use to merge alpha channels with compositing in images?

Having trouble with AngularJS not rendering on your HTML page?