Move JavaScript / CSS files to footer and speed up your Drupal site
Just like in a marathon, the fastest websites always get the prize — in this case, the loyalty of a great number of visitors, customers, and search engines. So how do marathon runners gain speed? Among other things, they keep their balance and distribute their weight in the right way. Similarly, amid the numerous secrets of website speed optimization is the trick of moving JavaScript and CSS to the footer. Let’s see why positioning these files at the bottom of the page helps websites to be lighter and run faster, and how to place these elements there if you have a Drupal website.
Website performance gains from moving JavaScript and CSS to the footer
Though JS makes websites much richer and more interactive, it can somewhat reduce the page rendering speed while loading and executing. So if you move your JavaScript and CSS from header to the bottom, the HTML of your pages will load first, and JS will be executed and the styles applied next. Users won’t have to wait, but they will see the bulk of the page very quickly, with the JS and CSS effects following soon after. This will have a definite positive impact on your website’s performance.
Moving JavaScript to footer is a also a recommendation from such cool speed analyzing services as Google PageSpeed and Yslow.
In Drupal, JavaScript is usually loaded close to the top of the page. But nothing is impossible for the sake of your Drupal site’s speed, so there are two ways you can move JS and CSS to its bottom:
- With the help of a special Drupal module
- By making changes to the template file
1) Move JavaScript and CSS to footer using the AdvAgg Drupal module
There is a handy module both for Drupal 7 and Drupal 8 called Advanced CSS/JS Aggregation AKA AdvAgg, which is designed to greatly improve your website’s performance. It will help you position your JavaScript files in the footer as well as compress and aggregate them more efficiently (by organizing them into bundles to reduce requests). In addition, the AdvAgg will give you better control over these speed enhancing processes.
AdvAgg has a pack of submodules, so you might find it very useful to enable the following: Bundler, Compress CSS, Compress Javascript, CSS / JS Validator, External Compression, and Modifier, CSS / JS Aggregation.
For AdvAgg to work well, make sure that the сaching blocks (Cache pages for anonymous users, Cache blocks) are disabled in Configuration — Development — Performance, and the aggregation blocks (Aggregate and compress CSS files, Aggregate JavaScript files) are enabled.
To position your JS to the footer, go to Modifications and select “Adjust JavaScript location and execution.” The safest decision is to choose to move “all but JavaScript libraries.”
In the Validations tab, a helpful option is “Flush only the AdvAgg cache.”
2) Move JavaScript and CSS to the footer in your TPL file
Another option for moving your JS and CSS to the bottom of the page is to go to the page.tpl.php file of your theme and move the following line to the footer:
print $scripts;
However, this option requires more understanding of the code, while using AdvAgg can be used by advanced site administrators.
Speed up your Drupal site and make it truly convenient and efficient — from top to bottom, from header to footer! The Drudesk support team can help you move your JavaScript and CSS to the footer, as well as discover other ways that your website’s performance can be improved. Gain speed, win your marathons and get your prizes! Let’s discuss it now.