Minified files

Minified HTML5, CSS3 and Javascript files can save upto 50% of your memory space. So, it is necessary to minify files for faster loading of web pages

In this tutorial, we will see some of the important steps to minify the files.

1. Avoid comments
2. Avoid indentations
3. As javascript does not require line-ending tokens, do not use semi colons for .js files
4. Keep variable names as small as possible
5. Declare all variables with their initial values in one line
6. Avoid unneccessary whitespaces

Practical Examples:

1. Instead of border:none use border:0
2. Instead margin:0px use margin:0
3. Instead of padding:0px use padding:0
4. Try to create generic class for a set of sub classes which have common properties and values
5. Try to use shorthand properties as far as possible

6. For example, instead of
   

   div {
   	margin-top:10px;
   	margin-bottom:15px;
   	margin-left:20px;
   	margin-right:25px;
   }

   type
   div { margin:10px 25px 15px 20px}
7. Try to write multiple selectors and their properties in the same line
8. Try to add a constructor which contains the initial state of variable used in the programme
9. Try to use short cut colour codes. For example, instead of writing #ffffff use #fff
10. Try to find out for common properties and their values for different selectors into one comma-separated list of items
11. Use image sprites and with the help of background-position properties we can crop and image and use that part of the image which is required
12. To set colour and opacity use the functions rgba instead of using the opacity property
13. If you want to implement a particular set of style to the webpage use the a class attribute for those HTML element
14. If your right and left margin for HTML element are equal and top and bottom margins are also equal then use the shorthand property like margin {margin:10px 20px} This will set top and bottom margin to 10px and left and right margin to 20px
15. Use the background image instead of the image element
16. Use small size compressed images and audio and video elements
17. Use AJAX(Asynchronous JavaScript and XML) to load of specific part of a page that is required to be updated instead of reloading the whole page
18. our HTML element can be positioned in absolute or static type then use position absolute
19. To save the size use an overlayn of object. This can be done through many ways like using Z-index property or carousels
20. Before you want to give information on the home page of the webside but it is too large then use the marquee tag on the top or at the bottom