How to get a high pagespeed score in Drupal 7 using Advanced CSS/JS Aggregation

The README has a guide on how to do this using AdvAgg 7.x-2.19.

How to get a high pagespeed score

Go to admin/config/development/performance/advagg

  • Uncheck "Use cores grouping logic"
  • Check DNS Prefetch and Preconnect under Resource Hints
  • Check "Combine CSS files by using media queries"

Install AdvAgg Modifier if not enabled and go to admin/config/development/performance/advagg/mod

  • Check "Enable preprocess on all JS/CSS"
  • Check "Resource hint src attributes found in the HTML content"
  • Enable every checkbox under "Optimize JavaScript/CSS Ordering"
  • Under "Move JS to the footer" Select "All but what is in the $all_in_footer_list"
  • Under "Deferred JavaScript Execution: Add The defer Tag To All Script Tags" Select "All but external scripts"
  • Check "Put a wrapper around inline JS if it was added in the content section incorrectly"
  • Check "Deferred inline JavaScript Execution: Put a wrapper around inline JS so it runs from a setTimeout call."
  • Under "Deferred CSS Execution: Use JS to load CSS" select "All in head, use link rel="preload" (If enabled this is recommended)"
  • Under "Defer CSS only on specific pages" select "All pages except those listed"
  • Under "Do not defer the first css file" select "Inline CSS (no more than 12K)"

Install AdvAgg Compress Javascript if not enabled and go to admin/config/development/performance/advagg/js-compress

  • Select JSMin if available; otherwise select JSMin+

Install AdvAgg Async Font Loader if not enabled and go to admin/config/development/performance/advagg/font

  • Select Inline javascript (version: X.X.X). If this option is not available follow the directions right below the options on how to install it.
  • Check "Set a cookie so the flash of unstyled text (FOUT) only happens once."
  • Check "Prevent the Flash of Unstyled Text."

Other things to consider

On the admin/config/development/performance/advagg/mod page there is the setting "Remove unused JavaScript tags if possible". This is a backport of D8 where it will not add any JS to the page if it is not being used.

The AdvAgg Bundler module on the admin/config/development/performance/advagg/bundler page. The bundler provides intelligent bundling of CSS and JS files by grouping files that belong together. This does what core tried to do; group CSS & JS files together that get used together. Using this will make your pagespeed score go down as there will be more css/js files to download but if different css/js files are used on different pages of your site this will be a net win as a new full aggregate will not have to be downloaded, instead a smaller aggregate can be downloaded, ideally with only the css/js that is different on that page. You can select how many bundles to create and the bundler will do it's best to meet that goal; if using browser css/js conditionals (js browser conditionals backported from D8 then the bundler might not meet your set value.

Current recommendations for the bundler:

  • Under "Target Number Of CSS Bundles Per Page" select 2
  • Under "Target Number Of JS Bundles Per Page" select 5
  • Under "Grouping logic" select "File size"