Thursday, September 15, 2011

Make your page lighther and faster

It is a common scenario where even the regular visitors tend to get frustrated with a webpage which takes longer to load. By decreasing the website load time, businesses can ensure that the visitors are served well and increase the chances of getting potential customers and repeated visitors as well.


This will be a series of topic and inputs from you people will be greatly appreciated.


In course of web site development we use a lot of CSS and images and after some time either we forget to remove unused CSS or forget to format images on site.these things led to increase Page load time.

Things to take care about CSS:

Google Chrome Audit - Useful tool for finding unused CSS styles


It's free and is part of Google Chrome - the browser.


Open Properties > Tools > Developer Tools > Click the Audits tab, 
and then run the testIt shows lots of useful info for you to trim your page down to the bare minimum, to get rid of legacy CSS styles you are no longer using! Of course, the results must be taken with a grain of salt, since for global CSSs it is normal for some styles not to be used in a specific page, but for inline CSSs it's the real deal.

Audit tools not only tell about CSS but also about JS,Images,gzip compression etc.
which help us to decrease page load time.

I had run this on www.msn.com, See the audit below




 

Another useful tool to do this - Dust-Me Selectors- works as a Firefox extension and actually keeps track of CSS usage across different pages. It even comes with a handy Automation tool to scrape out your entire website based on a Sitemap file!




Things to take care about Images :                                                                    

Making use of optimized images
You can find the required tools in your graphic editing program. Those tools can help you with optimizing your website images to best suit the online use. The tools hold the capability to compress the images to almost eighty percent without disturbing its quality but decreasing the file size.
Use of static images instead of animations
In comparison to animated videos and graphics, static images take remarkably less time to load. The use of static images within your webpages can make the page lighter hence making it faster to be loaded in the browser.
Large images to be replaced with thumbnails
Thumbnails are nothing but a shrunken versions of your images. If you take an overview, at most places large images are not at all essential. If you still insist on keeping the large images, you can provide an option to users where they can click on the thumbnail to view a larger image. This technique would further add to your efforts of increasing the speed of your website.
Making adjustments to the tables to load the webpages gradually
Divide the web-page content in smaller chunks of data to help the page load faster. This should keep the visitor interested until the rest of the page gets loaded.
Use of common files for images
This actually helps in two ways. One that, it eliminates the possibility of image duplication. Secondly, the users web browser is able to find the images with minimum efforts which in-turn results in faster page loads.





No comments:

Post a Comment