Heading image
Heading icon Useful Tools

Above the Fold online

 

About

The button below allows you to grab the styles needed to display any site above the fold content. This enables you to speed up the appearance of your site on the first page the user enters by not requiring any aditional resources like styles, you should also move your styles and javascripts to the end of the <body> tag.

 

Usage

The script allows you to browse every page on your site and grab all the styles based on your (or set) screen size. There are number of options where to grab the URLs to crawl from:

  1. A Sitemap XML (can be autodetected, if your correct robots.txt contains the sitemap url)
  2. A list of URLs
  3. CSS (jQuery) selector (eg. all links on current size)

When you press the 'Grab Styles' button, the script will start opening the URLs, one by one, and gather the required CSS code, be patient, each page can take 1 - 5 seconds to process, depending on the amount of styles needed. The progress can be seen on the screen. After it is finished, it gives you the styles and a list of URLs that added any styles to the result - this way you can run the script on a limited number of pages next time, so it doesn't take that long.

The process can take some time and it also requires quite a fair bit of CPU power. We use Google Chrome for this script, as it have separate threads for tabs, so the other tabs do not freeze.

 

What we did?

This section explains what we had to do in order to implement the Above the Fold logic on the nestforms website.

Firstly we have decided that we will be applying this logic only on the frontend part of the website, where users are not logged in, the logged in users know where they are and are willing to wait that additional time loading, they do have most of the styles and scripts downloaded and also it will be more difficult to make the javascript functionality work in this way.

Also we apply the Above the Fold only when the visitor enters our site and we use the usual header on any consequent pages. This can be found out using the HTTP header 'Referer'.

So you need to put all your styles and javascripts at the end of the <body> element, so they are non-blocking, then you need to put the styles generated by the Above the Fold script into the header.

In order to move the javascripts to the end of the body, you need to make sure that you a) do not call any javascript within the site contents or b) wrap the ready function of your javascript framework using a simple function, we did the second one.

 

The jQuery overload

We use jQuery in our javascript code, so the important thing was to make sure all calls are correcly written within the ready function.

There are several ways to access the ready function in jQuery: there is $(<function>), $(document).ready(<function>) or similar, so this is what you need to handle. We wrote following simple function:

<script type="text/javascript">
window['jQueryReadyQueue'] = function (o) { 
  function add(fn) { 
    document.addEventListener("DOMContentLoaded", fn); 
  }
  if(typeof o === 'function') add(o);
  this.ready = function (o2) {
    add(o2);
  }; 
  return this;
};
window['jQuery'] = window['$'] = window['jQueryReadyQueue'];
</script>

This code is supposed to be in the <head> within the HTML code, so all the scripts written in the body works correctly. 

This code seamingly implements the ready function correctly without the script even noticing it. It creates the required functions to run the given handlers at the right time, when the framework is already expected to work.
But it is important to check all the inline code is wrapped in the ready function.

 

What should i do with the generated style?

You should

  1. Move all the <link>s to stylesheets to the bottom the the <body>
  2. Put the contents of the generated stylesheet into a <style type="text/css"></style> tag in the <head>
  3. Read the section The jQuery overload abou the javascript functionality also.