Page Load Time In Single Page Application

Websites are no longer websites. More exactly, a web site is not any longer a 'site,' a single, static location, instead the race to make a lot of immersive digital experiences is creating websites a lot of dynamic and interactive, with content and logic updated in real time.

So, In this blog we will cover following points:-

1. What are single page web applications and Traditional websites.

2. What is page load time and google chrome performance timings( i.e Finish , DOMContentLoaded and Load).

3. Difference between Page Load Time for Traditional Websites and Modern Web Applications i.e.(Single Page Website).

4. And finally, learn about How we can get Page Load Time for Modern Web Applications(Single Page App)

1.1 What is a Multi Page Application?

Multi page applications are the traditional web applications that reload the entire page and displays the new one when a user interacts with the web app.
Each time once information is changed back and forth, a new page is requested from the server to display in the web browser. This method takes time to come up with the pages on the server, sending it to a client and displaying in the browser which may affect the user experience.
However, Ajax had created it doable to render simply a selected part of the applying, but this makes the development process even more difficult and complex.
 

1.2 What is a Single Page Application?
 

As per the name implies, single-page apps consists just one single page. SPAs show the content in an easy, simple and efficient way as it loads all the content on just one single page rather than navigating the user to other pages.
SPAs are faster than old web applications because they execute the logic in the network browser itself rather than on the server. And after the initial page load, only data is sent back and forth instead of the whole HTML that decreases the bandwidth.

?

2.1 What is Page Load Time?

In simple terms, page load time is the average amount of time it takes for a page to show up on your screen. It's calculated from initiation to completion.
 

2.2 Finish Time : 

'Finish' time in Chrome devtools includes the asynchronously loading(non-block) objects/elements on the page which can continue downloading method once the onload event for page has fired.

2.3 DOMContentLoaded and Load Time :

DOM-Content-Loaded is the point when the DOM is ready and there are no stylesheets that are blocking JavaScript execution.
The response time for a website generally speaking means 'Load' time because that is more easily user perceivable, at this point user can see browser has finished working and page is ready on their screen. Finish time, though technically also a response time doesn't have as much end-user implication.

In some cases, it seems the Finish timer never stops and continues increasing so it may not be the best assessment of web page response time.

Where, 

• connectEnd                                     Time when server connection is finished.
• connectStart                                    Time just before server connection begins.
• domComplete                                  Time just before document readiness completes.
• domContentLoadedEventEnd         Time after DOMContentLoaded event completes.
• domContentLoadedEventStart        Time just before DOMContentLoaded starts.
• domInteractive                                 Time just before readiness set to interactive.
• domLoading                                     Time just before readiness set to loading.
• domainLookupEnd                           Time after domain name lookup.
• domainLookupStart                          Time just before domain name lookup.
• fetchStart                                          Time when the resource starts being fetched.
• loadEventEnd                                   Time when the load event is complete.
• loadEventStart                                  Time merely before the load event is fired.
• navigationStart                                  Time after the previous document begins unload.
• redirectCount                                    Number of redirects since the last non-redirect.
• redirectEnd                                       Time after last redirect response ends.
• redirectStart                                      Time of fetch that initiated a redirect.
• requestStart                                      Time just before a server request.
• responseEnd                                    Time after the end of a response or connection.
• responseStart                                   Time just before the start of a response.
• timing                                                Reference to a performance timing object.
• navigation                                         Reference to performance navigation object.
• performance                                     Reference to performance object for a window.
• type                                                  Type of the last non-redirect navigation event.
• unloadEventEnd                              Time after the previous document is unloaded.
• unloadEventStart                             Time just before the unload event is fired.

By using these timing objects we can get load time of page for Traditional websites only, it wouldn’t work for SPA (Single Page Applications).

3. Difference between Page Load Time for Traditional Websites and Modern Web Applications
 

3.1 

A single-page application works in the browser and requires no page reloads and no extra time for waiting. The page doesn’t need to be updated since content is downloaded automatically and DOM not generated only once in SPA .So page load time is also generated for only one time. When we navigate to new views in our app, the timing numbers do not change.

3.2 

A Multi page applications are the traditional web applications that reload the entire page and displays the new one when a user interacts with the web app.
Each time once an information is changed back and forth, a new page is requested from the server to display in the web browser.
and for every page its reload the entire page and shows different time for every page.

In short , If we use chrome dev tool performance.timing API to get page load time , then it wouldn't work in Single Page App and shows constant time for every page. Although chrome dev tool performance.timing API works good in Traditional Web App.

4. And finally learn about How we can get Page Load Time for Modern Web Applications(Single Page App)

We found a way to get an approximation how long a view takes to render page.
The events $routeChangeStart, $routeChangeSuccess, and $viewContentLoaded fire as soon as the route is loaded, but before the DOM renders the items, so they don't solve the issue.

However, through some search and experiment, we found that once the AJAX request finishes and sets $scope.items, Angular begins a block operation of process items and preparing the HTML components to be inserted into the DOM.

Thus, if you get the time after your AJAX call finishes, and get the time again in a setTimeout specified in the callback, the setTimeoutcallback will be queued to wait until Angular is finished with the repeater method and acquire you the time a blink of an eye before the DOM renders, providing you with nearest approximation for rendering time. It will not be a actual render time, however the cruicial part for us isn't DOM doing it's work, however Angular, that is what we are trying to measure.

// Get items to populate ng-repeater
MyApiService.getItems(query)
  .then( function (data) {
    var start = new Date(); 
    $scope.items = data;
    // When callback finishes, Angular will process items
    // and prepare to load into DOM
    setTimeout( function () {
      // Logs when Angular is done processing repeater
      console.log('Process time: ' + (new Date() - start));
    }); // Leave timeout empty to fire on next tick or you can you use it without of setTimeout also.
  }, function (reason) {
    console.log(reason);
  });