current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I am Building a Drupal 7 site.

Thess are some of the modules I use (it may help you understand which CSS & JS I use): Adaptivetheme (theme), Views & content panes, Panels & Mini panels & Panels everywhere, Page manger module, Superfish for menus, Addthis, chosen (drop down) and more.

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

When I 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?

Maybe there is 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.

Remove render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
http://www.mysite.com/…..Xo2mdZX_pzvrHhfQ.js
http://www.mysite.com/…..Xo2mdZX_pzvrHhfQ.js
http://www.mysite.com/…..Xo2mdZX_pzvrHhfQ.js
http://s7.addthis.com/js/300/addthis_widget.js
http://www.mysite.com/…..CXo2mdZX_pzvrHhfQ.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700
http://www.mysite.com/…..Xo2mdZX_pzvrHhfQ.css
http://www.mysite.com/…..Xo2mdZX_pzvrHhfQ.css
http://www.mysite.com/…..Xo2mdZX_pzvrHhfQ.css

Here is the link to my site (so you could check the CSS & JS): http://www.recipespeople.com

share|improve this question
    
Not sure about advagg, but for core it's no-go, there are no settings like this. For advagg I failed to see them, but I stopped to use it pretty soon anyway. Maybe there are settings like this now. Personally I'd post a support request in their issue queue, asking about this, and if maintainer will say they are not available, would change to feature request. –  Mołot Mar 20 at 15:04
    
Your question is too broad. Your site uses CSS and JS -- so does every other site on the internet. As long as the cascade order of CSS is maintained there is little reason you cannot aggregate all your CSS into 1 file. As long as your JS is encapsulated ok there is no reason it cannot be merged into 1 file (as an extreme example). If you can provide details on What CSS and JS files/resources are required by the page; you might be able to get more informed answers. –  tenken Mar 20 at 15:04
    
@tenken how is it too broad? He has CSS and JS linked in a render-blocking way and he want them in a non-blocking way. These ways are pretty much explained (by Google, for example as OP refers to Google Pagespeed recomendations). Your comment has nothing to do with the issue OP asked. –  Mołot Mar 20 at 15:08
    
all linked css and js files block unless their inline code or use 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. –  tenken Mar 20 at 15:14
    
@tenken I updated my question, and gave more info regarding the modules - hope that will help you understand which CSS & JS I use. –  EB84 Mar 20 at 15:20

1 Answer 1

up vote 6 down vote accepted

The readme has a guide on how to do this using AdvAgg.

How to get a high pagespeed score

Go to admin/config/development/performance/advagg
- uncheck "Use cores grouping logic"
- check "Combine CSS files by using media queries"

Install AdvAgg Modifier if not enabled and go to admin/config/development/performance/advagg/mod
- Under "Move JS to the footer" Select "All"
- set "Enable preprocess on all JS/CSS"
- Enable every checkbox under "Optimize JavaScript/CSS Ordering"

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 (https://drupal.org/node/1279226).
- AdvAgg Mod will also convert all async script tags to be compatible with older browser as long as "Rewrite asynchronous script tags to inline, old-browser-compatible scripts" is checked.
- There is an experimental setting under "Experimental Settings -> Deferred JavaScript Execution: Add The defer Tag To All Script Tags" which will load JS in a less blocking way than it is normally done (http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/). This setting should have a similar affect to moving all JS to the footer without having to do so.

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 https://drupal.org/node/865536) then the bundler might not meet your set value.

If you have a landing page with minimal CSS/JS you can use AdvAgg Mod to inline all CSS/JS on that page. 99.9% of sites will not need this but I kept getting requests for this feature so I built it. On the admin/config/development/performance/advagg/mod page under "Inline CSS/JS on specific pages" you can add in pages that you wish to have all CSS & JS inlined. This tool is for laser precision as if it is used incorrectly your sites performance will suffer.

share|improve this answer
    
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 :) –  tenken Mar 20 at 17:43
    
Already did that :) drupal.org/node/2189523#comment-8594829 –  mikeytown2 Mar 20 at 17:47
    
@mikeytown2 thanks for the great answer. I implemented all the changes, and update the question. I got a little higher score - thanks! –  EB84 Mar 21 at 0:15
    
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 Mar 21 at 0:26
    
@mikeytown2 Thanks again. I did checked all the 3 chock-box under "OPTIMIZE JAVASCRIPT ORDERING" and I did chose "All" under "Move JS to the footer". The link to my site: recipespeople.com –  EB84 Mar 21 at 14:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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