Reducing load time, or making the user think the load time is less

Question

I've been working on a website, and we've managed to reduce the total content for a page load from 13.7MiB's to 2.4, but the page still takes forever to load.

It's a joomla site (ick), and it has a lot of redundant DOM elements (2000+ for the home page), and make 60+ HttpRequest's per page load, counting all the css, js, and image requests. Unlike drupal, joomla won't merge them all on the fly, and they have to be kept separate or else the joomla components will go nuts.

What can I do to improve load time?

Things I've done:

• Added colors to dom elements that have large images as their background so the color is loaded, then the image
• Reduced excessively large images to much smaller file sizes
• Reduced DOM elements to ~2000, from ~5000
• Loading CSS at the start of the page, and javascript at the end
  • Not totally possible, joomla injects it's own javascript and css and it does it at the header, always.
• Minified most javascript
• Setup caching and gziping on server

Uncached size 2.4MB, cached is ~300KB, but even with so many dom elements, the page takes a good bit of time to render.

What more can I do to improve the load time?

Answer 1

Are all the DOM elements necessary? If they are, is it possible to hide them as the page loads? Essentially, you would have your important need-to-be-there dom elements render with the page, and then when the document is loaded, you could unhide the rest of the elements as necessary

$('.hidden').removeClass('hidden')

Answer 2

Check out this article.

http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/

If the link gets removed or lost the tools mentioned are:

• YSlow (by Yahoo)
• Google's Page speed
• AOLs web page test
• Smush.it (Image compression tool)

Answer 3

It sounds like you've done a great job of working around the real problem: those giant graphics. You can probably squeeze some more efficiency out of caching, minifying, etc., but there has to be a way to reduce the size of the images. I worked with a team of some of the pickiest designers on Earth and they never required uncompressed JPEGs. Do you mean images cut out of Photoshop and saved on full quality (10)? If so, the real solution (and I appreciate that you may not be able to accomplish this) is to have a hard conversation where you explain to the design company, "You are not your users." If the purpose of the site is to only impress other visual designers with the fidelity of your imagery, maybe it's ok. If the purpose of the site is to be a portfolio that gains your company work, they need to re-asses who their audience is and what the audience wants. Which, I'm guessing, is not 2 minute load times.

Answer 4

Evidently, there are plugins for compressing and combining JS/CSS files:

http://extensions.joomla.org/extensions/site-management/site-performance

http://extensions.joomla.org/extensions/site-management/site-performance/7350

Answer 5

Have you enabled HTTP Compression (gzip) on your web servers? That will reduce the transfer size of all text-based files by 60-90%. And your page will load 6-10x faster.

Search StackOverflow or Google for how to enable it. (It varies per server software: Apache, IIS, etc).

Answer 6

I would say you can't do anything. You're close to the absolute limit.

Once you get to a critical point, you'll have to compare the amount of effort you'd need to input into further compressing the site against the effort of throwing the most bandwidth expensive components out the window. For example, you might spend 20 hours further compressing your site by 1%. You might also spend 40 hours on throwing the Joomla theme away and starting again saving 50%. (though probably not).

I hope you find an easy answer. I feel your pain as I am struggling to finish a Drupal project than has been massacred by a designer who hasn't implemented his own code in years and has become institutionalized in a cubicle somewhere near a tuna salad sandwich.