Optimization Frontend App by Performance Testing

Web 2.0 has emphasized visual, interactive front-ends, increasing complexity. Now, poor user experiences come not just from back-end optimizations but from how long pages take to load content.

So, fixing all front-end performance issues without compromising aesthetics or function is key for a good user experience. Also, Google now ranks sites in search partly based on webpage speed, further highlighting the importance of front-end performance.

What Constitutes the Front-End of a Website?

The Front-end, also known as the client-side, refers to the user interface or the specific section of an application (website or software) that a user observes on their screen. This interface facilitates direct interaction for users to input desired or necessary commands and access various areas within the application.

Significance of Front-End Performance Enhancement

Web performance optimization used to focus on server-side, as sites were static. But with Web 2.0's dynamic apps, client-side merits attention, too. This has led performance engineers to rethink testing strategies.

Optimization approaches:

• Back-end/Server side
• Front-end/Client side

Developers often thought back-end was most crucial. Server issues can cripple apps. However, for user experience, front-end performance matters more.

Improving back-end by 50% may only boost app performance by 10%. But cutting front-end time in half can increase performance by 40%+. Front-end optimization is also simpler and cheaper than back-end changes like architecture redesign. A Yahoo study found only 10-20% of page load time is back-end, while 80-90% is front-end.

                         Difference between Front-end performance testing and load testing

Front-end performance testing revolves around the question, "How quickly does this page load?" from the perspective of a single user. This activity is also referred to as "Web performance optimization."

On the other hand, load testing shifts the focus to "How rapidly does this page load when 1000 users are engaging with the application?" This perspective considers multiple users simultaneously utilizing resources. Conducting load tests is crucial to understanding the capacity of your application, validating business requirements, or assessing the overall performance under specific worst-case scenarios. Utilizing a load testing tool, such as WebLoad, is essential for these purposes.

For the optimization of rendering speed on the front-end for individual users, Web-Load can be easily employed. There are also other specialized tools available in the market for this purpose.

Tools for Frontend Performance Testing

A few years ago, it was a challenging task for web developers to comprehend the sequence of events that unfolded after a user submitted a request in a browser. However, in contemporary times, there are numerous online tools designed to assist in elucidating the entire process from the moment a user hits the enter button in the address bar. These tools:

• Evaluate web pages based on predefined rule sets or user-defined criteria.
• Provide suggestions to enhance the web page's performance.
• Summarize the components of the web page.
• Display statistical information about the web page.
• Several well-known sources for Front-end performance testing include:

1. Page Speed
2. Y-Slow
3. Firebug
4. Web Page Test
5. Yatra.com

1. Website Speed

Website Speed, an open-source Firefox/Firebug add-on introduced by Google, assesses web pages and offers recommendations to reduce loading time. This service involves routing web pages through a Google server applying diverse algorithms to enhance their efficiency and speed. Utilizing this tool accelerates the retrieval of web pages, especially when users access them through the Google search engine.

2. Y-Slow

 Y-Slow, a browser plug-in by Yahoo, assesses web pages against optimization rules outlined by the Yahoo performance team and provides recommendations to enhance webpage optimization.

3. Firebug

Firebug stands out as a browser plug-in offering a range of services, including front-end development debugging, monitoring all network requests, and profiling JavaScript function calls. It is a preferred tool among many developers for evaluating and profiling client-side performance.

4. WebPage Test

 Web Page Test is a complimentary online service that furnishes a front-end speed testing facility for websites. This service allows the assessment of website speed across popular web and mobile browsers from diverse geographical locations. It offers comprehensive details on all application components, proving invaluable for application optimization efforts.

5. Yatra

 Yatra is a web optimization solution that furnishes a Yatra performance score for web applications. It discerns areas that wield significant influence on application performance, aiding in the identification of key contributors to optimization.

Front-End Performance Testing With Web-Load

Front-end Performance Testing with Web-Load

The Web-Load Script Editor captures and scrutinizes all requests exchanged between the user and the application to construct a test scenario. The Replay function validates the script by replaying and comparing each request with the initial scenario.

Within the Replay tab, for each page in your test scenario, a graphical bar chart illustrates the time allocated to the primary request (depicted in blue) and the overall response time (depicted in orange). Furthermore, it provides detailed information on all the loaded resources, the time allocated for each resource, and the comprehensive HTTP response details (Body, Client HTTP Header, Server HTTP Header) associated with each HTTP request.

For every page, you also obtain the HTML view, source view, structure view, HTML tree view, and HTML server headers view.

A summary of web page performance provides information on DNS time, TCP connection time, SSL handshake time, send time, server time, receive time, response HTTP status, response size in bytes, etc.

The waterfall chart for page speed highlights resources that pose optimization challenges for each page in your test scenario.

