It seems to me that my main Drupal UI based task to leverage my site's optimization is further optimizing it's CSS delivery...

Given the following facts, It's wired for me that Google's PSI advices me to do so:

  1. Aggregation is on for CSS.
  2. AdvAgg is installed and (as can seen from the picture) Both CSS minification & compression are on.
  3. If it relates in any way in this case --- HTML is minified (if CSS served via HTML it would be served better, I guess).

Besides that, the site is very light in graphic details (both images and CSS).

I've tried to do the following AdvAgg conf's, but when I ran PSI again the advice still appeared:

  1. Putting more css bundles per page (5 instead of 4) while I admit I am not familiar with the term at all.
  2. compressing the (small amount) of inline CSS via YUI method.
  3. Enable preprocess on all CSS and Checking all checkboxes at "Optimize CSS rendering", at the Modifications tab (via Modifications sub-module).

Further details:

Full PSI score results

It seem I don't have much options left... Would appreciate your help, Ben.

enter image description here

  • 1
    Don't rely on everything PageSpeed tells you. It is an automatic service that only thinks about concepts, not about the speed itself. Further optimization, to get it to 100%, could only be achieved with a great server and some tweaking. Unoptimized images hold the greater amount of speed, same with server speed. If you fix response time and images, PageSpeed would definitely jump over 90%, which is awesome IMHO. Sometimes, we do things rather UX wise and although speed could take part of the process, we also think about other important things, especially regarding images (cover, for instance).
    – designarti
    Commented Jun 20, 2015 at 20:30
  • Hey @designarti, the images of my site are very small (mostly between 2kb's to 40 kb's the most, and only about 4 images between 50kb's-80kb's). I will speak with the server support guys but It's very important for me to know if there is anything left to do with AdvAgg in relation to the CSS... (I use only Minify & AdvAgg modules btw).
    – user16289
    Commented Jun 20, 2015 at 21:41

1 Answer 1


This is the issue you'll want to follow: https://www.drupal.org/node/2396609 Inline critical css.

You can get rid of this message by using "Deferred CSS Execution: Use JS to load CSS". It's under the Experimental Settings of the CSS section. When you enable this, the page will no longer wait for the CSS to download before it starts to render. The bad part is you'll get what's known as a flash of unstyled content (FOUC). The issue I linked to above has to do with inlining the CSS that's needed to display the above the fold content so the FOUC doesn't happen.

Another way to get rid of the message is to inline all the CSS. This can be done by going to the Inline CSS/JS on specific pages section; just use the CSS section. Pick the pages you want to be optimized; node/* works for all nodes as an example.

The bundler comes into play when you look at the connection view from http://www.webpagetest.org/. If you're opening a connection in order to download a single css and/or js file then you should lower the number of bundles and see if that prevents a new connection from being used; this is super helpful with HTTPS connections which take up a lot of time to open. If there are a lot of files being transferred (image heavy site) then using more bundles will help with getting a better cache hit ratio in the browser. I found that 4 for both works pretty well in most sites but going higher or lower really depends on the site. Higher is usually better if the visitor is going to hit multiple pages. It's sorta an art form in order to get it optimal. Here's the issue for Drupal.org in regards to using AdvAgg for front end optimization: https://www.drupal.org/node/2493801

  • Mikey, Thanks for the detailing! Before I saw the answer I came to reply that I played with the bundles after theorizing that the 4 "bundles" I saw in the bundle tab are actually the 4 CSS files that came up in Google's PSI (didn't know what that is then)... So when I lowered them from 4 to 1 there was a noble improvement (from 63 to 78! for mobile, and only one file was noted - but the advice remaind) - It's satisfying to read the second part of the answer and understand it even better after this "Bundle playing" experiment I did earlier... Will now learn of, and try "Deferred CSS Execution".
    – user16289
    Commented Jun 21, 2015 at 2:11
  • Update - Deferred CSS Execution reduced PSI mobile score from about 78 to 68 (with 1 bundle) and for 58 with 4 bundles... So When don't using this tool, and having 1 bundle I get 78 which is pretty good, but still see the advice at Google (orange instead of red this time), and for a single file... Maybe there is anything else you would advice trying? Ben.
    – user16289
    Commented Jun 21, 2015 at 3:29
  • 1
    INLINE CSS/JS ON SPECIFIC PAGES - This should give you a good sore; Use css and pick the pages you want to be optimized. Just remember that the score isn't everything.
    – mikeytown2
    Commented Jun 21, 2015 at 5:10
  • Sure, I know it's not - I just want to do all I can via the UI before I start negotiating with the server's guys and this seems to be my last task... I went to "INLINE CSS/JS ON SPECIFIC PAGES" but I have about 40 nodes... Is there any global option elsewhere or some global syntax? Thanks.
    – user16289
    Commented Jun 21, 2015 at 5:42
  • 1
    Does * work? If not node/* and on the next line <front> should cover most things.
    – mikeytown2
    Commented Jun 21, 2015 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.