1. Minimizing HTTP Requests:
Suppose you have these Javascripts
<script type="text/javascript" src="http://www.example.com/menu.js"></script>
<script type="text/javascript" src="http://www.example.com/ajax.js"></script>
<script type="text/javascript" src="http://www.example.com/nav.js"></script>
<script type="text/javascript" src="http://www.example.com/tools.js"></script>
<script type="text/javascript" src="http://www.example.com/footer.js"></script>
<script type="text/javascript" src="http://www.example.com/others.js"></script>
Lets combine all of them into a single Javascript:
<script type="text/javascript" src="http://www.example.com/combined-all.js">
</script>
This way you will reduce the number of HTTP requests to the server and help the page to load faster.
2. CSS Sprites: These are used to reduce the number of HTTP Requests for images on a web page. In this process, a developer combines all images into a single image and use the CSS background-image and background-position properties to then display the desired image segment.
3. Specify image dimensions: Specifying the height and width attributes for all the images helps web browsers render web pages faster, as the web browser is not forced to spend time unnecessarily on calculating the height and width of image(s) and can instead use this time to render other elements of the web page.
Example: This is the sample CSS code:
Browser Caching: For all static resources set “Expires header” to a minimum of one month, and preferably up to one year.Use expires header for all static resources like image(s), script(s), CSS, PDF, Flash etc. (HTML is not static, and shouldn't be considered cacheable)
Suppose you have these Javascripts
<script type="text/javascript" src="http://www.example.com/menu.js"></script>
<script type="text/javascript" src="http://www.example.com/ajax.js"></script>
<script type="text/javascript" src="http://www.example.com/nav.js"></script>
<script type="text/javascript" src="http://www.example.com/tools.js"></script>
<script type="text/javascript" src="http://www.example.com/footer.js"></script>
<script type="text/javascript" src="http://www.example.com/others.js"></script>
Lets combine all of them into a single Javascript:
<script type="text/javascript" src="http://www.example.com/combined-all.js">
</script>
This way you will reduce the number of HTTP requests to the server and help the page to load faster.
2. CSS Sprites: These are used to reduce the number of HTTP Requests for images on a web page. In this process, a developer combines all images into a single image and use the CSS background-image and background-position properties to then display the desired image segment.
3. Specify image dimensions: Specifying the height and width attributes for all the images helps web browsers render web pages faster, as the web browser is not forced to spend time unnecessarily on calculating the height and width of image(s) and can instead use this time to render other elements of the web page.
Example: Instead of coding image(s) like this:
<img src="http://www.example.com/logo.jpg" />
Always code image tags with height and width attributes, like this:
<img src="http://www.example.com/logo.jpg" width="250" height="100"
alt="Unique and relevant keyword(s)" />
4. Place CSS tags first in source code, before Java Script tags:
Example: Let's say you have 3 stylesheets and 2 Java Scripts and you specify them in the following order in the document (inside <HEAD> tags).
<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>
The second two stylesheets must wait until the two java script files are finished downloading. The total download time equals (in this case 100 ms + 100 ms + 100 ms = 300 ms).
Now we will change the order of the CSS and Java Script resources to this:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>
Minify CSS (GZIP): This is the process of removing unnecessary characters from CSS code to reduce the file size, thereby improving load times. To minify CSS code, all comments and unneeded white space characters (space, newline, and tab) are removed.
/* This is a unwanted comment */
h1{
font-size: 18px;
font-family: arial, helvetica, sans-serif;
color: #FF0000;
}
/* unwanted comments comments comments */
p{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
color: #000000;
}
h1{font-size:18px;font-family:arial, helvetica, sans-serif;color: #FF0000;}
p{font-size:12px;font-family:arial, helvetica, sans-serif;color: #000000;}Optimize Java Scripts
Java Scripts can be optimized the same way we optimize CSS. (see Minify CSS above)- Combine all your external Java Script files.
- Put Java Script tags after CSS tags.
- Minify Java Script (GZIP).
- Remove Duplicate Scripts.
Browser Caching: For all static resources set “Expires header” to a minimum of one month, and preferably up to one year.Use expires header for all static resources like image(s), script(s), CSS, PDF, Flash etc. (HTML is not static, and shouldn't be considered cacheable)
No comments:
Post a Comment