Move JavaScript / CSS files to footer and speed up your Drupal site

May
04

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.”

You could check out more tips for the AdvAgg’s module advanced configuration in this tutorial

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.

Recent Posts

27
Apr
Drupal registry rebuild as a sure way to fix errors

As a truly powerful CMF, Drupal offers you numerous tools to polish your website to perfection — enhance its security, harness the power of

24
Apr
How to prevent big unplanned expenses for your website

In whatever segment you are working — B2C, B2B, C2C or C2B — your website can always be a fabulous business tool. However, sometimes your site may bring about big unplanned expenses.

About us and this blog

 
Request a free quote
Our friendly Help Team can be reached Monday through Friday, from 9am to 6pm, Eastern European Time Zone.

Contact now

Get new blog posts by email: