Tag: javascript

The future of search: search engines that understand Javascript

Google search Websites have incredibly evolved over the past years, more and more code is written for the client side and less on the server side. On the server side you don't have a single MVC framework any more but an API that delivers its data to an armada of platform optimized front ends powered by JavaScript MVCs to build rich UIs. Unfortunately Google Bot was still stuck in the nineties, reading pages as they were a block of pure HTML. Today this is going to change, as Google today announced:

Lazyload (Asynchronous loading) your javascript files

An alternative to putting scripts on the bottom, is to lazyload your scripts. To lazyload your scripts there are three ways i want to show you. First you can write your own little script that will asynchronously load your main javascript file by inserting the script tag for that file programmatically. Second possibility is to use a tool like require.js which is an asynchronous scripts downloader. The thrid possibility is the new HTML5 attribute for the script tag that you can use to force the browser to load the script asynchronously.

Lazyloading a javascript file default

You can create your own basic lazyloader yourself. Only a few lines of javascript in the head of your document and your done:

function lazyload() {
    var scriptTag = document.createElement('script'); 
    scriptTag.src = "//my_example.js"; // set the src attribute
    scriptTag.type = 'text/javascript'; // if you have an HTML5 website you may want to comment this line out
    scriptTag.async = true; // the HTML5 async attribute
    var headTag = document.getElementsByTagName('head')[0];

Move scripts to the bottom

It's important to ensure that the javascript file doesn't block the rendering of the page. Often Javascript pages are pretty big, so it can take some time to load it.

But most javascript isn't executed on pageload, therefore at least the scripts that get used by onclicks and other events that may occur later as the pageload, can be put in the file that will be at the bottom.

  • First
  • Previous
  • 1
  • Next
  • Last