The README has a guide on how to do this using current 7.x-2.31+ version of AdvAgg. Also see this wiki page on the High performance group. Most sites can achieve a perfect 100/100 score on https://developers.google.com/speed/pagespeed/insights/. Directions on how to achieve it for a fresh of install of AdvAgg below.
Be sure to check the site after every section to make sure the change didn't mess up your site. The changes under AdvAgg Modifier are usually the most problematic but they offer the biggest improvements.
Advanced CSS/JS Aggregation
Go to admin/config/development/performance/advagg
- Select "Use recommended (optimized) settings"
AdvAgg Compress Javascript
Install AdvAgg Compress Javascript if not enabled and go to
admin/config/development/performance/advagg/js-compress
- Select JSMin if available; otherwise select JSMin+
- Select Strip everything (smallest files)
- Click the batch compress link to process these files
AdvAgg Async Font Loader
Install AdvAgg Async Font Loader if not enabled and go to
admin/config/development/performance/advagg/font
- Select Local file included in aggregate (version: X.X.X). If this option is not available follow the directions right below the options on how to install it.
- Check "Use localStorage so the flash of unstyled text (FOUT) only happens once."
- Check "Set a cookie so the flash of unstyled text (FOUT) only happens once."
AdvAgg Bundler
Install AdvAgg Bundler if not enabled and go to
admin/config/development/performance/advagg/bundler
HTTP/2.0 Settings
- Under "Target Number Of CSS Bundles Per Page" select 25
- Under "Target Number Of JS Bundles Per Page" select 25
- Under "Grouping logic" select "File size"
HTTP/1.1 Settings (default)
- 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"
25 bundles vs 2 and 5 has to do with browser caching. More files equals a better chance of the browser having that combo in its cache, but more files means more connections being established and opened in HTTP 1.1. Use 2 for CSS as this number doesn't wait for any new connections; JS is 5 as most browsers have a concurrent connections limit of 6. This number for bundles was picked after many tests. In HTTP 2.0 there is one streaming connection and the penalty for multiple CSS and JS files is almost non existent; thus optimizing for the browser cache is the best choice; thus 25 should be used for CSS and JS when serving HTTP/2.0.
AdvAgg Relocate
Install AdvAgg Relocate if not enabled and go to
admin/config/development/performance/advagg/relocate
- Select "Use recommended (optimized) settings"
AdvAgg Modifier
Install AdvAgg Modifier if not enabled and go to
admin/config/development/performance/advagg/mod
- Select "Use recommended (optimized) settings"
Generating Critical CSS Files
Go to https://www.sitelocity.com/critical-path-css-generator and input as many landing pages as needed for critical css; the top 10 is usually a good start. If you have Google Analytics this will show you how to find your top landing pages https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages
or for Piwik https://piwik.org/faq/how-to/faq_160/. If you don't know what page to start with do your site's homepage. You can also us this to generate css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=en
Example filenames and paths below are for the "bootstrap" theme; they all start with sites/all/themes/bootstrap/critical-css/
; in your theme create the critical-css/
directory. The next directory is based on the user; anonymous/
, all/
, or authenticated/
can be used.
The next directory can be urls/
or type/
. Looking at urls/
; front is a special case for the front page, all other paths use current_path() as the directory and filename with .css
added to the end; See https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x
Looking at type/
this is a special case for node types. Use the machine name and add .css
to the end. Any node of this type will then have this critical css file applied and inlined. Below are some examples showing how this works.
valid example file locations for the "front" page:
sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css
valid example file locations for "node/1" current_path() page:
sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css
valid example file locations for the node type of "page":
sites/all/themes/bootstrap/critical-css/anonymous/type/page.css
If you want some sort of automated way to generate these css files fourkitchens
has an excellent article on how to set that up:
https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css-drupal-7-theme
async
which is not supported by old browsers. Eg, the default Drupal aggregation includes<link>
tags for all your css. If your site CSS or JS is too complex you'll always have this issue. If you build your site correctly you can aggregate files safely. With no info on the file dependencies the question details are too broad -- a module can never fix his issue; it's all about how the CSS and JS is written and its inclusion order and complexity. he never said he wanted non-blocking, your assuming thats what he wants.