Front-End Implementation

 The front-end of a web application typically follows a thin client architecture. In this architecture, the thin client is responsible for presenting the user interface (UI) without processing any data. Likewise, in conventional web applications, the client-side comprises web browsers. Commonly used web browsers today include Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, and Opera. The browser's role is to communicate with the web server using the HTTP protocol, render the UI of the web application, and facilitate user inputs.

 The user interface is commonly rendered in web applications as an HTML document. This HTML document encompasses text, input fields, links to other resources, embedded objects, and references to images, scripts, and style sheets. The web browser retrieves the root HTML document, parses its text, and resolves referenced resources.

 Subsequently, scripts are executed, style sheets are processed, and other content is rendered to the user. The sequence of these events depends on the specific browser. These events can be executed concurrently or step by step, depending on the chosen browser.

 User input is transmitted through HTML elements, typically in the form of forms. Forms collect user inputs through elements such as text fields and checkboxes. Upon successful form submission, form data is sent to the server via an HTTP request, and the corresponding response is rendered to the user.

Front-End Performance Enhancement Strategies

In recent times, substantial efforts have been directed toward client-side optimization, with Yahoo and Google leading the way in this domain. These companies not only offer services for measuring front-end performance but have also established a set of rules for optimizing application performance on the client side. These rules have gained widespread adoption, contributing to faster applications. While an exhaustive list of these rules is extensive, we will focus on discussing a select few that prove to be particularly instrumental in optimizing client-side performance.

Minimize HTTP Requests

An HTTP request is utilized to retrieve the root HTML document, which may reference other resources like images, scripts, and style sheets. Each of these resources necessitates a separate HTTP request, contributing to performance overhead by generating network traffic between the client and server. Reducing the number of resources lessens the HTTP requests required to render the web page, thus enhancing performance.

 One approach to diminishing web page components is to streamline its design, but this may impact its visual appearance. The optimal approach involves using efficient resources while combining them strategically to minimize user response time. Consolidating all scripts into a single script and style sheets into a solitary stylesheet is a challenging yet highly effective method for achieving performance optimization goals.

 Similarly, web page images can be consolidated using techniques such as CSS Sprites, Image maps, and Inline Images.

Leverage a Content Delivery Network

In the current technological era, web applications are extensively used worldwide. Deploying an application in a single location can significantly impact users accessing it from longer distances due to network delays. To cater to users globally, applications can be deployed across different geographical locations. Enhancing user response time can be achieved by distributing static web content to various locations rather than undertaking the challenging task of redesigning the application to distribute dynamic content.

 A Content Delivery Network (CDN) comprises a network of web servers distributed across diverse locations to efficiently deliver web content. By minimizing the number of network hops, user requests are serviced from the nearest web server, considerably improving response time.

 While some large internet companies have developed their own CDNs, it may not be a cost-effective decision for smaller companies. Fortunately, there are various CDN service providers in the market whose services can be employed to optimize end-user response time.

Implement an Expiry or Cache Control Header

Browser caching is a valuable means of optimizing client-side performance. In the current landscape, applications are becoming more sophisticated, incorporating various page components such as images, style sheets, and scripts. During a user's initial visit to a webpage, numerous HTTP requests are made to download all the page resources. However, upon revisiting the same page, there is no need to download all the resources again. Modern browsers possess the capability to cache webpage components, allowing for their reuse without requesting them from the web server every time. This feature significantly reduces the number of downloaded resources and HTTP requests.

It is recommended not to assign an expiry date to a static component, while the web server should utilize an expiry header to inform the client about the duration for which a dynamic component can be cached.

Condense JavaScript and CSS

The process of removing unnecessary characters from code is referred to as minification. Optimizing page load time involves eliminating superfluous elements such as comments, newline commands, metadata, whitespaces, and additional newline commands. This reduction in additional elements not only decreases the size of the web page but also improves its download time. Additionally, obfuscation is another optimization technique applied to the source code, often yielding superior results compared to minification.

Compress Components Using GZip

Modern browsers universally support compressed components. All plain text documents such as HTML, JS, CSS, and XML can be compressed on the server side before being transmitted to the web browser. The web browser then decompresses these documents before displaying them to the end user. It's essential to note that binary files like images, PDFs, and SWF should not undergo compression since they are already compressed. Attempting to compress already compressed elements can lead to wasted CPU utilization and may even increase the file size.

 Enabling compression for web page components requires minimal effort, as it can be easily configured on most web servers. The impact of minification and compression on web page size is demonstrated in the following table.

Place Style Sheets at the Top

Research conducted at Yahoo revealed that positioning style sheets in the document HEAD enables progressive rendering by the browser, resulting in faster page loading. This approach is particularly beneficial when dealing with larger page sizes. Instead of making users wait for the rendering of all page elements, which can lead to boredom as they stare at a blank screen, providing a good user experience involves displaying the page and its components gradually. This is preferable to the user waiting and then suddenly viewing all the components.

It's worth noting that some modern browsers, including Internet Explorer, do not engage in progressive rendering of web page components when style sheets are placed at the bottom, potentially frustrating users with a blank page.

Position Scripts at the Bottom

