Performance engineering is the most challenging field in IT. Various projects are developed without thinking about the performance of the application.
This blog provides best practices and coding techniques for writing performance efficient ASP .NET application. This blog deals with increasing the user experience by loading the pages with faster speed. Page speed is measured as the page load time. i.e the lapsed time between the moment a user requests a page and the moment the page is fully rendered by the browser for client.
The best practices cover many steps involved in page load time, including resolving DNS names, setting up TCP connections, transmitting HTTP requests, downloading resources, fetching resources from cache, parsing and executing scripts, and rendering objects on the page.
The performance of the webpages depend upon how to eliminate these steps altogether, parallelising them, and shorten the time taken by them to complete the activity.
The best practices are grouped into following categories
- Server level changes
- CSS & Java-script
- Cookies and Static contents.
Minimize HTTP Requests
Every time a browser made a request for a page from web server, it generates an http request for itself and all its supporting files like Javascript, CSS and image. Reducing the number of components reduces the number of HTTP requests required to render the page. This is the key to faster pages.
One way to reduce the number of components in the page is to simplify the page's design.
Following are some techniques to reduce the number of HTTP requests
- By combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.
- Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
- Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar.
- Also you can reduce number of http requests by caching some static contents.
Avoid 404 responses
HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 not found) is totally unnecessary and will slow down the user experience without any benefit.
In next section, we will see the details about other changes, handling static files and Client level changes
Minimize the Number of iframes
Following are the pros and cons of the iframe
- pros:
- Helps with slow third-party content like badges and ads
- Security sandbox
- Download scripts in parallel
- cons:
- Costly even if blank
- Blocks page onload
- Non-semantic
Reduce the Number of DOM Elements
A high number of DOM elements can be a symptom for performance improvement.
Split Components across Domains
Splitting components allow you to maximize parallel downloads. Make sure you're using not more than 2-4 domains because of the DNS lookup penalty.
Preload Components
Preload may look like the opposite of post-load, but it actually has a different goal. By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you'll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user
Post-load Components
JavaScript is an ideal candidate for splitting before and after the onload event. For example if you have JavaScript code and libraries that do drag and drop and animations, those can wait, because dragging elements on the page comes after the initial rendering. Other candidates for post-loading include hidden content (content that appears after a user action) and images below the fold.
Make Ajax Cacheable
One of the benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from web server. To improve performance, it's important to optimize these Ajax responses. To improve performance of Ajax is, make the responses cacheable,
Even though your Ajax responses are created dynamically, and might only be applicable to a single user, they can still be cached.
Avoid Redirects
This can be accomplished using the HTTP 301 and 302 status codes.
The browser automatically takes the user to the URL specified in the Location field. The details for redirections are available in the headers. The meta refresh tag and JavaScript are other ways to direct users to a different URL.
The main thing to remember is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived. One of the most wasteful redirects happens frequently when a trailing slash (/) is missing from a URL
Avoid Empty Image src
The empty image src makes the browser to send another request to the server. The root cause of this behavior is the way, URI resolution is performed in browsers. When an empty string is encountered as a URI, browser considers it as a relative URI and try to resolve it by sending a web request.
Compress Components
Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method at this time. It was developed by the GNU project and standardized by RFC 1952. Gzipping generally reduces the response size by about 70%. Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request. Gzipping as many file types as possible is an easy way to reduce page weight and accelerate the user experience.
Accept-Encoding: gzip, deflate
If the web server sees this header in the request, it may compress the response using one of the methods listed by the client. The web server notifies the web client of this via the Content-Encoding header in the response.
Content-Encoding: gzip
It is worthwhile to compress/gzip scripts and stylesheets, HTML document and text response including XML and JSON. Image and PDF files should not be compressed because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.
Add an Expires or a Cache-Control Header
Using the Expires header you make the web page components cacheable. Expiry tags help your browser to understand when to invalidate cache for a cached content. You can do it by injecting HTTP headers while delivering it from server to end user’s machine i.e browser.
There are two aspects
• For static components: implement "Never expire" policy by setting far future Expires header
• For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests
Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached.
The user's location to web server has an impact on response times. When a browser makes a request to any web page – a request goes through many hops (routers and computers) and then reaches its final destination. This happens both for requests and responses. This operation affects performance and can severely effect page loading time. The 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, flash, etc.
A Content Delivery Network implies a collection of computers, distributed all over the world to deliver content more efficiently to users. Through a CDN, you can have your website data on multiple servers distributed in different locations around the world. Deploying your content across multiple, geographically dispersed servers will make the request to be served from the nearest location and your pages load faster from the user's perspective.
Use a Content Delivery Network
A Content Delivery Network implies a collection of computers, distributed all over the world to deliver content more efficiently to users. Through a CDN, you can have your website data on multiple servers distributed in different locations around the world. Deploying your content across multiple, geographically dispersed servers will make the request to be served from the nearest location and your pages load faster from the user's perspective.
The next part of this blog is available at Performance Engineering II
BeleTPL.com
