{"id":2741,"date":"2010-06-15T04:49:38","date_gmt":"2010-06-15T03:49:38","guid":{"rendered":"http:\/\/www.itwriting.com\/blog\/?p=2741"},"modified":"2010-06-15T04:49:38","modified_gmt":"2010-06-15T03:49:38","slug":"speeding-page-load-with-dynamic-javascript","status":"publish","type":"post","link":"https:\/\/www.itwriting.com\/blog\/2741-speeding-page-load-with-dynamic-javascript.html","title":{"rendered":"Speeding page load with dynamic JavaScript"},"content":{"rendered":"

I\u2019m delighted that ITWriting.com is sufficiently popular to sustain some advertising. I\u2019m not pleased though with the impact on performance. The problem is that ads such as those from Google Adsense<\/a> or Blogads<\/a> are delivered by remote scripts. It usually looks something like this in the HTML:<\/p>\n

\n

<script type="text\/javascript"
  src="http:\/\/some\/remote\/script.js">
<\/script><\/p>\n<\/blockquote>\n

When the browser encounters this script, it stops and waits until the script returns. This means that your site\u2019s performance depends on the performance of the site serving the script. At times I\u2019ve noticed significant slowdown \u2013 though to be fair, Google is normally faster than most others in my experience.<\/p>\n

So how can this be fixed? I\u2019ve spent some time on the problem, but with limited success. Ideally I\u2019d like an Ajax-y solution where the ads flow in after the rest of the page had loaded and rendered, because the content is more important than the ads. The first step though is to place the scripts at the end of the page, so that the rest of the content is downloaded first. However, the ads have to appear towards the top of the page, otherwise the advertisers will not be happy. I tried inserting the script dynamically like so:<\/p>\n

\n

var addiv = document.getElementById("addiv"); \/\/where the ad is  to appear
var theScript = document.createElement("script");
theScript.type="text\/javascript";
theScript.src = "http:\/\/some\/remote\/script.js"; 
addiv.appendChild(theScript);<\/p>\n<\/blockquote>\n

While this works after a fashion, it does not do the job. The problem is that the script typically calls document.write. If you are lucky, the ad will appear at the bottom of the page. If you are unlucky, the ad will replace the entire page.<\/p>\n

What I needed to do is to capture the output sent to document.write and then insert the HTML dynamically. It turns out that JavaScript makes this easy. We can simply override document.write with our own function. Like so:<\/p>\n

\n

var addiv = document.getElementById("addiv"); \/\/where the ad is  to appear
var adHtml = ”;
var oldWrite = document.write;
document.write = function(str)
{
    adHtml += str;
}
<script type="text\/javascript"
  src="http:\/\/some\/remote\/script.js">
<\/script>
document.write = oldWrite;
addiv.innerHTML = adHtml; <\/p>\n<\/blockquote>\n

This is brilliant, and in fact works perfectly for some of my ad scripts. Unfortunately it does not work for the slowest performer. The problem is that I have no control over the content of the remote script. In the non-working case, the remote script does not return HTML. It returns another script, which references another remote script. Now I have to figure out how to handle all the possible cases where scripts return scripts, which might or might not call document.write.<\/p>\n

I\u2019d be interested if anyone has a generic solution. There is a library here<\/a> that looks like it might be helpful.<\/p>\n

Another reflection is that it is in the interests both of advertisers and publishers to have scripts that execute fast and\/or behave in a predictable manner that is friendly towards deferred loading techniques. It is no use writing convoluted code to deal with a particular script, when it might change at any time and break the site.<\/p>\n","protected":false},"excerpt":{"rendered":"

I\u2019m delighted that ITWriting.com is sufficiently popular to sustain some advertising. I\u2019m not pleased though with the impact on performance. The problem is that ads such as those from Google Adsense or Blogads are delivered by remote scripts. It usually looks something like this in the HTML: <script type="text\/javascript"   src="http:\/\/some\/remote\/script.js"> <\/script> When the browser … Continue reading Speeding page load with dynamic JavaScript<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,44,50,96],"tags":[210,514,975],"class_list":["post-2741","post","type-post","status-publish","format-standard","hentry","category-blogging","category-internet","category-javascript","category-web-authoring","tag-blogging","tag-javascript","tag-web-authoring"],"_links":{"self":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/2741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/comments?post=2741"}],"version-history":[{"count":0,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/2741\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/media?parent=2741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/categories?post=2741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/tags?post=2741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}