3

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 Jun 20 '15 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). – JohnDoea Jun 20 '15 at 21:41
3

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". – JohnDoea Jun 21 '15 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. – JohnDoea Jun 21 '15 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 Jun 21 '15 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. – JohnDoea Jun 21 '15 at 5:42
  • 1
    Does * work? If not node/* and on the next line <front> should cover most things. – mikeytown2 Jun 21 '15 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.