The image at /photo_thumb2.jpg I was able to knock down FROM 6,999 bytes to 2,013 bytes using 16 colors / indexed colored GIF with very little image degradation in Photoshop's
Save for web... dialog. You
might be able to knock that down even further with some super-fancy PNG compression that isn't available in Photoshop though I'd highly recommend posting in the graphics forum for that. The under construction image is 81KB, a 32 color indexed colored GIF would knock it down to 26KB.
I posted a tutorial that you can read in-depth here...
[
webmasterworld.com...]
Secondly and this is what you should really be doing is getting rid of jQuery and
not replace it with some other framework. Use
real JavaScript code. It's 91 kilobytes which is absolutely asinine, you could get your entire site to load in under 91 kilobytes if you follow my advice. Some people will downplay this point though I've only found negative points and no positives. Everything you are using jQuery already exists so rip out all that junk and start adding 'javascript' to the beginning of your searches and '-jquery' to the end of your searches. The best reason? If every smoe is doing it and you're not then you have greater value than they do. My entire site loads in
half the bandwidth of jQuery itself (and only a third of the version you're using).
What would really help you out as well is
not loading everything and forcing the user to wait. You load
22 megabytes...holy crap dude! Only load what the user will initially see. Once everything is loaded then you can concentrate on caching in the background if you want. Don't think Windows Vista/7 and force load everything in existence expecting the user to go through it all, do computing the right way and
only load what the user needs up front.
Get yourself a copy of Fiddler (version 2.2.9.1 or older, Microsoft has lost all of their marbles and are intentionally making their software more difficult to use so search on "old version" websites). You can use it to load your site (be sure to empty the cache before you load) and see what is being transferred.
You
are running your site local on your computer, making changes, debug and once things work smoothly
then commit/upload your changes, correct? It's exceptionally unprofessional to work on a live site without first ensuring changes work, make sure you're working locally first, I recommend getting a copy of XAMPP, it's very easy to get things running quickly.
As far as loading JavaScript what I do for my site to maintain the lowest possible entry barriers bandwidth wise (it's very friendly to folks on dial-up and mobile and loads a lot of stuff though only
ondemand) is load script files that features that aren't likely to be used by most users. That's subjective for any site but it basically works by creating a script element. It pings the
typeof function that you want to use to initialize once the script is loaded and once the typeof returns as a 'function' it then calls the function.
- John
// Example usage...
// ondemand('site-editor','site_editor_1_events');
// loads "scripts/site-editor.js"
// combined with base element on my site
function ondemand(url,f)
{
if (eval('typeof ' + f)=='function') {eval(f+'();');}
else
{
var js=document.createElement('script')
js.setAttribute("defer","defer")
js.setAttribute("src",'scripts/'+url+'.js')
js.setAttribute("type","text/javascript")
document.getElementsByTagName('head')[0].appendChild(js);
setTimeout(function() {ondemand_poll(f,0);},'100');
var t = document.createTextNode('\n');
document.getElementsByTagName('head')[0].appendChild(t);
}
}
function ondemand_poll(f,i)
{
if (i<100) {setTimeout(function() {if (eval('typeof ' + f)=='function') {eval(f+'();');} else {i++; ondemand_poll(f,i);}},'100');}
else {alert('Error: could not load \''+f+'\', please check your internet connection.');}
}
