If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Jquery library too big for website

Hey guys,

I've got a bit of a problem that I haven't exactly come across before and I'm really hoping someone here can help.

We're working on a Real Estate Type website for a Small Client, We've used wordpress to hold all out content together,
The only problem we have is that there are about 20,000 drop down options. on the front end submission page. None of which can be taken away.
The rest of the website runs fast except for the Front End Submission page and the Backend are to submit properties from the admin area.

These 20,000 options are divided into 7 main categories. basically they select the state, then suburb.
The website is being hosted on our server which is a shared hosting environment. We want to believe that moving the website to it's own server will help things
but i have a reason to believe that the issue is a little more than just it's hosting environment. Is it possible to perhaps compress the Jquery files so they download to the end user a little faster?

When you view the front end submission page it's pretty much frozen. If you're using chrome you's get a message saying the webpage isn't responding and such.
you would need to wait about 30 seconds or more to load the page properly. even after loading everything it's still very unresponsive. if you were to scroll down a little it would take a few seconds to register before it scrolls the page down.

Now, I know that this is a bucket load of strings. I know that. But how can we make it faster? We've already tried caching, but it's pretty useless as the end user would still experience slow and unresponsiveness on the website.

20,000 options - i would replace this monstrous amount of text with ajax autocompleter inputs (type="text"). this should make the page load faster.

Yes I understand that this would make things faster. But what i'm trying to look for is a solution to keep things the way it is but make it faster.
There has to be a solution for it, There are many other real estate websites with many more options that what I have, Yet they run much faster.

Do you think Varnish would be a good solution, It seems like the same stuff other Real Estate Websites are using for their websites.

This is just a random thought (I haven't tested the functionality myself) but it seems like you could still use an AJAX solution, however if you still need to keep your <select> dropdown just as you have it on your site, you can dynamically add the values.

Now, I haven't seen your page and how it is currently set up, but it seems there are multiple <select> dropdowns in which they select a value from the state dropdown, then can select a suburb from a second dropdown. If this is the case you could have each of your 7 categories split into separate files. This would allow you to load the data from a category as you needed it, or if anything load them in sequence to help get the page in a usable state more quickly.

In the end, no matter how you look at it, if you have a large amount of data that needs to be loaded on to a page you are either going to load it all at once and have to wait or break the data up and understand that not all of it will be instantly available.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

What is the actual slowdown on the page? Can you identify the JavaScript functions or code blocks that take the most time? If you disable JavaScript in the browser and view the page, does it perform better?

Basically, you need to identify the actual performance problem. Is it JavaScript? Is it the shear amount of HTML that must be downloaded? Is it the backend processing time to create the page? Is it a bunch of jQuery function calls that iterate over a boatload of DOM nodes?

Bottom line, you can't keep things as they are but make them faster. Something has to change.

If the server is taking a long time to generate the web page, there are some easy optimizations you could make at the PHP level. The options in each dropdown are not likely to change often, so cache the Hell out of them on the server side.

If JavaScript code is running slowly, try to identify it and optimize it. Maybe eschew jQuery for native JavaScript method calls to cut out the middle man.