A faster loading websites gives the users (readers) pleasant experience, and a faster site scores bonus and the slower ones dumped even though it has some good content and design.
To design a faster loading web site, we have to enlist the factors that affects the loading speed of a website. And they are
- HTML & CSS Rendering
- Files like pictures, background images, flash, sound files etc.,
- HTTP requests
- Cookie Access
Factors other than design issues are Network speed, server loads, that can be solved by choosing good hosting solutions. I westhost for shared hosting, vpsnet for cloud and buy cdn from vps.
Design Heuristics For Faster Loading
HTML & CSS
HTML and CSS is the basic building blocks of a web page. Always use externally linked css at the top of the html page in the head section and avoid internal and inline CSS codes. why? because
- Inline Style sheets (CSS) are more often repeated again and again in a page, results in increased texts indeed increased size & rendering time.
- Browser need CSS to show the content properly, so CSS should loaded before any other page elements.
Follow W3 standards for coding your page design.
Pictures & Background Images
Do not use the image as it is, try to compress it to the extent, at which there is no loss of quality. JPEG is common image extension, but .png, .gif plays better that .jpeg images.Here I am not talking about content images, here I pointing images that integrates with design like background images, buttons, etc.
There are many desktop software s for compressing a image, Smush.it from Yahoo developer network is a good online service for loss less image compression.
It is very important to make a image sizable and cache able. All the theme or design images should not load again and again for various pages of the same site, provided all the pages of the site uses same design. Making the images cache able, site only loads content not the images.
Reduce HTTP requests
Consider a page has 1 html file, 2 css file, 2 js file, 15 icons & buttons, 5 background images, totally there are 1+2+2+15+5=25 http requests are made to load a page. So to reduce the request, just reduce the files. How to do it.
Combining all CSS files in to 1 file and all JS files in one, there is another concept called gzip which compresses all the needed files in to one file. Regarding buttons and images there is anther concept in CSS called CSS Sprite.
Avoiding URL Re directions to reduce http requests.
Spriting is a concept of combining all images in to one and particular image is used by specifying the position of the needed image in the combined image. Here is an example, alvistor uses the single image for displaying icons. A particular image in this can be used by specifying the position.
Here in this combined sprite image there are 15 icons for different purpose. If I upload this 15 separate images and link to my design, it needs 15 extra http requests for downloading each single icon of this. A browser can handle 1 request at a time, even though modern browsers are capable of handle 4 to 8 requests per time. Even if it is 4 it need 4 batch to download all icons completely. But in CSS Sprite, it the http request is reduced from 15 to 1, that means pretty faster loading.
This is not difficult as it seems. SpriteMe offers you a service, all you have to run your site under spriteMe, it will combine all your image in to one and re-write your CSS, all you have to do is just merge the CSS created by SpriteMe with your existing CSS.
Empty hooks & Cookies
These are some trivial things sometimes do its part in speeding up a site. Empty hooks for ‘href’ in anchor tag and ‘src’ in image tag should be eliminated.
Some complicated designs like eCommerce websites need cookies, if your design is going to set cookie make it small and less accessible.
Hooks and cookies are not going to affect the speed in considerable rate, but if you plan to optimize a design to the core, just take this also.
Flash & Other multimedia Components
I strongly recommend, not to use multimedia components and flash. It makes your site slow and occupies large amount of browser memory. HTML 5 is capable of doing all the animations that a flash can have. So stay away from Flash, up to my knowledge, flash don’t works for some operating system like apple’s ipad, and some other. If you want your design to work in all environment don’t in include flash and tedious multimedia components.
I hope, this article gives you some clear vision about designing a faster website design or theme. If you have any doubts and need clarification, I am eagerly waiting to respond your comments below.
Note: Test your site design with other sites at alvistor.com/speedtest