Performance optimization at the front-end level

Навигация

• 4.1 General provisions for optimization at the front-end level
• 4.2 Lazy loading of images and videos
• 4.3 Using CDN for static resources
• 4.4 Asynchronous data loading via AJAX and Pjax
• 4.5 Optimizing rendering and reducing the number of DOM operations

4.1 General provisions for optimization at the front-end level

The frontend level is responsible for displaying the web application interface and user interaction with the system in the browser. Even with high performance on the server side of a web application, slow loading of static application components (CSS, JavaScript, fonts), heavy scripts or suboptimal page structure can have a negative impact on the speed of the application.

According to Steve Souders, the main goal of web performance is to reduce the time a user waits for a web page to load and display. The author proposes the “Golden Rule of Performance”, according to which 80-90% of the user’s page response time is spent loading and processing front-end components, and not on the back-end. By focusing your efforts on front-end optimization (HTTP requests, caching, CSS/JavaScript structure, etc.), you can significantly speed up your website¹.

Front-end optimization is aimed at reducing page loading time, reducing the amount of data transferred, reducing the load on the user's browser and increasing the smoothness of the interface. In applications developed using the Yii2 framework, front-end optimization is closely related to resource management mechanisms (Asset Bundle) and support for partial page loading technologies.

The scientific literature notes that classical optimization methods (image compression, Lazy Loading, code minification, font optimization) together can improve key performance metrics by up to 2.5 times². This chapter of the VKR discusses the main methods of optimizing the client side: minification and merging of files, lazy loading of multimedia, use of CDN, asynchronous data loading and rendering optimization.

4.2 Lazy loading of images and videos

Web application resources make up a significant portion of the page's weight. In this chapter, a resource will be defined as a resource as defined in RFC 3986. According to that standard, the term "resource" is used in a general sense for anything that can be identified by a URI³. Loading all resources at once may result in a long wait for content to display. For this reason, the technology of so-called lazy loading of resources can be used.

Lazy Loading is a technology in which resources (including images and videos) that are involved in displaying this application outside the scope are loaded only when these resources are in the current scope (when the user scrolls the page to the corresponding element).

It is important to note that sometimes lazy loading technology is used solely for loading images⁴. Among the advantages of this technology are the following: acceleration of initial page loading; traffic savings; reducing the load on the server. Modern browsers support a built-in mechanism: . For video it’s similar:.

4.3 Using CDN for static resources

CDN (Content Delivery Network) is a geographically distributed network of servers that delivers static web application resources to the user from the server that is closest to the user. A CDN can provide access to images, CSS styles, JavaScript libraries; fonts, video. The benefits of using a CDN include reducing data transfer delays, reducing the load on the main server, increasing system availability, caching capabilities at the network level, and speeding up the loading of static resources by users from different regions. For example, popular libraries are often connected via global CDNs:

4.4 Asynchronous data loading via AJAX and Pjax

The traditional model of web applications involves a complete page reload with each request. This causes unchangeable UI elements to be reloaded and increases latency. Asynchronous technologies allow you to update only the necessary parts of the page.

AJAX (Asynchronous JavaScript and XML) allows you to send requests to the server in the background without reloading the page.

Query example:

fetch('/api/data')

.then(response => response.json())

.then(data => {

document.getElementById('result').innerText = data.value;

});

The benefits include reducing the amount of data transferred, speeding up the response of the web application interface, improving the user experience, and reducing the load on the server.

Pjax combines AJAX and browser history management. This technology is supported in Yii2 and allows you to update part of the page while maintaining the correct URL. Main advantages: updating content without a complete reboot; saving page state; reduction of waiting time; improved navigation. Pjax is especially useful for: data tables; page navigation; filtration; dynamic lists.

4.5 Optimizing rendering and reducing the number of DOM operations

Front-end performance depends not only on loading resources, but also on the efficiency of the browser when displaying the page. DOM (Document Object Model) represents the structure of an HTML document. The more complex the DOM tree, the more resources are required to process it. Recommended: avoid excessive nesting of elements; use semantic markup; remove unused elements; minimize the number of nodes.

Any change in the page structure may cause a recalculation of the arrangement of elements. The most expensive operations: changing the size of elements; change of position; mass addition of nodes; frequent references to styles. Optimization measures: group DOM changes; use CSS classes instead of element-by-element changes; Apply element hiding before mass updates; use list virtualization for large volumes of data.

Ineffective JavaScript can block the main browser thread. Recommended: avoid heavy calculations on the client; use debounce and throttling for event handlers; transfer complex operations to the server; use Web Workers if necessary. Web Workers are separate background JavaScript execution threads that run independently of the main thread. Using them, you can move heavy calculations or data processing to a background thread so as not to block the user interface. Web Workers do not have direct access to the DOM, but can communicate with the main thread through the message mechanism.