AJAX load time - Host and Server issue?

Question

I'm having an issue with slow AJAX calls. This is a common question, but I've done everything suggested in all the research I can find. I'm hoping to get a consensus form people who read this.

Basically, I make an ajax request to a php page, which gets info from a database.

here is the page: http://bit.ly/bQDyjj

I've timed all of my javascript, mySQL, and php scripts, requests, and pages. (If you run firebug you can see my time markers in the console, as well as in the xml)

As an example -

The mysql request takes 20ms The PHP page takes 50ms The ajax success script, which processes the small amount of xml (less than 1k) and generates the markers, takes 8ms to run.

Yet, loading the page takes nearly 4 seconds.

So, assuming none of my scripts are lagging, this has to be a problem with the response time from the server, or my own internet connection, right?

I'd appreciate any theories or thoughts.

Thank you

Answer 1

Ok looked at your page and here are some of the issues I saw that would affect speed:

1. It takes 4ms to get your data in your getMarkers function but it takes 892ms to read the xml file. I would recommend falling back to vanilla javascript to read your xml file as the amount of find's you are performing is really harming your performance here.
2. Minify and combine all of the scripts that are local on your server. I was getting some really high response times. You can eliminate 4 http requests by doing this which with the response times on your server will help a bit. (Note don't combine jquery or jquery ui in this)
3. Since your server is a bit slow (not your fault this will vary as you are probably on shared hosting) I would recommend linking jquery and jquery ui to the google cdn hosted versions. Here is a post on that Jquery CDN
4. You have 24 images on your page; 23 of which are under 4KB. Combine those 23 into one CSS sprite image and assign a 1px X 1px blank gif to be the inline html image and use the CSS sprite image instead. Here is good article on what this is if you are unfamiliar: CSS Sprites explained also here is good online css sprites generator: CSS Sprite generator
5. Make sure you need Jquery UI for this page. I didn't see anything that would have required it. If you can remove it you save yourself 206k. Remember to remove the associated CSS file if it isn't needed. This would save you another 2 calls.
6. Didn't dig too deep but if you are not already kick off the call to setup the google map in a $(document).ready() that way the rest of your page can load and you can display a loading animation in that area. This way users know something is happening and your page will appear to load a lot quicker.

So you can greatly speed things up by doing the above. You would go from 82 components down to 51 local and 2 more on Google CDN. If you can improve that xml read time you can shave nearly another second off load time as well