There is an interesting story about Vilfredo Pareto, an economist who made an observation on the wealth of most of the nations in UN and found that 80% of the wealth of a nation is in the hand of 20% of the people in that country. This became famous as the 80/20 rule in the economic world there after.
In our computing world especially in case of web development and web developers who are focusing on performance optimization technique this same rule is working for the code. There are only 20% codes, which are consuming 80% time of the client-server interactions. This is particularly true for http requests. Us web programmers are all aware of the time consumption of each http request. Therefore, minimizing http requests is our first quest on the performance frontier, hence winning more clients in return.
If you have done close observations on the major and popular websites of the world, you may have concluded that they consume 5% to 40% time for downloading HTML documents on desktops to tiny mobiles in case of responsive web designs. However, the average is not going above 10-20%. Now, the question is what is happening in the rest of the 80% time left? Who, or which codes are consuming them? Let’s find answers and some plausible solutions to improve web performance in rest of this article.
Images and Other UI Elements Consuming 80% Time of Loading
Yes, the rest of 80% time is consumed by images and UI elements such as icons and buttons, which are repetitive UI elements on the website. For instance, in above image I have given an example where we have to make 10 http requests for loading a page where only one is for background whereas the rest are for icons and buttons. If we combine these images, of icons and buttons into one, they reduce in size by 40% and our http request remains only one.
What Magic Sprites Do
In above example image you have noticed that we have created a single background image out of five different icons and we are shifting the background image simply on x or y positions, means either horizontally or vertically using CSS’s position command. This simple trick saves us from five times http requests and interactions between client-server. What we are doing is simply load the big background image that is a combination of several images placed at a set distance or of one pixel away from the relevant image respectively. We use our cache (standard cache) mechanism to store the image of the background on initial request and the rest of work is done by simple CSS commands using switching of the positions.
Use Sprite Making Services
If you are a seasoned web programmer or website developer using graphics design software frequently, you may have run several thoughts in your mind. As producing big images from different small images and positioning them using an accurate grid system at pixel perfect positions is nothing short of a daunting task for a web designer or a web programmer. You are absolutely right here, therefore, I would like to recommend you to use SpriteMe. Like sprite making services this works directly on the web on your website pages and lets you make sprites as per your needs and wishes. Moreover, SpriteMe lets you export relevant CSS code in order to make custom CSS during custom web designing projects.
If you wish to use them, let me show a smart way. You will need to create different images and accomplish the web development tasks first. At the final stage of release of your website use sprite making services to make the sprite directly on the web, combine them in to your existing code quickly, and release your website with desirable excellence in performances.
References & More Reading
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
No comments yet (leave a comment)