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.
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
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%.
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
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.
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.