Check this web optimization report - how can I fix it?

Question

Hi guys I ran the analyser on http://www.websiteoptimization.com/services/analyze/ and I got a number of issues the most prominent are the ones below:

---

*TOTAL_OBJECTS - Warning! The total number of objects on this page is 93 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 85 , 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.*

---

The issue is that 85 images mentioned are all referenced in my css file - I'm not sure how but I would like to bring this number down - however I do require all these files at some point in my website.

Any ideas to optimize this even further.

Plus my javascript file is a whopping 150K even after maximum compression - I've run out of ideas to reduce overheads and could sue some tips.

Answer 1

you can chop your CSS file into different files in order to get not that many images. The same for javascript files. Do you really need that 150K javascript at every page? Refactor it into different files and include only what you need.

Answer 2

You can use CSS Sprites for images (eg menu rollovers or icons). This is beneficial for two reasons:

• Spriting images common to multiple pages allows the browser to cache the sprite image, and therefore reduces subsequent downloads on other pages of your site.
• Spriting images reduces server load by reducing the number of requests sent to and received by the server, since many images can be combined into one larger image.

You said that your JavaScript is compressed to the maximum - however, is all of it needed by your page? Or can it be split between several pages? Also, are there bits in your script that are unnecessary or that can be cut down, for example by using wrapper functions for tasks that you commonly perform in your scripts. A simple example of this would be using the Prototype-esque $ function in place of document.getElementById, which if called many times can reduce the size of your JavaScript quite significantly.

Also, as the report suggests, use styled text instead of images representing styled text if and where you can (of course this is not applicable in all instances).

Answer 3

Also look at what your images are. A common thing I see is different background-images for navigation - one image says 'Home', another says 'About us', ect.

You can combine those into one blank background-image and write the text on top.

Answer 4

Regarding your JS file, you could remove carriage returns on your release version, "minify" (change all internal variables and methods to 1- or 2-character names) and/or gzip it. JQuery uses these techniques; the production release is 19K, while the development release is 120K - a savings of more than 80%.