How to speed up my site?

[Michael Hubele]

Hi

I been testing my site and the page where most of the action on my site is slow. I tried using sloppy and set it at 56k speed and to load up the page it took about 100seconds to load up.

So I think even for a 56k that is way to slow.

Now I think the reason why it is slow is because this page has lots going. Since it has 3 tabs that probably in the old days would represent 3 different page. Now in this page I have lots of jquery going on. Like I have many plugins plus their style sheets then my own written jquery javascript files.

So when all is said and done. I have like 700kb worth of jquery javascript files and probably like a 100-200(probably more like 150kb) of CSS files/little images the plugins use. This is just a rough rough estimate since I have some files in that directory that I don't actually use and are not being loaded up.

So I think it is this sheer amount of files that is slowing it down. Like after it is cached the page will load up on a 56k in like 11seconds.

So I am not really sure what to do.

I pretty much need all the plugins and most of them are pretty small like 8kb. the big daddy of them all is the UI datepicker and that is like 70kb and that is pretty much the most important plugin I have. I moved the actually jquery(jquery-1.3.2.min.js) to the master page so when they load up the home page that will be cached right away. I don't really want to do that on the other ones since well then I will just make the home page load up slower.

The home page seems to load up in about 1 to 1.5 seconds but sometimes it takes like 5 seconds to load up and I think that might be something to do with my hosting company.


I was thinking about making each tab have an ajax request to load up the stuff but there are not that many controls on each tab(most stuff grows dynamically as the user adds in information what is already ajax). So I don't think that it will give me any sort of speed game and will cause more trouble.

The only thing I can think of is try to identify the plugins and try to load them up when that tab loads up. I am not sure how to do this one and then at the same time I am not sure how much this will help. Like for instance 2 of the tabs use the datepicker and one of the tabs is the one that is open by default. So that would need to be loaded up on start.

So I am not sure how to solve my problem, how to really identify if this is truly the cause of my slow loading and I am thankful for the caching but how long does that stay with the user until it gets deleted?

I used as many mini versions of the plugins and files as I could find. Also does putting everything in one file make it faster? I am pretty sure I could not merge all the plugins into one file but I could probably merge my 3 javascript files into one file. I just put them in 3 different files since it was just easier to figure out what belong to what.

Thanks

[Eric Pascarello]

There are many factors that cause load times to be slow.

First thing I would do is figure out if it is really the downloading of the files that is taking forever or is it the actual rendering of the JavaScript. How can you tell? Run something like no script and see how long the page takes.

You should probably combine the files into fewer files. Means less http requests. You should also at a minimum remove the comments and whitespace from the JS/CSS files. Look into optimizing any images. Make sure you are not using spacer images or any useless image file.

Load your JavaScript files from CNames.

Look at the YSlow plugin for Firebug.

Eric

[Jeanne Boyarsky]

If you can't use a common javascript file, can you use a gzip filter to compress it for sending across the network?

[Michael Hubele]

Eric Pascarello wrote:There are many factors that cause load times to be slow.

First thing I would do is figure out if it is really the downloading of the files that is taking forever or is it the actual rendering of the JavaScript. How can you tell? Run something like no script and see how long the page takes.

You should probably combine the files into fewer files. Means less http requests. You should also at a minimum remove the comments and whitespace from the JS/CSS files. Look into optimizing any images. Make sure you are not using spacer images or any useless image file.

Load your JavaScript files from CNames.

Look at the YSlow plugin for Firebug.

Eric

ok while running no script with sloppy @ 56k speeds it takes 40seconds to load up and with scripts 100seconds. So ya it is eating up quite a bit of time.

So any programs that can merge the files together so on development I still have separate files?

What is is CNames?

[Eric Pascarello]

Most people merge files together with their Maven/Ant builds.

What is a CName? Basically a sub domain.

Eric

[Eric Pascarello]

And I would say your real problem is that 60 extra seconds it takes to render your JavaScript.

Eric

[Michael Hubele]

Eric Pascarello wrote:Most people merge files together with their Maven/Ant builds.

What is a CName? Basically a sub domain.

And I would say your real problem is that 60 extra seconds it takes to render your JavaScript.

Eric

Ok I will have to look at that and how to do that Ant and stuff with .net.


Well if I compress the files would that no make it render faster. Like I don't know how I could make code more efficient since like 80% of the stuff is like plugins and I know I can't make them more efficient.

[Eric Pascarello]

http://nant.sourceforge.net/

For the speed, you probably need to see what plug-in is a performance killer and see if you can work with the dev of it to improve it.

Eric

[Jeanne Boyarsky]

Michael Hubele wrote:Well if I compress the files would that no make it render faster.

No, but 40 seconds to load is still excessively long and it will help with part of that.