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:
- A Sitemap XML (can be autodetected, if your correct robots.txt contains the sitemap url)
- A list of URLs
- 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.
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'.
The jQuery overload #
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:
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? #
- Move all the <link>s to stylesheets to the bottom the the <body>
- Put the contents of the generated stylesheet into a <style type="text/css"></style> tag in the <head>