Graduation Report: Improving sharing in WorkVoices
As can be seen, these websites spend between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts and style sheets). The negative impact of having many components in a page is increased by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Since I was making use of lots of icons, this was a great opportunity to optimize my code. The most practiced solution to this issue is the use of CSS sprites. CSS sprites are basically a technique where all or a number of images that are used in a webpage or the entire website is combined into one big image and the CSS background positioning technique is used to display the correct image in the correct place in the webpage. This technique reduces the number of HTTP requests made by a webpage and thus saves the overhead of having to fetch multiple images. Figure 12 shows the CSS sprite I used in my project. Using the CSS background positioning technique as demonstrated below, correct image can be easily displayed on a web page. .myImage { background-image: url(/images/sprite.png); background-repeat : no-repeat; background-position: 0 -76px; height: 16px; width: 16px }
Figure 12 WorkVoices icon pack
CSS sprites are generally created manually using graphics editing program such as Photoshop or GIMP. But it can take a lot of planning, measuring and coding to create sprites manually. There are many tools available online that makes it much easier to build CSS sprites. The most recommended spriting service is (SpriteMe). During my project, however, I made use of the (CSS.Sprite.Generator) created by Project Fondue. CSS Sprite Generator allows you to upload all of your images combined into a zip file and it will combine the uploaded images into a single sprite. It can also compress the sprite image with popular PNG image compression algorithm, OptiPNG. Besides, the generator also takes care of a number of browser specific bugs related to CSS sprites. Using this tool to create CSS sprites can save hours of work for a designer /developer. I also designed an icon pack for WorkVoices using Photoshop and Illustrator. A CSS sprite was created of the icons as illustrated by Figure 12. The icons created were sharper compared to existing ones and much smaller in size. In order to optimize the size of the icons, I used the tool PNGOUT developed by (Silverman), and used the tutorial written by (Watson) on how to use PNGOUT. Combining the icons used in WorkVoices into one CSS sprite reduced the number of HTTP requests by 15. It is also worthwhile to mention (PingdomTools) that I used to test the performance of a web page during my project. Pingdom Tools is a web-based application that can be used for easy testing of the performance of web pages. It gives information on the total loading time of a web page and the total number of objects required to render the page. This gives a good insight on things that can be left out or combined. It also gives a visualization of how page objects are loaded and the result can be sorted by load order, load time, file size, file type and URL. This information can be helpful to determine the cause of delay in load time of a web page. Besides, I also contributed on designing the new layout of the WorkVoices web application. Both the design and the icon pack were put online.
25