Due to the vast variety of incorporated web technologies contained withing modern web pages, performance monitoring and load testing can be a challenging task. This article will look at the particularities of monitoring dynamic web applications and other elements that must be considered when choosing the right type of monitoring tool or solution.

Dynamic Web Pages vs. Static Web Pages

All varieties of web page types can be divided into two main groups: static and dynamic.

In a nutshell, a static web page is an HTML page generated on the server-side in a ready-to-use form. Generally, the page generation is implemented using server-side script languages such as ASP, PERL, PHP, etc. When a browser makes a request to an URL, the server returns an HTML document that already includes text and graphic content of the web page in the response.

On the other hand, the most common type of web pages or applications today are dynamic. To implement dynamic elements, the latest JavaScript frameworks such as React, Vue, Angular JS, Knockout, and Ember are used in web development.

Dynamic web pages bring in the content on user actions while running on a static URL. Dynamic content is more complex in its structure. Pages are not received from the server in ready-to-use HTML documents, but are built for each new request on the client’s computer. Every time a user clicks a button or performs any other action on the web page (navigating between tabs, filling web forms, etc.), the browser performs several steps before rewriting the page content in the window:

  • Parses the HTML document into Document Object Model (DOM);
  • Processes CSS;
  • Executes embedded JavaScript.

Сhallenges of monitoring JavaScript-based applications

While monitoring static web page performance, monitoring tools are looking through the HTTP response received from the target server. Every time a user interacts with a static web page, a browser calls the server and receives a ready HTML in the response. Since all the content that must be shown to a user is already generated and included in the response on the server-side, the tools can validate the content and the page load metrics.

However, modern JavaScript frameworks provide some challenges when it comes to monitoring dynamic web pages.

Content and functionality validation

JavaScript-based web pages, known as single-page applications (SPAs), don’t perform new navigation in the browser once they’ve loaded. The initial HTML document includes JavaScript files that are triggered on any browser events and calls the server for JSON data. These data will be used to update the initial HTML and dynamically change page content in the browser window.

At the same time, SPAs and applications with IFrame inline elements can include embedded third-party content, such as advertisement sections, analytics, widgets (Google Maps, YouTube videos, etc. ). To display such content, browsers parse the page’s HTML code and then execute third-party scripts. Next, third-party scripts fetch the content to display it on the page.

In terms of monitoring, this makes it difficult to say exactly when new content was loaded on the page (loading a picture, opening a dialog box, etc.) because there is no event generated and visible for HTTP-based monitoring tools.

Determining actual page load times and performance

Generally, HTTP responses are used as a successful result of the request to a target web page. But it does not mean that all JavaScript files were parsed and executed by the browser and content was rendered and made visible to users. Once the initial HTML is loaded, the browser begins to execute all the embedded JavaScript. In terms of SPAs and IFrames, the DOM tree can be rendered much earlier or later then the page load completed. In other words, the difference between the time when a real user can interact with a page and the time of load “complete” event could be up to several seconds.

Moreover, once the JavaScript-based page was loaded, all subsequent changes on the page do not trigger new browser requests to the server. As a result, HTTP-based monitoring won’t provide any metrics of changes on the page after the initial page load. To receive actual load times, we need to monitor the JavaScript events in the real browser window.

Full-stack solutions as a key to comprehensive monitoring

As was shown before, modern web application logic traits put limitations on monitoring and testing with tools that work at the protocol level and do NOT use a browser.

To mimic real user experience, a real browser is required to perform monitoring in the full JavaScript runtime environment. Full-stack solutions, like the Dotcom-Monitor monitoring platform and LoadView load testing solution, use real browsers to help overcome all the described challenges and ensure realistic results.

Monitoring dynamic web pages with Dotcom-Monitor and EveryStep Web Recorder

To ensure that a user receives proper content on a loaded page running on JavaScript engine, Dotcom-Monitor provides an assert keyword and image validation functionality in the real browser window. Here are the simple steps that you need to execute:

  1. Script user actions on the target web page using the EveryStep Web Recorder.
  2. Set up Content Validation for each step.

For instance, let’s set up monitoring of the Dotcom-Monitor Email Report History page as an example of a JavaScript-based web page.

First, we need to open the EveryStep Web Recorder and provide the target URL.

Once the recording is started, to ensure that drop-downs on the page work properly and specified content was loaded, we need to check drop-down elements and set up an assert keyword per each drop-down. In the case of a content validation error, an alert will be generated for the monitoring device.

How to spot performance issues in SPAs

SPA logic relies heavily on JavaScript technology. Consequently, to ensure the application’s SLA requirements are met, it’s necessary to monitor performance metrics of JavaScript events generated on the page.

Dotcom-Monitor allows users to configure reporting on the time of JavaScript requests execution or the time of processing and executing a specific user action on the target page. To receive data on the JavaScript metrics in device reports, use Network Watcher and Time Watcher inline functions in ES Recorder.

Also, for web applications built with AJAX technology, you can spot AJAX request metrics in the device’s Waterfall Chart.

Summary

In summary, while setting up monitoring for dynamic web pages and applications, it’s recommended to use a monitoring solution that utilizes real browsers to catch all the JavaScript events in the browser window, giving you the most accurate monitoring results.

To monitor dynamic content and functionality performance in SPAs, content validation (image and keyword validation) in real browser environments and JavaScript performance metrics monitoring should be performed.