High Performance Web Sites for Performance Testing

“High Performance Web Sites” for performance testing.

Started reading again “High Performance Web Sites” by Steve Souders. A book focused on essential knowledge about web performance for frontend software engineers. Also, I would say that this book is a good option for QA and Performance Testers because many times improvements from the front-end are not considered in development teams. For some months now, together with my colleagues, we have been carrying out performance testing processes that also include analyzing and optimizing the front-end, and this process is being carried out in collaboration with developers, QA, and Performance Testers.

The book “High Performance Web Sites” presents 14 specific rules to consider when building web applications, according to its author Steve Souders. These can reduce the response time of applications by up to 25% and as much as 50%. On the author and his book, Joe Hewitt, better known for his work in Firebug debugger and DOM Inspector development, said:

“If everyone implemented only the 20% of Steve’s guidelines, the web would be a much better place. With this book and Steve’s YSlow extension, there really is no excuse for having a slow website.”

Also, developer of Fiddler Web Debugger, Eric Lawrence said:

“Steve Souders has done a fantastic job converting a massive and semi-secret art into a set of concise engineering steps that will change the world of web performance.”

Implementing these rules are key to accelerating response times in web applications. Below you will find these rules, and in the following posts we will show them with real examples.

1.- Reduce HTTP Requests #

Reducing HTTP requests is the most essential technique for optimizing your website. Decreasing the number of components on a page reduces the number of HTTP requests needed to represent the page. There are multiple solutions such as combining JavaScript and CSS into one file, using image maps or CSS Sprites, among others.

2.- Use CDN #

Content Delivery Network (CDN) is a way to deliver content from your website or mobile application to users more quickly and efficiently, depending on their geographic location. It consists of servers located around the world that provide an equally fast web experience for its users. The proximity of the user to your web server has an impact on response times. Implementing your content in multiple dispersed geographically servers will make your pages load faster.

3.- Add an Expires header #

When adding an Expires header to components with future dates, you can store them in cache, which reduces the time it takes for your pages to load. This should be done with images, scripts, and stylesheets. It does not affect page performance, even if the page is revisited later, reducing response times. These are important for reducing HTTP requests, which reduces the time it takes for the server to communicate with the browser. Also allows users to reuse cached files stored in their browsers to reduce the number of files that need to be downloaded.

4. Gzip Components #

Most applications today implement some form of compression. Compression reduces the time it takes to respond by reducing the size of HTTP response. Compressing as many types of files as possible is a simple way to reduce page weight and accelerate user experience. Gzip is currently the most popular and effective method of compression available, generally reducing response size by approximately 70%. Approximately 90% of current Internet traffic passes through browsers that claim to be compatible with gzip.

5.- Place styles at the top #

The author of the book specifies that when investigating web performance on Yahoo!, they discovered that moving the style sheets to the HEAD allowed pages to load faster. This is because placing styles inallows for progressive rendering, which is especially important for pages with a lot of content and users with slower Internet connections. Giving users visual feedback, such as progress indicators, has been well-researched and documented. When the browser loads the page progressively, the header, navigation bar, logo at the top, etc., serve as visual feedback to the user who is waiting for the page. This improves the overall user experience.

6. Place the script at the bottom #

Placing scripts at the end of pages allows other resources to not block, while downloading a script, the browser does not start any other download even on different hostnames. If scripts are placed at the end of a page, they will be loaded last. In other words, the content/structure (CSS, images, HTML) will load first and show something in the browser faster; users do not have to wait for a script to finish downloading before being able to view anything on the application.

7.- Avoiding CSS Expressions #

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. These expressions can produce thousands of unnecessary CSS evaluations. These expressions are evaluated frequently: when the page is rendered and changes in size, when we use the scroll down on the page, even when the user moves their mouse over the page. Frequent evaluations degrade the user experience.

8.- Externally Creating JavaScript and CSS Files #

Using external files allows pages to be faster because the browser stores them in cache. These files are inserted into HTML documents that are downloaded each time an HTML request is made. This reduces the number of HTTP requests necessary, but increases the size of the HTML. On the other hand, if the JavaScript and CSS files are stored externally in the browser’s cache, the size of the HTML decreases without increasing the number of HTTP requests.

9.- Reduce DNS Searches #

DNS lookups add delays to initial requests to a host. Requesting from many different hosts can impact performance. DNS has a cost in terms of time, typically taking between 20 and 120 milliseconds to find the IP address of a hostname. The browser cannot download anything from the host until the search is complete.

10. Minify JavaScript and CSS #

Remove unnecessary characters from JavaScript and CSS to speed up download times. Minification removes unnecessary characters from an file to reduce its size, improving loading times. When a file is minimized, comments and unnecessary spaces (spaces, new lines, tabs, etc.) are removed. This improves response time by reducing the size of downloaded files.

11. Avoid Redirections #

Avoid the use of URL redirections, as they add additional delays to page load. URL redirections are performed using HTTP status codes 301 and 302, which indicate to the browser that it should go to another location. Inserting a redirect between the user and the final HTML document retracts everything on the page, as no content can be represented until the HTML document arrives, and components cannot be downloaded until then.

12.- Remove Duplicate Scripts. #

Duplicating the same file of JavaScript twice in a page is bad for performance. In other words and more simply, duplicating JavaScript and CSS generates additional requests and wastes time because they will be evaluated multiple times.

13.- Configure ETags #

These are unique identifiers assigned to a specific version of a resource given on a web server. ETags are one of the several mechanisms that HTTP provides for caching validation, which allows clients to make conditional requests. The problem with ETags is that they won’t match when a browser gets the original component from a server and then makes a GET conditional request to a different server. This is common in websites using a cluster on the server side. For “very busy” sites with multiple servers, ETags can prevent identical resources from being cached in the cache, which degrades performance. Therefore, they should be configured correctly.

14. Make Ajax Requests Cacheable (Cacheable) #

Allowing AJAX requests to be cached can avoid unnecessary delays. One of the benefits of AJAX is that it provides instant feedback to the user because it asynchronously requests information from the web backend server. However, using AJAX does not guarantee that users will not wait for asynchronous JavaScript and XML responses. Optimizing AJAX responses is important for improving performance, and making them cacheable is the best way to optimize them.

Conclusion #

Implementing these rules will provide a significant exponential improvement in terms of response times and user experience. While it is true that many of them may be very easy to implement and bring substantial improvements in terms of response time, others can lead to somewhat more technical solutions that end up being a bit costly but the recommendation here is working hand-in-hand with all involved in software development: developers, infrastructure, architects, project managers, even UX designers.
If you are willing to delve into these topics, this book will be a good ally because it teaches each rule with practical examples. Even for beginners has an excellent chapter to teach about the HTTP protocol, one of the fundamental knowledge for all involved in this area.