1) Make fewer HTTP requests
Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.
a) Combine CSSes as much as possible
b) Combine JSes as much as possible
c) Use CSS Sprites
2) Flush the Buffer Early
Usually, you get the result of an HTTP request when the server completes processing the HTML output. So the delay would vary depends upon the time the server prepares the HTML page requested. There is an ondemand method to fetch what is ready at that time and that is what flush is. In PHP, you have flush() function, which sends the partially ready HTML output to the browser. A good place to consider flushing is right after the HEAD.
4) Put CSS calling to the top (at HEAD)
Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.
5) Put JS at the bottom of the page
JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.
6) Avoid empty href or src
You may expect a browser to do nothing when it encounters an empty image src. However, it is not the case in most browsers. IE makes a request to the directory in which the page is located; Safari, Chrome, Firefox 3 and earlier make a request to the actual page itself. This behavior could possibly corrupt user data, waste server computing cycles generating a page that will never be viewed, and in the worst case, cripple your servers by sending a large amount of unexpected traffic.
7) Add Expires headers
Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.
8) Avoid CSS expressions
CSS expressions (supported in IE beginning with Version 5) 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 moves the mouse over the page. These frequent evaluations degrade the user experience.
9) CSS and JS elements should never be included in the HTML page (should have separate pages)
Using external JavaScript and CSS files generally produces faster pages because the files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded each time the HTML document is requested. This reduces the number of HTTP requests but increases the HTML document size. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the HTML document size is reduced without increasing the number of HTTP requests.
10) Reduce DNS lookups
The Domain Name System (DNS) maps website names to IP addresses so that those websites can be reached. Just like how the post masters identify your house with the address you provided. When you type the URL http://www.techbrein.com into the browser, the browser contacts a DNS resolver that returns the server’s IP address. DNS has a cost; typically it takes 20 to 120 milliseconds for it to look up the IP address for a hostname. The browser cannot download anything from the host until the lookup completes.
11) Use internal domains/IPs when possible
Programmers tend to use the site name always while writing code to setup a new oubound connection for mail or anything else. That should not be the case. You should use internal domain or IP when available. For example, if you want to send email via SMTP, you should write “localhost” as the SMTP host if the mail server resides on the same physical server where the web server resides. If the mail server is a hosted on a remote machine within the internal network, you should mention the domain name that points to the internal (private) IP of the mail server instead of mentioning the domain name that points to the public IP.
10) Minify CSS and JS files
Minification removes unnecessary characters from a file to reduce its size, thereby improving load times. When a file is minified, comments and unneeded white space characters (space, newline, and tab) are removed. This improves response time since the size of the download files is reduced.
11) Remove old or unwanted pages
Programmers usually prefer to keep a copy of the old page as something like “page.old” if they are making wholesale changes to the file. You should make sure that these old files are removed before the website is published online. Although, having old or unwanted pages on the web server might not affect the performance of a website directly, they could affect indirectly. It is possible that you forget to update the page change in some of the files and these files would still call the old page, hence causing various issues, not just performance related.
12) Remove duplicate entries from all pages
Programmers sometime place the same code in multiple locations in a file unknowingly. Before publishing the website, you have to review the code and find out if there are such duplicate occurrences of any of the code and remove them if found any.
12) Remove old or commented entries from all pages
Programmers usually prefer the old entries in a page as “commented out” instead of removing it. You should make sure that these commented out lines are removed before the website is published online.
13) Avoid comments in the pages
Programmers usually keep a comment in between the lines wherever they find appropriate probably help them understand the code better when they review it later. It is a very good practice. But you should remove these comments before publishing the website online. The web pages are processed by the server as well as the browser and both are not helped by those comments in any way.
13) Configure ETags (Entity Tags)
Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser’s cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.
14) Use GET for AJAX requests
One of AJAX’s benefits is it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using AJAX does not guarantee the user will not wait for the asynchronous JavaScript and XML responses to return. Optimizing AJAX responses is important to improve performance, and making the responses cacheable is the best way to optimize them.
15) Make AJAX cacheable
One of AJAX’s benefits is it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using AJAX does not guarantee the user will not wait for the asynchronous JavaScript and XML responses to return. Optimizing AJAX responses is important to improve performance, and making the responses cacheable is the best way to optimize them.
16) Make sure there are no access to unexisting pages which cause 404 errors
Making an HTTP request and receiving a 404 (Not Found) error is expensive and degrades the user experience. Some sites have helpful 404 messages (for example, “Did you mean …?”), which may assist the user, but server resources are still wasted.
17) Do not scale images in HTML
Web page designers sometimes set image dimensions by using the width and height attributes of the HTML image element. Avoid doing this since it can result in images being larger than needed. For example, if your page requires image myimg.jpg which has dimensions 240×720 but displays it with dimensions 120×360 using the width and height attributes, then the browser will download an image that is larger than necessary.
18) Have a custom 404 page
Setup a customized 404 page to assist the user with the “not found” page, preferably with a search button.
19) Create a favicon – which is small and cacheable
A favicon is an icon associated with a web page; this icon resides in the favicon.ico file in the server’s root. Since the browser requests this file, it needs to be present; if it is missing, the browser returns a 404 error (see “Avoid HTTP 404 (Not Found) error” above). Since favicon.ico resides in the server’s root, each time the browser requests this file, the cookies for the server’s root are sent. Making the favicon small and reducing the cookie size for the server’s root cookies improves performance for retrieving the favicon. Making favicon.ico cacheable avoids frequent requests for it.
Not so important:
1) Use GET for AJAX requests
When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE’s maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.
1) Avoid AlphaImageLoader filter
The IE-proprietary AlphaImageLoader filter attempts to fix a problem with semi-transparent true color PNG files in IE versions less than Version 7. However, this filter blocks rendering and freezes the browser while the image is being downloaded. Additionally, it increases memory consumption. The problem is further multiplied because it is applied per element, not per image.
18) Use cookie-free domains
When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. To workaround this problem, make sure that static components are requested with cookie-free requests by creating a subdomain and hosting them there.
2) Reduce Cookie size
HTTP cookies are used for authentication, personalization, and other purposes. Cookie information is exchanged in the HTTP headers between web servers and the browser, so keeping the cookie size small minimizes the impact on response time.
4) Reduce the number of DOM elements
A complex page means more bytes to download, and it also means slower DOM access in JavaScript. Reduce the number of DOM elements on the page to improve performance.
Leave a Reply
You must be logged in to post a comment.