23 Front End Performance Rules for Web Applications

Like most things in life, web applications have rules you must follow, and this is especially true when you move from a performance testing mindset to a performance engineering mindset. Once you understand the value of performance engineering and why you need itand once you know what key performance engineering metrics are, the 23 performance engineering best practices below will help you optimize user experience and achieve the best business results.

1. Add long-term header expiration dates

Upcoming header expiration dates prevent effective caching and slow down repeat visits to your site from the device more than necessary.

2. Make fewer HTTP requests

Latency has a substantial impact on the performance of mobile applications. Reducing the number of unique objects on the page will help reduce latency sensitivity.

3. Avoid URL Redirection

Redirects can cause significant delays for web access for mobile users. Try to reduce the number of redirects.

4. Avoid empty SRC or HREF codes

You can expect a browser to do nothing when it encounters an empty image SRC tag. However, this is not the case in most browsers. Safari will make a request to the page itself. This behavior could corrupt user data, waste server computation cycles by generating a page that will never be viewed, and in the worst case, cripple your servers by sending large amounts of unexpected traffic.

5. Remove duplicate JavaScript and CSS

Evaluation of redundant scripts wastes time and duplicate parsing occurs even though the script may be cached. Duplicate scripts also waste mobile bandwidth.

6. Make AJAX cacheable

One of the benefits of AJAX is that it provides instant feedback to the user by requesting information asynchronously from the backend web server. However, using AJAX does not guarantee that the user will wait for the return of asynchronous JavaScript and XML responses. Optimizing AJAX responses is important for improving performance, and making responses cacheable is the best way to optimize them.

7. Avoid HTTP Error 404 (Not Found)

Making an HTTP request and receiving a 404 (Not Found) error is expensive and degrades the user experience. Some sites have helpful 404 messages (e.g., “Did you mean…?”), which may help the user, but server resources are still wasted.

8. Remove Unsupported Components

Not all devices support all component types (such as Flash).

9. Use cookie-free domains

When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies cause unnecessary network traffic. As a workaround, ensure that static components are requested with cookieless requests by creating a subdomain and hosting them there.

10. Reduce cookie size

HTTP cookies are used for authentication, personalization and other purposes. Cookie information is exchanged in HTTP headers between web servers and the browser, so keeping cookie sizes small minimizes the impact on response time. Also consider using HTML5 instead of cookies to maintain application state information.

11. Compress components with gzip

Gzip compression reduces the size of the HTTP response and therefore the response time. The response size is typically reduced by about 70%.

12. Minify CSS and JavaScript

Minification removes unnecessary characters from a file to reduce its size, improving load times. When a file is minified, comments and unnecessary white space (space, newline, and tab) are removed. This improves response time since the download size is reduced.

13. Avoid CSS Expressions

CSS expressions are a powerful and dangerous way to dynamically set CSS properties. These expressions are evaluated frequently: when the page is rendered and resized, when the page is scrolled, and even when the user manipulates the page through touch events. These frequent ratings can degrade the user experience.

14. Remove Unnecessary CSS Rules

Any rules in the CSS that are not needed for the current page should not be downloaded. Consider evaluating your CSS with an automated tool that identifies unused selectors and analyzes CSS coverage.

15. Reduce the number of DOM elements

A complex page means more bytes to download, and it also means slower DOM access in JavaScript. httparchive.org yields an average of 1,300 DOM elements per page. Reduce the number of DOM elements on the page to improve performance.

16. Do not resize images in HTML

Web page designers sometimes define image dimensions using the width and height attributes of the HTML image element. Avoid doing this, as it may result in larger images than necessary. For example, if your page requires the image myimg.jpg, which has dimensions of 240 x 720 but displays it with dimensions of 120 x 360 using the width and height attributes, the browser will download a larger image than necessary. .

17. Reference Images in HTML

Images that are only referenced in the CSS will not be downloaded until the CSS is downloaded. Consider referencing images in the main HTML page to speed up mobile page rendering time.

18. Use a Content Delivery Network (CDN)

The proximity of the mobile operator’s internet gateway to web servers can impact response times. Using a CDN brings content to servers closer to the user, reducing latency and improving performance.

19. Reduce DNS Lookups

The Domain Name System (DNS) maps host names to IP addresses, much like directories map people’s names to their phone numbers. When you type a URL into the browser, the browser contacts a DNS resolver which returns the server’s IP address. DNS has a higher cost on mobile networks than on traditional wired networks; typically, it takes 120 to over 400 milliseconds for a mobile search of the IP address associated with a host name. The browser cannot download anything from the host until the search is complete.

20. Use GET for AJAX requests

When using the XMLHttpRequest object, the browser implements POST in two steps: first it sends the headers, then it sends the data. It’s better to use GET instead of POST because GET sends headers and data together (unless there are a lot of cookies). However, Internet Explorer’s maximum URL length is 2 KB, so if you send more data, you may not be able to use GET.

21. Put JavaScript at the bottom

The problem caused by the scripts in the HEAD section is that they block parallel downloads. The iPhone actually downloads the components in any order it wants, so scripts and stylesheets are always downloaded first. As long as your scripts are above the stylesheets and not in the HEAD, they won’t block anything and will always be among the first downloaded, so there’s no need to put them all at the bottom.

22. Use HTML5

HTML5 offers new features that can reduce the number of bytes going from your server to the client. These features include local storage, manifest, and databases.

23. Resize images

Devices have limited screen sizes. There is normally no reason to have images larger than the screen size.

These rules are an excellent starting point, but applying them requires considerable knowledge and skill. Stay tuned for future articles where I will explore these rules in more detail.

keep learning