CSS Sprites (was Wanted: New feature ideas for GSOC projects)

Re: CSS Sprites

by Mauno Korpelainen -
Number of replies: 0

And sprites could be used for other than course pages too - for example the main page of moodle.org ... http://analyze.websiteoptimization.com gave the following report

Web Page Speed Report

URL: http://moodle.org
Title: Moodle.org: open-source community-based tools for learning
Date: Report run on Sat Mar 7 05:02:16EST2009

Diagnosis

Global Statistics

Total HTTP Requests: 46
Total Size: 112421 bytes

Object Size Totals

Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 6992 1.59 0.24
HTML Images: 45999 11.37 2.44
CSS Images: 17967 7.18 3.70
Total Images: 63966 18.55 6.14
Javascript: 39098 9.79 2.21
CSS: 2365 1.67 1.21
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00

External Objects

External Object QTY
Total HTML: 1
Total HTML Images: 11
Total CSS Images: 18
Total Images: 29
Total Scripts: 10
Total CSS imports: 6
Total Frames: 0
Total Iframes: 0

Download Times*

Connection Rate Download Time
14.4K 96.33 seconds
28.8K 52.77 seconds
33.6K 46.54 seconds
56K 31.61 seconds
ISDN 128K 16.06 seconds
T1 1.44Mbps 9.80 seconds

*Note that these download times are based on the full connection rate for ISDN and T1 connections. Modem connections (56Kbps or less) are corrected by a packet loss factor of 0.7. All download times include delays due to round-trip latency with an average of 0.2 seconds per object. With 46 total objects for this page, that computes to a total lag time due to latency of 9.2 seconds. Note also that this download time calculation does not take into account delays due to XHTML parsing and rendering.

Page Objects

QTY SIZE# TYPE URL COMMENTS
1 14220 SCRIPT http://moodle.org/lib/overlib/overlib.js Header size = 307 bytes
Congratulations! This file was compressed. 
1 7329 SCRIPT http://moodle.org/theme/moodle2/sm/c_smartmenus.js Header size = 306 bytes
Congratulations! This file was compressed. 
1 6992 HTML http://moodle.org Header size = 697 bytes
Congratulations! This file was compressed.
View a formatted version of this HTML file  
1 6917 IMG mp.moodle.com ... file.php/moodle/block.gif Header size = 400 bytes  
1 5936 IMG http://moodle.org/theme/moodle2/pix/community.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 5533 CSS IMG moodle.org ... odle2/pix/pix/list_bg.jpg Header size = 553 bytes  
1 5488 IMG moodle.org ... odle2/pix/development.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 5342 IMG moodle.org ... odle2/pix/moodle-logo.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 4934 IMG http://moodle.org/theme/moodle2/pix/download.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 4617 IMG http://moodle.org/theme/moodle2/pix/about.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 4394 IMG http://moodle.org/theme/moodle2/pix/support.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 4128 SCRIPT http://moodle.org/lib/javascript-static.js Header size = 306 bytes
Congratulations! This file was compressed. 
1 3652 SCRIPT http://moodle.org/lib/ufo.js Header size = 306 bytes
Congratulations! This file was compressed. 
1 3612 SCRIPT http://moodle.org/lib/speller/spellChecker.js Header size = 306 bytes
Congratulations! This file was compressed. 
1 3548 IMG http://moodle.org/theme/moodle2/pix/news.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
2 3297 CSS IMG http://moodle.org/theme/standard/pix/tab/right.gif Header size = 271 bytes  
1 2730 CSS IMG moodle.org ... d/pix/tab/right_hover.gif Header size = 271 bytes  
1 2345 SCRIPT http://moodle.org/lib/overlib/overlib_cssstyle.js Header size = 306 bytes
Congratulations! This file was compressed. 
1 1947 IMG moodle.org ... le2/pix/moodle-logo-1.gif Header size = 271 bytes
Missing width attribute.  
1 1876 SCRIPT http://moodle.org/theme/moodle2/sm/c_config.js Header size = 306 bytes
Congratulations! This file was compressed. 
1 1869 IMG http://moodle.org/images/opensource.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 1526 CSS IMG moodle.org ... /pix/background_grd_1.jpg Header size = 272 bytes  
1 1018 CSS http://moodle.org/theme/moodle2/styles_ie6.css Header size = 288 bytes
Congratulations! This file was compressed.
View a formatted version of this CSS file  
1 1007 IMG http://moodle.org/pix/i/rss.gif Header size = 271 bytes
Missing width attribute.
Missing height attribute.  
1 1000 SCRIPT http://moodle.org/lib/dropdown.js Header size = 306 bytes
Congratulations! This file was compressed. 
1 923 CSS IMG http://moodle.org/theme/moodle2/pix/menu_grad.jpg Header size = 271 bytes  
1 916 SCRIPT http://moodle.org/lib/cookies.js Header size = 305 bytes
Congratulations! This file was compressed. 
1 826 CSS IMG moodle.org ... /pix/background_rev_1.jpg Header size = 271 bytes  
2 541 CSS IMG moodle.org ... pix/box_bright_orange.png Header size = 270 bytes  
1 525 CSS http://moodle.org/theme/moodle2/styles_ie7.css Header size = 287 bytes
Congratulations! This file was compressed.
View a formatted version of this CSS file  
1 399 CSS http://moodle.org/theme/standard/styles_ie6.css Header size = 287 bytes
Congratulations! This file was compressed.
View a formatted version of this CSS file  
1 392 CSS IMG moodle.org ... ix/header_stripe_grad.jpg Header size = 271 bytes  
1 383 CSS http://moodle.org/theme/standard/styles_ie7.css Header size = 287 bytes
Congratulations! This file was compressed.
View a formatted version of this CSS file  
2 315 CSS IMG http://moodle.org/theme/moodle2/pix/navbar_bg.jpg Header size = 271 bytes  
2 293 CSS IMG http://moodle.org/theme/standard/pix/tab/left.gif Header size = 270 bytes  
1 292 CSS IMG moodle.org ... rd/pix/tab/left_hover.gif Header size = 270 bytes  
2 291 CSS IMG moodle.org ... 2/pix/bt_right_orange.png Header size = 270 bytes  
1 289 CSS IMG moodle.org ... odle2/pix/bb_right_bg.png Header size = 270 bytes  
1 270 CSS IMG http://moodle.org/theme/moodle2/pix/bb_left_bg.png Header size = 270 bytes  
1 269 CSS IMG moodle.org ... ndard/pix/tab/tabrow1.gif Header size = 270 bytes  
2 60 CSS IMG moodle.org ... /pix/bt_right_8_white.gif Header size = 244 bytes  
1 60 CSS IMG moodle.org ... 2/pix/bt_left_8_white.gif Header size = 244 bytes  
1 60 CSS IMG moodle.org ... 2/pix/bb_left_8_white.gif Header size = 244 bytes  
1 20 CSS http://moodle.org/theme/standard/styles.php Header size = 300 bytes
Congratulations! This file was compressed.
View a formatted version of this CSS file  
1 20 CSS http://moodle.org/theme/moodle2/styles.php Header size = 298 bytes
Congratulations! This file was compressed.
View a formatted version of this CSS file  
1 20 SCRIPT http://moodle.org/lib/javascript-mod.php Header size = 305 bytes
Congratulations! This file was compressed. 
46 ^ 112421*   Total (^unique objects)

