[ad_1]

CSS & JS Aggregation Module takes expert level installation and configuration

https://www.drupal.org/project/advagg

Credits & Thanks

Thank you to:

About the Advanced CSS/JS Aggregation Module

The Drupal Advanced CSS/JS Aggregation module aggregates and compresses CSS and JavaScript files to make your site run faster. Speed became a ranking factor in 2010. All else being equal, the faster site will rank higher in Google. Making your site as fast as you reasonably can will benefit your marketing efforts.
 

  • red arrow Google loves fast websites, and this module speeds up Drupal.
     

Before you install and use this module, take a few minutes and use Google’s PageSpeed Insights tool and WebPageTest.org to take a benchmark of how your website performs before making these changes.

Print or record these scores, as they’ll come in handy later for comparison.

Install and Enable the Advanced CSS/JS Aggregation Module

Warning: You might want to work with your developer on this! Try things out on a dev server before you push it to your live website. The wrong settings can bring down your website.

  1. Install the Advanced CSS/JS Aggregation module on your server. (See this section for more instructions on installing modules.)
     
  2. Go to the Extend page: Click Manage > Extend (Coffee: “extend”) or visit https://yourDrupalsite.dev/admin /modules in your browser.

    drupal advagg advanced css/js aggregation installation
     

  3. Select the the following checkboxes:
    • AdvAgg Bundler
    • AdvAgg CDN
    • AdvAgg CSS/JS Validator
    • AdvAggExternalMinification
    • AdvAgg Minify CSS
    • AdvAgg Minify JavaScript
    • AdvAgg Modifier
    • AdvancedCSS/JSAggregation
       
  4. Click the Install button at the bottom of the page.
     

If necessary, give yourself permissions to use the Advanced CSS/JS Aggregation module.

  1. Click Manage > People > Permissions (Coffee: “perm”) or visit https://yourDrupalsite.dev/ admin/people/permissions.

    drupal advagg advanced css aggregation module permissions
     

  2. Select the appropriate checkbox for bypass advanced aggregation.
     
  3. Click the Save permissions button at the bottom of the page.

Configure the Advanced CSS/JS Aggregation module

Warning in advance: There are a lot of options for this module. If you run into CSS or JavaScript issues with your site, a setting in this module may be the problem. Be sure to work closely with your developer and website admin to get the settings right or you run the risk of breaking your site.

  1. Go to the Advanced CSS/JS Aggregation module admin page by clicking Manage > Configuration > Development > Performance > AdvAgg (Coffee: “advagg”) or visit https://yourDrupalsite.dev/ admin/config/development/performance/advagg in your browser.

    drupal advagg advanced css aggregation module settings
     

  2. To start out, don’t change anything! The default settings for this module are pretty spot-on for error free performance.
     
  3. Test your site. Make sure all of your pages are loading properly.
     
  4. You can squeeze faster performance out of your website by testing the High settings. Just be aware that they may cause some pages to display incorrectly. As with all things, check your results thoroughly.

JavaScript Minification

“Minification (also minimisation or minimization) is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.” —Wikipedia

By default, Advanced CSS/JS Aggregation does not minify JavaScript files. You can turn on Minification like this:

  1. Go to the Advanced CSS/JS Aggregation module admin page by clicking Manage > Configuration > Development > Performance > AdvAgg > JavaScript Minification (Coffee: “javascript”) or visit https://yourDrupalsite.dev/ admin/config/development/performance/advagg/js-minify in your browser.

    drupal advagg advanced cssjs-aggregation-js-minification
     

  2. There are 3 built-in options. Select JSqueeze.
     
  3. Click the Save configuration button at the bottom of the page.
     
  4. Test! Make sure your site is working properly and check all of your contact forms.

Adjust Performance Admin Settings

By default, caching is turned off, because when your site is under development, you want any changes to it to be immediately visible for testing. However, once major development has been completed, you’ll want to enable caching to help with speed and performance.

  1. Go to the Performance admin page by clicking  Advanced CSS/JS Aggregation module admin page by clicking Manage > Configuration > Development > Performance (Coffee: “performance”) or visit https://yourDrupalsite.dev/admin/config/development/performance in your browser.

    drupal performance settings and browser caching
     

  2. In the CACHING > Browser and proxy cache maximum age drop down option menu, select 1 day. If your content changes more frequently than once a day, then we recommend moving down to the caching time that best works for your site. However, this can affect load speeds for returning visitors.
     
  3. Click the Save configuration button at the bottom of the page.
     

Now’s the time to take a post-installation benchmark with Google’s PageSpeed Insights tool and WebPageTest.org. You may need to clear your caches to get updated stats.

You’ll want to compare this round of testing with your initial tests (you DID do the initial testing, right?). These tools will help you determine if more aggressive caching will improve your site’s speed.

 

Did you like this walk-through of Drupal’s Advanced CSS/JS Aggregation Module?
Please tell your friends about it!

facebook icon twitter social icon linkedin social icon



[ad_2]

Source link