It's one of the handiest "tricks" for boosting your Drupal site's performance! As you move JavaScript and CSS to footer, you'll instantly lift some of the “pressure” off your web pages, which otherwise would strive to simultaneously render both the HTML and the JavaScript (and the CSS, of course). In other words: you'll then be better organizing the whole page rendering process, ensuring that the “bulk” content gets served to your users first and, immediately after, the loads of JavaScript and CSS files. Now allow me to point out the options available to you for making this move:
1. How Precisely Can This “Trick” Speed Up Page Loading Time?
It's a quite straightforward “relocation”, if you come to think of it. When it comes to JavaScript and CSS files:
- on one hand it's them that turn “raw” HTML content into rich and interactive user experiences, (just think of all the cool animations that you get to “ornate” your content, of all the visuals that you get to captivate users with)
- yet, on the other hand, all this heavy loads of additional files mean a great pressure on your pages; the page rendering process gets significantly slowed down!
In short: once you move JavaScript and CSS to footer, you'll deliver your users that “raw” HTML content first and only then all the styles and the cool animations.
And although it looks like a two-stage sequence, your Drupal site visitors will definitely not feel like they're “waiting” for the second half of your content to load. From the moment that they get served the bulk HTML content on your web pages, to the step where the additional JavaScript and CSS files get loaded, too, there's just an imperceptible little “break”.
Needless to stress out that all this better structuring of the page rending process will have a dramatic impact on your Drupal site's performance.
Note: where do you add that Google, itself, through its PageSpeed, and even Yslow recommend this performance-boosting technique!
2. The AdvAgg Module: One Way to Move JavaScript and CSS to Footer
Now before I delve deep into my explanations on how this module works and how precisely you get to leverage its functionality, the one that will help you move your files, let me try a short presentation first:
The AdvAgg Drupal module is a contributed one (for both Drupal 7 and for Drupal 8), “equipped” with its own aggregation system that replaces the out-of-the-box one that Drupal provides you with. It uses it (its system) for applying multiple site performance improvements and for adding on extra functionalities along the way.
So, let's get back to our initial objective now: finding out how precisely this Dupal module can help us move JavaScript and CSS to footer!
First, you should know that it enables you to move either all of them or just some of the files! In addition to a couple of other “tempting” options that you get to scan through and choose from before you make this “relocation” on your Drupal site's pages.
What this module does precisely is what you want it do to: it moves your files in the footer as well as aggregate and compress them (it structures them into bundles, thus lowering the number of requests performed on a web page).Moreover, it also grants you full control over these performance-boosting “maneuvers”.
“And how precisely do I use it for moving my files in the footer?” you might ask.
Here's how:
- navigate to "Modifications"
- click on the “Adjust JavaScript location and execution”
- choose "all but JavaScript libraries" (it's just a recommendation)
- select “Flush only the AdvAgg cache” in the Validation tab (again, just a suggestion to consider when in doubt, in case you're not sure which one of those options to go for)
And this is how you move them from the header of your pages to their footer!
Note: make sure that the AdvAGG module will work at its full potential by checking that the caching blocks are disabled and that the aggregation blocks are enabled.
You'll find the first ones (caching blocks) in “Cache pages for anonymous users”- “Cache blocks” and the second ones (aggregation blocks) in the “Aggregate and compress CSS files”- “Aggregate JavaScript files”.
Another note: you might want to enable some of the AdvAGG module's submodules (CSS/JS Aggegation, Bundler, Compress JavaScript etc.) for enhancing its functionality and, therefore, turning this whole “relocation” into a more effective, risks-free process!
Warning: do carry out this JavaScript and CSS files moving process with great caution! It can break your site! Run some tests and pay great attention. You might deal with scripts depending on... dependencies placed in the header of the page (so moving them can get risky) or with scripts having undeclared (or not properly declared) dependencies.
Or, of course, you could be dealing with analytics or ads providing partners who insist on having their scrips running in the header.
Now when dealing with these particular exceptions, with “stubborn” providers insisting on having their scripts running in your pages' headers, the AdvAGG module “comes to your rescue” with another functionality that you can leverage. It practically extends its options for drupal_add_js and friends in order to incorporate a boolean scope_lock.
Once you set this to TRUE, you actually avoid a situation where AdvAGG would move JavaScript and CSS to footer.Those specific files that you're not free to move around on your site's web pages the way you like it!
3. The TPL file: Another Way to Move JavaScript and CSS to Footer
Another option available to you is to move these files slowing down the page rending processes on your site directly from your TPL file!
Here's how you do it:
1. you navigate to the page.tpl.php file of your theme
2. next you move the print $scripts to the footer of your page
Note: do keep in mind, though, that this second method does implies an in-depth understating of the code! So maybe it's not a tactic that you should recommend to those admins of the Drupal websites that you will be developing to try on their own each time they will want to make some tweaks for improving their sites' performance!
The END! I hope I've answered your why and how questions regarding this speed-enhancing “trick” involving that you move JavaScript and CSS to footer. Is it a practice that's already part of your performance optimization routine? Have you tried other methods for moving these files to footer? Feel free to share in the comments section here below!