# Congratulations. This site is using HTTP compression, otherwise called content encoding using gzip. The sizes reported here are for compressed content sent from the server to the client.

* CSS alternate stylesheets may be referenced in the HTML but are not actually downloaded until they are needed and are therefore not included in the total page size.

Analysis and Recommendations

  • TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization. Y
  • TOTAL_OBJECTS - Warning! The total number of objects on this page is 46 which by their number will dominate web page delay. Consider reducing this to a more reasonable number. Above 20 objects per page the overhead from dealing with the actual objects (description time and wait time) accounts for more than 80% of whole page latency. See Figure II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets for more details on how object overhead dominates web page latency. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Using CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques can reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames or a CDN to reduce object overhead.
  • TOTAL_IMAGES - Warning! The total number of images on this page is 29 , consider reducing this to a more reasonable number. Recommend combining, replacing, and optimizing your graphics. Replace graphic rollover menus with CSS rollover menus to speed display and minimize HTTP requests. Consider using CSS sprites to help consolidate decorative images. Use CSS techniques such as colored backgrounds, borders, or spacing instead of graphic techniques to reduce HTTP requests. Replace graphic text headers with CSS text headers to further reduce HTTP requests. Finally, consider optimizing parallel downloads by using different hostnames to reduce object overhead.
  • TOTAL_CSS - Warning! The total number of external CSS files on this page is 6 , consider reducing this to one or two external files. Combine, refine, and optimize your external CSS files. Ideally you should have one (or even embed CSS for high-traffic pages) on your pages. You can optimize CSS files using shorthand properties, grouping, and then minify and GZIP compress them to reduce their footprint. Remember to place CSS files in the HEAD and JavaScript files at the end of the BODY to enable progressive display.
  • TOTAL_SIZE - Caution. The total size of this page is 112421 bytes, which will load in over 20 seconds on a 56Kbps modem - or 31.61 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections. Be sure to provide feedback for pages over 100K by layering your design to display useful content within the first two seconds. Consider optimizing your site with Website Optimization Secrets, Speed Up Your Site or contacting us about our optimization services.
  • TOTAL_SCRIPT - Warning! The total number of external script files on this page is 10 , consider reducing this to a more reasonable number. Combine, refactor, and minify to optimize your JavaScript files. Ideally you should have one (or even embed scripts for high-traffic pages) on your pages. Consider suturing JavaScript files together at the server to minimize HTTP requests. Placing external JavaScript files at the bottom of your BODY, and CSS files in the HEAD enables progressive display in XHTML web pages.
  • HTML_SIZE - Congratulations, the total size of this HTML file is 6992 bytes, which less than 50K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your HTML to display content in under 10 seconds, the average time users are willing to wait for a page to display without feedback.
  • IMAGES_SIZE - Caution. The total size of all your images is 63966 bytes, which exceeds 50K. Consider optimizing and creatively cropping your images, and combining them where appropriate. Even better, replace graphic text and form controls with styled text to eliminate unnecessary HTTP requests. Ideally each image should be less than 1160 bytes, to easily fit into one TCP-IP packet.
  • SCRIPT_SIZE - Warning! The total size of external your scripts is 39098 bytes, which is over 20K. Consider optimizing your JavaScript for size, combining them, and using HTTP compression where appropriate for any scripts placed in the HEAD of your documents. You can substitute CSS menus for JavaScript-based menus to minimize or even eliminate the use of JavaScript.
  • CSS_SIZE - Congratulations, the total size of your external CSS is 2365 bytes, which is less than 8K.
  • MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 10K.