A well-performing website just doesn’t cut it these days. To stand out of competition, businesses are looking for high performance websites with lightning speed load times. You could potentially lose a big chunk of customers with every additional second your website takes to load. Today let’s learn about optimizing the frontend performance of your website with the Advanced CSS/JS aggregation module for Drupal 8.
To make Drupal sites run faster, it is essential to load CSS/JS files as quickly as possible for a page. One problem with Drupal core aggregate is that it is not good at determining which resource (CSS/JS) files go together. So, when you have different pages that require different resource (CSS/JS) files, usually Drupal core does it in a way where there is lot of extra information that are unnecessary on certain pages. The Drupal AdvAgg module comes with a plethora of features to help websites render faster. And the module also supports Drupal 9!
What does the Advanced CSS/JS Aggregation module do?
The Drupal AdvAgg module does a lot of different things to help speed up delivery and loading of resource files on your website. Advanced Aggregation combines multiple CSS files and creates fewer CSS files so that sites render faster. It caches aggregated files more efficiently. It also provides more effective methods of compression. Thus helping in offering users with more engaging user experiences.
Getting started with the Advanced CSS/JS Aggregation module
Installing
Installing the AdvAgg module for Drupal 8 is like installing any other contributed modules. I’m using the Composer to install since it automatically installs all of the necessary dependencies. Open the terminal, within the project enter the following command -
$ composer require 'drupal/advagg:^4.1'Next, enable the AdvAgg module
Configuration tab:
This tab provides several configuration options that are discussed below.
Global Options
- Enable/Disable the Advagg module temporarily by checking/unchecking the Enable advanced aggregation checkbox.
- Use this option if you want to allow DNS prefetching for external CSS/JS, which tries to settle domain names for links before a user clicks on them. Enabling this can have unwanted effects on site. Keep this unchecked unless needed.
- In the Cache settings, we have options like development, low, normal, high caching of resource (CSS/JS) files. High caching stores more data while normal stores less data compared to high. Development caching stores very less data. I'm going with normal here.
Compression options
This provides Gzip compression and Brotli compression which are the methods used for compressing CS/JS assets.
CSS Options/JS Options
- In order to avoid multiple CSS/JS files in one page, AdvAgg uses media queries to determine what files are needed on a page and combine them so that they load faster.
- Fix improperly set type – This option will fix the problem in syntax, when you are trying to reference CSS and JS files if there are any problem there
- If this option is checked, the external stylesheets on the same host are not converted into files.
CRON Options
- Here you can set the minimum amount of time between advagg_cron() runs. The default value for this is 1 day.
- Use this option to Delete aggregates that were modified more than the chosen time. The default value for this is 1 month.
Obscure Options
This tab does not contain any configuration options. You can flush the module cache or entire cache in the Operation tab.
Bundler Tab :
This splits your aggregated resource files into multiple bundles of small resource files. With bundler active checked, you have more bundles of small CSS files, it makes sure that it strips anything that's not being used in a given page. Even with the more http request for a resource file you can have overall boost in the performance because of fewer bytes transmission.
This tab has CSS Bundling and the Javascript Bundling with the same configuration settings.
1. Target Number of CSS/JS Bundles Per Page: Specify the number of CSS/JS Bundles to be sent per page.
2. Grouping Logic: You can select the aggregation logic should go by file count of file size.
CDN Tab:
Content distribution network (CDN), is a distributed network of proxy servers that helps immensely in boosting website performance and load time. Website content can be distributed to servers closest to the site visitor which makes response and load times even faster.
- CDN to use - Choose between a network of server providers Google and Microsoft.
- Checking Use Minified resources would reduce the bandwidth needed because of the smaller file sizes.
CSS Minification tab:
This allows the removal of white spaces, comments, unwanted variable names etc. You can select between the Core minifier or the YUI Compressor, where YUI is better form of compression.
External Minification tab:
External Minification is used when you are using command line compression.
JavaScript Minification tab:
For JS minification select a minifier. Selecting a faster minifier is always better.
Old IE Compatibility tab:
Prevent more than 4095 CSS selectors in the aggregated CSS file - You can modify the value to avoid getting errors from IE Version below 10, where if your CSS has more than 4095 selector IE will not render the page properly.