The simultaneous download of multiple sources is known as parallel downloading, enhancing the user experience by retrieving all necessary resources more quickly. As per the HTTP specification, a browser does not download more than two components in parallel for a hostname. However, you can achieve parallel downloading of more than two components by serving your resources from multiple hostnames. Scripts, unfortunately, do not support parallel downloading.

Steer Clear of CSS Expressions

CSS expressions are employed to dynamically set style sheet properties. For instance, a CSS expression might be used to alternate the background color every 30 minutes. These expressions undergo frequent evaluation, occurring whenever a user takes any action. Evaluation happens during page rendering, resizing, page scrolling, and even mouse hovering. The evaluations are so frequent that moving a mouse around the page can generate over 10,000 evaluations.

 To address this situation, consider using a one-time CSS expression. When the expression is first evaluated, set those values as explicit style sheet values. If there's no alternative but to use dynamic style sheet values, opt for event handlers instead of relying on CSS expressions.

Externalize JavaScript and CSS

To expedite page response time, consider making JavaScript and CSS files external. When these files are cached by the browser, utilizing them as external files proves advantageous. When JavaScript and CSS are embedded in the HTML document, they are downloaded every time the HTML document is fetched, consequently enlarging the HTML document size. A more effective strategy involves transforming both JavaScript and CSS into external files, which are then cached by the browser. This approach reduces the size of the HTML document while maintaining the same number of HTTP requests.

Optimize Images

Modern web pages are crafted to be visually appealing, often featuring numerous images. Significant improvements in web page load time can be achieved through the optimization of these images. An essential aspect of this optimization is selecting the appropriate file format. Typically, the JPG image format is employed for images with a high number of colors. On the other hand, PNG is the preferred format for rendered text and images with alpha transparency.

Minimize Domain Name System (DNS) Lookups

The Domain Name System (DNS) translates domain names into IP addresses. Typically, it takes 20-120 milliseconds for DNS to look up the IP address for a given domain, and the browser cannot initiate any downloads from this hostname until the DNS lookup is completed.

 While DNS lookups are cached for enhanced performance, and this DNS information is stored in the operating system's DNS cache, most browsers maintain their own cache. For instance, Internet Explorer caches DNS lookups for 30 minutes by default, rendering the operating system cache ineffective when the DNS record is present in the browser cache.

 The number of DNS lookups corresponds to the unique hosts on the web page when the browser cache is empty. Therefore, reducing the number of unique hostnames will contribute to a decrease in page load time.

Steer Clear of Redirects

Redirects are executed using HTTP status codes, specifically the 3xx series, with the 301 (Moved Permanently) and 302 (Found) status codes being common. A redirect signals that the user must take additional actions to fulfill the request. The primary issue with redirects is that they impede page load time. Redirects occur in various scenarios, such as when a backslash (/) is not appended to the end of the URL. Another instance of redirection is when an old website is linked to a new one. Redirects due to the absence of a backslash can be rectified in Apache by utilizing the Alias directive.

Eliminate Redundant Scripts

In the development of a web application, it's common for multiple developers to collaborate, increasing the likelihood of script duplication on web pages. Duplicate scripts can significantly impact web page performance, necessitating additional execution, resources, and HTTP requests for scripts that serve no purpose in the end. While the impact of duplicate scripts may be minimal in Firefox, it can notably affect Internet Explorer. The insertion of duplicate scripts can be avoided by utilizing a script management module.

Disable Entity Tags

Entity tags (ETags) serve to validate that the browser cache data is up-to-date by comparing the browser's cached copy with the one in the server cache. However, ETags have a limitation—they only compare the browser cache to a unique server. This method functions effectively when there is only one hosting server. In situations where an application is hosted on multiple servers and the browser retrieves components from one server but validates them on another, ETags are rendered ineffective. Notably, ETags generated by IIS and Apache for the same component won't match from one server to another. Consequently, users receive a 200 response code instead of the more efficient and faster 304 response from ETags. In scenarios where an application is hosted on multiple servers, it is advisable to turn off ETags.

Optimize Caching and Size of Ajax Requests

Ajax offers the advantage of delivering instant feedback to users by asynchronously requesting information from the backend web server. However, this doesn't guarantee that users won't experience delays while waiting for asynchronous JavaScript and XML responses. To enhance performance, it becomes crucial to optimize these Ajax responses. A key strategy for boosting the performance of Ajax is to ensure that the responses are cacheable.

Conclusion

Web applications are evolving with increasingly sophisticated designs and content, with a strong emphasis on providing an optimal user experience. There is a common misconception that achieving the desired response time for an application can be solely accomplished by optimizing the server side. However, research indicates that a significant portion, approximately 80-90%, of page load time is spent on the client side. Remarkably, 40-50% of page load time can be optimized by directing attention to the front-end of the application, in contrast to the relatively smaller impact of server-side optimization, which typically accounts for around 20%.

It's crucial to recognize that front-end performance optimization differs from back-end optimization. Front-end optimization primarily revolves around enhancing performance from a single user's perspective, while back-end optimization is geared towards improving performance when multiple users concurrently access resources.

These two tasks are complementary and can be effectively tested using tools like Web-Load.