Creating the most effective and high quality website is demand of the day, but the fact that the website should be fast loading is also an important point. In fact according to me this is the most important thing to remember while designing a website, because in world nobody has time to waste. If the website is slow then the visitor might switch to some other website which offers same resource. So to avoid this every designer should make a fast loading website. In this article you will find how to clean up CSS, TML and images in order to increase your page speed.
1-Cleaning CSS
1.Unused Styles: At times there are a few styles on the sheet which are not being used for quite a while, such style can be detected easily using tools like Dust Me Selectors, as they are main reason of slow speed of loading. There is no need for you to delete these for-ever; you can save these styles separately on your computing device, so that your visitors need not to download them each time they visit.
2.Lots Of Colors: If there are a lot of colors on your CSS then I think its time to consider building a style guide to determine which color represents what. There should be a limited list of hexadecimal codes or RGB values to be used across your site. These multi-colors not only decrease the speed of your page but also retrieve the page of its professional look.
3.Combine Styles: If you are also one of those who see duplicate styles for a unique element then this point is for you. Do not worry if you do so, it is a sign of a good designer. All you need to keep in mind here is that you attribute ONE set of declaration to all elements that share style.
4.Inefficient Selectors: There are cases where unnecessary weight is being added to the site. while designing a CSS extra selectors should be used very efficiently to places where they are necessary. Always try to use the smallest selecto first this will help you keep CSS small and manageable. Use Page Speed to track all inefficient selectors quickly.
2-Clean HTML
1.Divitis: Sometimes developers get carried away by overwhelmed parent element and do not realize that they are adding unnecessary weight to their site. Divitis can be a bloating element for both CSS and HTML. Here is the tip to overcome this. Try to remove all the unnecessary elements to get a simpler and smoother hierarchy.
2.Stick To Your Grid: Extraneous grid-based markup can really decrease the speed of your work. Try to stick to your own grid but keep elements and classes that are semantic and necessary for your content structure. This will help you increase the speed of loading your site.
3-Clean Images
1.Size And Format: When it comes down to images, for speeding up the page, the most important thing to keep in consideration is size and format. It is very important to know what file type is better for what type of page. This can increase your page speed from 10% (using Web dialogue at 75% instead of 50%) to 15% (Using JPGs at 50% instead of PNGs). Yu can us ImageOptim for final compression of images.
2.Sprite: On the website there are more than one image ad icon of same size and purpose bloating your website. Here is the tip, create a single sprite for all repeating for 1x background image on your site. Use and reuse the codes and images in order to save your time when you are building something new.
3.Planning: Site speed is also affected by proper planning of image efficiency. Try to plan things like transparency, size,repeating backgrounds and the ability to combine images in sprites, prior to working. If your site is being used by multiple developers then you should keep a regular check and try to reuse the images.
Page load time is an excellent indicator of the health of your site, so stay on top of keeping your pages clean.