By EB84


2014-03-20 14:46:52 8 Comments

I am building a Drupal 7 site. These are some of the modules I use: Adaptivetheme (theme), Views and Content Panes, Panels, Mini panels, Panels everywhere, Page manager, Superfish for menus, Addthis, Chosen (drop down).

For improving my site performance and the dealing with the CSS and JS files I am using the Advagg module.

When running the Pagespeed test of Google I am getting the following error as "Should Fix":

Eliminate render-blocking JavaScript and CSS in above-the-fold
content Your page has 6 blocking script resources and 8 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

This is the info Google supplies:

Is there a way I can change the settings of the Advagg module or Drupal core, and solve this issue?

Is there another way to achieve this goal?

Update - after implementing changes according to mikeytown2 answer I got the following message on the Pagespeed test of Google:

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 6 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

2 comments

@mikeytown2 2014-03-20 17:04:03

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

@tenken 2014-03-20 17:43:35

This is a great overview of how to use AdvAgg! Thanks. Maybe this text could be that start of a linked "documentation" page for your project page :)

@mikeytown2 2014-03-20 17:47:01

@EB84 2014-03-21 00:15:51

@mikeytown2 thanks for the great answer. I implemented all the changes, and update the question. I got a little higher score - thanks!

@mikeytown2 2014-03-21 00:26:07

Looking at the output it appears that you have not checked all the boxes under Optimize JavaScript Ordering on the advagg/mod page AND/OR you have not moved All the JS to the footer. Also if I could see the pages full source that generally helps with recommendations (just link to your site).

@mikeytown2 2014-03-21 17:23:32

Thanks for providing that info. If you want less css files on the page go to advagg/bundler and change the css value from 4 down to 1. That will give you a better score but keep in mind the comments I made above about doing so. Looks like adaptive theme uses drupal_add_html_head() to add in browser conditional js, I'll need to verify that is what's happening; means more than 1 theme needs drupal.org/node/2217451. Also I've created this issue to address the render blocking css drupal.org/node/2223267

@EB84 2014-03-21 18:00:47

@mikeytown2 thanks a lot! by the way, please see the bug the advagg module caused my site (after I adjust the setting as you said). Do you think you can help me solve it. link: drupal.stackexchange.com/questions/107445/…

@mikeytown2 2014-05-01 16:41:36

Latest dev of AdvAgg has a Deferred CSS Execution option under experimental css on the advagg mod page.

@user35083 2014-08-13 15:54:08

what about for drupal 6? is there anyway to have all the JS moved to the footer?

@mikeytown2 2016-11-11 22:07:33

@user35083 No good way to do this in D6. In theory backporting the D7 2.x code to D6 wouldn't be that hard to do, but no one want's it bad enough so it hasn't happened yet.

@jacmkno 2015-12-05 22:25:17

You will never get truly high scores with prebuilt drupal modules, the only way to achieve this is by attending and carefully analyzing each the the suggestions made by the google speed tool, addressing each of those independently.

Some things I did to achieve 95 in a very active news site, that by the time I wrote this, scored better than nytimes (Now it doesn't):

  • [blocking scripts] Delay execution of third party scripts like sharethis, facebook widgets, google plus, etc, to run only after the page has been fully rendered. This required some simple string replacements to on the output of html.tpl.php to catch those scripts and queue them for later execution.
  • [blocking scripts] Store the $scripts variable of html.tpl.php (with json_encode) in a javascript variable to queue them for running after the first page load. This is unnatural, but necessary. Some browser specific issues had to be sorted out.
  • [blocking css] Implemented something similar to the Keith Clark's technique, but with rel="prefetch". This introduces the need to solve the FOUC.
  • [Minification and compression] Externalize compression and minification to a distribution server where I can use imagemagic, yui-compressor, pngoptim and more stuff to overcome those rules, without turning the drupal install into an unmanageable mess.

Related Questions

Sponsored Content

3 Answered Questions

[SOLVED] How can I Eliminate render-blocking JavaScript and CSS in above-the-fold content?

  • 2016-06-03 06:16:31
  • Mohit Wadhwa
  • 647 View
  • 1 Score
  • 3 Answer
  • Tags:   7

1 Answered Questions

[SOLVED] How to setup external CSS and JS to prevent render-blocking from Google PageSpeed?

  • 2018-01-09 20:51:59
  • usernameabc
  • 1003 View
  • 2 Score
  • 1 Answer
  • Tags:   8 theming

0 Answered Questions

Properly defer loading javascript

  • 2017-01-20 10:05:45
  • Alex Holsgrove
  • 461 View
  • 0 Score
  • 0 Answer
  • Tags:   javascript

1 Answered Questions

[SOLVED] Ho to improve Drupal site score on PageSpeed Insights Site

0 Answered Questions

AdvAgg Update & Settings Problem

2 Answered Questions

[SOLVED] How to make JS Async and eliminate unnecessary JS?

  • 2015-06-17 12:06:06
  • JohnDoea
  • 2875 View
  • 3 Score
  • 2 Answer
  • Tags:   performance

1 Answered Questions

1 Answered Questions

[SOLVED] Changing numbers of render-blocking JavaScript and CSS

3 Answered Questions

[SOLVED] render($content) puts comment form above markup - why?

  • 2011-09-20 09:43:43
  • Will
  • 759 View
  • 2 Score
  • 3 Answer
  • Tags:   7 theming comments

0 Answered Questions

Sponsored Content