Due to the vast variety of incorporated web technologies contained within 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.
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;
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.
Content and functionality validation
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
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.
Monitoring dynamic web pages with Dotcom-Monitor and EveryStep Web Recorder
- Script user actions on the target web page using the EveryStep Web Recorder.
- Set up Content Validation for each step.
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
Also, for web applications built with AJAX technology, you can spot AJAX request metrics in the device’s Waterfall Chart.