Site is slow in IE8. jQuery to blame?

Question

Some of the pages of my site are extremely sluggish in IE8. The pages with lots of content load slowish in all browsers but slower in IE8. I assume they load slow to begin with because there is a lot of procedural PHP and database queries.

But my main concern is how lumberingly slow these pages are after they load in ie8. There are some jQuery slidedown effects and I'm wondering if ie8 just sucks at rendering them.

Here is a page with very little content: http://searchfornutrition.com/?pageid=topic&topicid=acai

The slidedown from the buttons work fine and the jQuery is fast/normal.

Now here is a page with lots of content: http://searchfornutrition.com/?pageid=topic&topicid=vitamin_d

The slidedown from the buttons is sluggish.

I've checked another computer with IE8 and it's the same. I did all the unique programming for this site and I'm no expert. Doing this site was how I learned everything I know about web development so if it's not IE8 then it's probably me.

thanks for any help you can give.

---

Edit:

I just tried out the network tab on Chrome dev tools and it was very helpful as far as why my pages load so slowly in the first place. Some of the unnecessary .css links take seconds to load but mostly it's the document itself. Sometimes it can take up to 30 seconds alone, which means my code isn't efficient. I knew my code wasn't efficient since I did most of the site before learning about functions and OOP, so it's procedural and very redundant. I will have to start updating it.

As for the IE issues, I'm still not exactly sure. I'll try some of your suggestions and then maybe make a virus that installs FF or chrome in place of IE whenever IE requests a page :P

---

Edit 2:

If anyone is wondering how this turned out - I've managed to decrease the loading time significantly by loading only what is initially visible and having ajax (via jQuery) load the data associated with each button slidedown on the event that each button is pressed. It's much faster now, and I still haven't omitted the several unneeded CSS files. It's still sluggish after load in IE8 but I'll tackle that another time and take your suggestions on that into consideration. Thanks for all your help!

Answer 1

I notice that you have several one-pixel-wide images (and one two-pixel-wide) used as repeating background images to create gradients. I recently ran into performance issues with a large site which were resolved by increasing the size of my background images.

I have not personally investigated the causes, but my understanding is that when a background image repeats, the browser must render each repetition separately. For example, if a 1,000-pixel-wide element has a one-pixel-wide background, that image must be rendered 1,000 times, whereas the same image stretched to 50 pixels wide would only need to be rendered 20 times. IE, tending to be slower than other browsers at the best of times, is more severely affected.

Making your images wider does, of course, increase your image size, but not by nearly as much as you'd expect. Both PNG and GIF are very good at handling repetitive data (especially horizontally repetitive data), minimizing the file size impact.

Personally, I never make a repeating image less than 50px in the direction(s) in which it repeats. Making this change drastically improved the animation performance of my site.

Answer 2

Use Fiddler2 to look at your page loading you've got a whole lot of JS and CSS there is it really all necessary? Are the resources minified and compressed? Every HTTPRequest you make takes time even when the response is 200 and the cached resource can be used. Look at loading resources on demand or bundling them into single files.

jQuery is fairly well optimised generally speaking, IE6 was slow unless you specific an element along with and id or selector.

Your page felt about equally slow for me in FF4, Chrome and IE9.

GET http://searchfornutrition.com/?pageid=topic&topicid=acai
200 OK (text/html)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_important.css?v=386
200 OK (text/css)

GET http://searchfornutrition.com/css/nav_unreg.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.core.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/js/jquery-ui-1.7.2.custom.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.dialog.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/buttons_jquery.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.draggable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_css/style-07445fcb-00006.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/js/jquery-1.3.2.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/search_options.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.resizable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_css/style-07445fcb-00006.css
200 OK (text/css)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_important.css?v=386
200 OK (text/css)

GET http://searchfornutrition.com/css/nav_unreg.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/js/jquery-1.3.2.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/js/jquery-ui-1.7.2.custom.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.core.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.draggable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.resizable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.dialog.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/buttons_jquery.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/alpha_buttons.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/search_options.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/custom-buttons.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/td-height.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/dialog_topics.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css
200 OK (text/css)

GET http://searchfornutrition.com/css/button.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/css/vert_scroll.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.all.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/css/topics.css
200 OK (text/css)

GET http://searchfornutrition.com/js/star_rating.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.base.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.theme.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.resizable.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.accordion.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.dialog.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.slider.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.progressbar.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.datepicker.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.tabs.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.core.css
200 OK (text/css)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.pack.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/js/error_report.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/reposition_tables.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/yui/yahoo-dom-event/yahoo-dom-event.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/yui/connection/connection-min.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_global.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_menu.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/clientscript/vbulletin_md5.js?v=386
404 Not Found (text/html)

Answer 3

ie8 is definitely slower in terms of element selectors than most other modern browsers. There are lots of things you can do to optimize - for one you should be selecting by id if you can. I have noticed in the past that ie tends to be slow on big pages also.