CODEWITHSUNDEEP
javascriptjquery
Adam
Adam

Reputation: 1459

Script sometimes delays page load, how can I test/resolve?

I have a website where sometimes it loads quickly, however sometimes it seems as though the page has stopped loading half way through, possibly due to a script.

The website is http://www.pinspired.com - The tabbed sidebar on the right is the problem. I am using a simple jquery tab plugin and twitter and facebook script in the tabs.

  1. Firstly, does the page load quickly for you?

  2. How can I find out which script is stopping the rest of the page loading. It is hard to test as it only happens occasionally.

Thanks in advance.

Upvotes: 0

Views: 297

Answers (3)

Felix
Felix

Reputation: 533

I suggest you have a look at the chrome developer tools. You can see how long it takes to load each resource (87 request just to load the landing page - wow!), you can profile scripts to see if something takes very/too long and you can even do an audit and let it check several things you can possibly optimize.

For example

  • merge the javascripts you are loading from the same domain
  • set the webserver to use gzip to send script/html files compressed
  • many resources are explicitly set to be not cachable; for example all the product images and the social media pins (preventing that they are loaded over and over again and will speed up things a lot after the they first page load)
  • merging images like the social media pins and use css sprites
  • provide different/only the needed css scripts for each site; according to chrome almost 300kb of css rules are unused on the frontpage

You can find out all that stuff usign the Chrome Developer Tools. All you need is Chromium/Google Chrome.

If it is really the facebook script couldn't you just add a slight delay before loading the fb plugin? Like 500 - 1000ms or so after everything else (well most of it) is loaded.

EDIT: The answer drewcode posted is right. It looks like jquery.jcarousel is causing the delay. See here: Pinspired load diagram

Upvotes: 1

delianides
delianides

Reputation: 44

I just ran the dev tools and it looked like the jquery.carousel plugin is what took the longest.

That aside, my feeling is that you should reconsider using an iframe to load in the carousel. I do know that multiple iframes on a page can slow the page down. And considering the size of the content you are loading inside that iframe, it might explain the delay. You might want to do some research on iframes and consider the order in which iframes are loaded into the DOM.

Upvotes: 3

Coby
Coby

Reputation: 1528

Your site's loading fine here.

For the Facebook "Like Box", consider using the iframe version.

http://developers.facebook.com/docs/reference/plugins/like-box/

After clicking the "Get Code" button, select "IFRAME". This may remedy your issue.

Upvotes: 1

Related Questions