This blog explains some of the best practices to be followed for optimizing the web page for better performance. This mainly talks on the front end coding part which includes HTML, Style Sheet, JavaScript, images etc.
Every byte we save in a JSP/HTML attributes to few bytes per page and if you look at the number of pages delivered per day, this number would be a considerably huge number. By optimizing the page size we can reduce the bandwidth utilization on our infrastructure, thereby allowing other necessary process to utilize them.
1. There should not be any unnecessary HTML comments in the JSP – Since the HTML comments are delivered in the response which in turn will increase the page size, we should stick to scriptlet comments in JSP pages.
2. Unnecessary whitespace characters in the JSP should be removed.
3. There should not be any inline scripts or styles in the JSP as this again can increase the page size. If it is part of the static content, make it part of the g-zip compressed resource.
4. If an HTML portion is not required, then we should not have the content present in the html as hidden. Instead we should put a condition in JSP in such a way that the HTML portion is not generated and included in the response.
5. All the JS and CSS should be imported or defined in a single place (if applicable).
6. We can also look at the option of removing line breaks in the JSP, instead we can use the return carriage between the HTML tags.
For example:
<body>
<div id=”myDiv”>
:
:
</div>
The above code can be indented as there by saving the return carriage space
<body><div
id = ”myDiv”>:
:
</div>
7. Optimal use of HTML hidden variables, only necessary attributes to be set.
8. No iFrames to be used unless it is absolutely necessary.
9. Minify JS/CSS files: Minification refers to the process of removing unnecessary data without affecting the functionality. This includes removing the comments, code formatting, unused code etc. This will result in reduced size and hence it will load faster. This applies to resources like JavaScript and CSS.
There are many tools available for JS/CSS minification. We can consider tools such as YUI Compressor for the same.
10. Combine JS/CSS files: Concatenating multiple resource files into one will help in improving the performance by reduced network calls. If there are many separate files getting loaded in a page, there will be multiple server calls happening from the browser and will impact the performance. Combining multiple files will reduce the server calls and hence improve the performance.
We should take a look at the file size while combining the JavaScript/CSS files. The combined file should not be of large size, we should combine only the files which can be retained with in a range of 300~400 kb.
11. Avoid unwanted library usage: If we are using any library JS files, make sure we are loading only the required JS files in each page instead of including all the library files.
12. Leverage g-zip compression: GZIP compression is an effective way to save bandwidth and reduce download time. GZIP performs best on text-based assets: CSS, JavaScript, and HTML. All modern browsers support GZIP compression and will automatically request it. It usually provides 50~80% reduction in content size, in JS/CSS files. The combination of minified files, plus GZIP, offers more advantage. This can be configured in the web server level.
13. Optimize images: Optimize the images using techniques such as CSS spriting. By using this technique, portions of a single image can be used for displaying multiple images in the website.
14. Remove render-blocking JavaScripts
15. Remove duplicate imports
Every byte we save in a JSP/HTML attributes to few bytes per page and if you look at the number of pages delivered per day, this number would be a considerably huge number. By optimizing the page size we can reduce the bandwidth utilization on our infrastructure, thereby allowing other necessary process to utilize them.
1. There should not be any unnecessary HTML comments in the JSP – Since the HTML comments are delivered in the response which in turn will increase the page size, we should stick to scriptlet comments in JSP pages.
2. Unnecessary whitespace characters in the JSP should be removed.
3. There should not be any inline scripts or styles in the JSP as this again can increase the page size. If it is part of the static content, make it part of the g-zip compressed resource.
4. If an HTML portion is not required, then we should not have the content present in the html as hidden. Instead we should put a condition in JSP in such a way that the HTML portion is not generated and included in the response.
5. All the JS and CSS should be imported or defined in a single place (if applicable).
6. We can also look at the option of removing line breaks in the JSP, instead we can use the return carriage between the HTML tags.
For example:
<body>
<div id=”myDiv”>
:
:
</div>
The above code can be indented as there by saving the return carriage space
<body><div
id = ”myDiv”>:
:
</div>
7. Optimal use of HTML hidden variables, only necessary attributes to be set.
8. No iFrames to be used unless it is absolutely necessary.
9. Minify JS/CSS files: Minification refers to the process of removing unnecessary data without affecting the functionality. This includes removing the comments, code formatting, unused code etc. This will result in reduced size and hence it will load faster. This applies to resources like JavaScript and CSS.
There are many tools available for JS/CSS minification. We can consider tools such as YUI Compressor for the same.
10. Combine JS/CSS files: Concatenating multiple resource files into one will help in improving the performance by reduced network calls. If there are many separate files getting loaded in a page, there will be multiple server calls happening from the browser and will impact the performance. Combining multiple files will reduce the server calls and hence improve the performance.
We should take a look at the file size while combining the JavaScript/CSS files. The combined file should not be of large size, we should combine only the files which can be retained with in a range of 300~400 kb.
11. Avoid unwanted library usage: If we are using any library JS files, make sure we are loading only the required JS files in each page instead of including all the library files.
12. Leverage g-zip compression: GZIP compression is an effective way to save bandwidth and reduce download time. GZIP performs best on text-based assets: CSS, JavaScript, and HTML. All modern browsers support GZIP compression and will automatically request it. It usually provides 50~80% reduction in content size, in JS/CSS files. The combination of minified files, plus GZIP, offers more advantage. This can be configured in the web server level.
13. Optimize images: Optimize the images using techniques such as CSS spriting. By using this technique, portions of a single image can be used for displaying multiple images in the website.
14. Remove render-blocking JavaScripts
15. Remove duplicate imports
No comments:
Post a Comment