CODEWITHSUNDEEP
javascriptcssbrowserweb
Robus
Robus

Reputation: 8269

Speeding up website - marking scripts/images as optional?

On my website I have ads from a network that does not load particularly fast. Some browsers won't draw the page unless the ads load, making the website appear slower than it actually is - is there any way to prevent this? As in mark the script as non-essential or do some javascript trick to only draw it once it's loaded? I tried googling a solution, but to no avail.

Also, some ads are added to the site as iframe, some as JS script (much like adsense)

Upvotes: 0

Views: 128

Answers (4)

aaronman
aaronman

Reputation: 18751

If loading the ads is optional, what you could do is wait to load them and then use ajax to load/add them later with jquery.

Upvotes: 3

Patrick
Patrick

Reputation: 575

You could try to put your script tags at the bottom of the page, before the closing body tag. http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html Or you could try to load them asynchronously.

In HTML5 (not as much browser support)

<script async src="http://your.com/script.js"></script>

Another way (works with more browsers)

<script>
   var resource = document.createElement('script'); 
   resource.src = "//your.com/script.js";
   var script = document.getElementsByTagName('script')[0];
   script.parentNode.insertBefore(resource, script);
</script>

http://css-tricks.com/thinking-async/

Upvotes: 0

Ryan Mendoza
Ryan Mendoza

Reputation: 950

Load the ad after the DOM has been loaded. You would have your page load normally, then bind a function (JavaScript) which injects the ad(s).

There is also the defer attribute on tags, but it isn't fully cross-browser supported.

JavaScript: Defer Execution

Upvotes: 1

Brad
Brad

Reputation: 163436

The best thing to do here is defer the loading of your ads, and anything else non-essential, until after the page has finished loading.

Attach code to load these to window.onload. That event fires when everything on the page is done loading. You can even defer loading the whole script by adding it to the DOM later. I use jQuery.getScript() for this, but there are other methods.

Upvotes: 1

Related Questions