Accelerate Page Loading: Unusual Site Speedup Techniques: Part 1

By Manuel Lemos

manuellemos.net

<email contact>

PHPClasses at Facebook

Before proceeding to the actual topic of this article, if you like the PHPClasses site, I would like to invite you to become a fan of the PHPClasses site at Facebook.

By suggestion of some dedicated users, I finally made time to improve the content the PHPClasses Facebook page. As you may notice, I have made the wall show the latest PHP classes, blog posts and jobs posted in the site. Feel free to post a comment with other improvement suggestions.

For now the goal is to create a shorter URL for the page at Facebook. According to the Facebook rules, the page needs to reach at least 1000 fans. Therefore I would like to ask you to not only become fan of the page by clicking on the "Like" button in the PHPClasses Facebook page, but also to encourage others that like the site to become fans of the site.

Contents

Introduction

Why remote content slows the load of Web pages?

The solution: Delay All Remote JavaScript

The Fast Page Content Loader object

Browser issues

Next Site Speedup Techniques

Introduction

Sometimes you need to insert in your site pages elements that retrieve content from other sites. That is the case for instance of widgets like you see in the navigation bar of this site pages displaying a button to submit a link to this page on Twitter.

Another case is the advertising that you may also see in the pages of this site. Advertising has often annoyed made many of this site users. Not only it distracts users that access the site, but also it delays the loading of the actual content of the site that users are most interested.

Unfortunately the advertising is necessary to keep busy sites like this financially viable. Therefore it cannot be simply removed. So I wondered, if it cannot be removed, how can I make it less annoying?

I certainly cannot make it less distracting moving the advertising out of the users sight. If the users do not see the advertising, they do not click on it. If they do not click, it does not generate revenue. That would go against the reason why the advertising is put in the site pages.

If I cannot move it out of sight of the users, I wonder if at least I could make it not delay the loading of the rest of the pages. This article focus precisely on the solution that I found for that problem.

Why remote content slows the load of Web pages?

The root of the problem of slow pages with remote content has to do with the way it is inserted. There are basically two ways of inserting remote content on pages: using inline HTML elements and inserting HTML dynamically using JavaScript.

Remote content using inline HTML elements can be for instance images or inline frames. Currently all browsers have no problem dealing with this type of elements in the most efficient way. Inline elements are often loaded in parallel with the rest of the page content, so it does not slow down the loading of the rest of the page content.

Dynamically inserted HTML using JavaScript is what causes most of the slow down of the pages. The reason is that the content and layout of the pages totally depends on what the retrieved JavaScript does when it is executed. Therefore most browsers halt the page rendering once they stumble on a block of JavaScript retrieved from a remote server.

Actually this is not accurate, modern browsers like Google Chrome (and probably others by now), can retrieve and execute remote JavaScript in parallel while they load other page elements.

Still there is always a slow down of the browsers when they renders pages that retrieve advertising or other kinds of dynamically retrieved content using JavaScript.

The solution: Delay All Remote JavaScript

In most cases, Web developers already know in advance what will be the layout of the content retrieved from remote sites using JavaScript. For instance, advertising usually take spaces of fixed dimensions, which are defined by IAB (International Advertising Bureau).

What if we just insert a few HTML tags that take the space of the remote content and then we replace those tags later with the original JavaScript code tags? That would solve the problem, but the solution is not that easy.

The first approach that comes to mind is to place some <div> tags in the original slow content page positions and then use the ONLOAD page event to insert the original tags inside the <div> tag setting the innerHTML property.

Unfortunately that would not work well. The main problem is that most tags supplied by Web advertising agencies use the JavaScript document.write call to insert content on the page. That call appends HTML tags to the page document. So, if you delay the loading of the original content this way, instead of making the content appear in the original positions, it would appear at the end of the page.

The solution has to depart from the premise that the original content loads where it is inserted. So, how could we delay the load of remote content and then make it appear in the original positions.

The solution that was found consists in making the slow content load within hidden <div> tags at the end of the page but than move the HTML content DOM nodes to the original positions. That can be done using DOM node object calls like removeChild and replaceChild.

The Fast Page Content Loader object

To simplify the implementation of this solution I developed a JavaScript object named Fast Page Content Loader which takes care of all the necessary steps. This object's code is Open Source and it was published recently at the JSClasses site.

I have written a small tutorial article in the blog of the Fast Page Content Loader object to make it easier for those that would like to deploy it. The tutorial steps are very easy to follow and start enjoying the page load speedup of your sites using this object.

The license of the object of the new BSD, which means you are free to use, modify and redistribute this object as long as you preserve the original copyright notices. I just would like to ask that if you use, modify or distribute the object code, please keep also the URL of the object page that is inside the code, so anybody looking for updates to the code may find it in its page.

Browser issues

This solution works great but it is not perfect. After some tests I noticed that when using browsers such as Internet Explorer and Opera, in some cases the delayed content would not move to the original positions as intended. For some reason those browsers would leave the original delayed tags at the end of the page where they were inserted.

I could not yet figure what was is the problem. Therefore, for now it will not delay the load of slow content under Internet Explorer and Opera. This means that the slow content will load immediately in the original positions, thus still slowing the load of the rest of the page.

If you have any insights as of why the problem happens with Internet Explorer and Opera and you know of a possible workaround, please post your comments to this article and let me know.

Under other browsers such as Google Chrome, Firefox and eventually Safari it will work well delaying the load of slow content as intended, so the effort of deploying this solution is well worth it.

I was afraid that delaying the load of advertising could hurt the advertising revenue. I have deployed this solution last week and so far I could not see any loss the advertising revenue. Actually it seems the revenue has actually increased but it is too soon to tell if that was due to the changes in the way the advertising was loaded.

Next Site Speedup Techniques

In the next days I will publish follow-up articles telling you more about other unusual techniques that I implemented recently to improve the site speed.

Until then, please post your comments, your unusual ideas to improve the site speed or any other comments you would like to make.