The good speed story: CSS/JS aggregation with Drupal’s AdvAgg

Irresistibly attractive and incredibly interactive — that’s the advantage for any website using CSS and JavaScript. Awesomely fast — that’s what your websites will be if you treat your CSS and JS in a proper way. There are many tips to using it, like moving CSS and JavaScript to the footer or minifying these files. Today, we’re gonna discuss advanced CSS and JS aggregation as a way to speed your Drupal website up. Of course, the tool for this should be advanced as well. Enter the Advanced CSS/JS Aggregation module, or AdvAgg for short.

Drupal’s AdvAgg and its job

It’s not the first time this Drupal module is the hero of our articles, but AdvAgg deserves it. As a complex contributed module, it has tons of capabilities, advanced CSS and JavaScript file aggregation being the chief among them.

CSS/JS aggregation: what it is for

The essence of aggregation is to group the JavaScript and CSS files in bundles in order to reduce the amount of HTTP requests necessary for the page to load. Instead of a couple dozens files, a page will load with just a handful of aggregates. This leads to significant website speed gains.

What makes AdvAgg an advanced aggregation tool

Drupal has its own out-of-box aggregation capabilities, but AdvAgg greatly improves these by offering more effective approaches to file grouping, caching, and compression.

The module has plenty of useful submodules, each of which contributes to the perfect aggregation process. These are Compress CSS, Compress Javascript, Bundler, CSS/JS Validator, External Compression, Modifier, CSS/JS Aggregation, as well as CDN CSS and CDN JavaScript that work with content delivery networks.

Among AdvAgg’s endless advanced aggregation features, it is worth mentioning at least a couple of examples:

• On-demand aggregate generation.
  The Drupal module can create the needed CSS and JavaScript aggregate on demand, if the latter does not exist.
• The number of bundles is your choice.
  The AdvAgg lets you target the number of aggregated bundles for one web page.
• Protection from duplicate work.
  In case of many requests for the same page, AdvAgg uses locking to prevent the same aggregates from being created again and again.
• Smarter caching for better speed.
  AdvAgg’s wise approaches to caching include: fully cached JavaScript and CSS with zero file input/output if the file already exists, deletion of aggregates from the cache only when they stay unused for a long time, scanning the files for changes to flush the cache, and so on.
• Efficient CSS/JS compression.
  The module, together with its useful submodules, efficiently minifies the files by compressing them with a variety of configurable compression methods.

Configuring the AdvAgg

First, download and install AdvAgg and enable its submodules. It is necessary to have the “Cache pages for anonymous users” and “Cache blocks” options disabled, since Drupal core caching and AdvAgg will not work together well. You should, however, enable the “Aggregate and compress CSS files” as well as “Aggregate JavaScript files” options on the Performance page.

In the “Advanced CSS/JS Aggregation” the most important setting that has to be on is “Enable advanced aggregation.” Without it, the module is not going to work.

You can then adjust plenty of additional settings related to setting the number of bundles, choosing compression methods, using media queries, validating your files, and much more.

To fully use the benefits of advanced CSS and JavaScript aggregation, you may need an advanced team of assistants, so get one here. Our services include installing the AdvAgg Drupal module and configuring it in the way that suits your website best, as well as testing the results. In addition, we can discover other ways to improve your website’s performance. Everything’s gonna be “Advanced”! ;)