0

My Right-to-left site uses clean Bootstrap subtheme and has CDN, Internal caching (including Boost), Minification, Compression and aggregation, but still I get very low grades with all that has to do with CSS performance. Therefore I tried to inline all the CSS in my site via AdvAgg (please see image), what helped me in another theme, but not this time...

Is there anything else you think I should try?

enter image description here

enter image description here

Improve this question
10
  • 1
    This is a pretty good guide on how to get css to load quicker fourword.fourkitchens.com/article/… – mikeytown2 Aug 28 '15 at 19:35
  • Hello @mikeytown2 ! I did everything he said about AdvAgg... The amount of CSS errors reduced to only a single error... But this is the only error I can't solve in any way (Uploaded an image)... This error always appears... It's the only error that always appear and it's seem to be Bootstrap-CDN related, what makes it more vague to me. – user16289 Aug 29 '15 at 3:16
  • Inspect your code and see what CSS is not aggregated and inlined the way you want it to. We can't see it. You can. And knowing where it came from is most important part of knowing why it avoided advagg processing. – Mołot Aug 30 '15 at 0:01
  • @Mołot, I would very much like to do so but don't know how. Can you please, and with much grace, link me to an article that explains how to see what you mean to with Firebug? Ben. – user16289 Aug 30 '15 at 13:25
  • @benos just Google "how to use firebug", "how to inspect CSS with firebug", things like that. Or if you prefer Chrome, substitute firebug with chrome developer tools. – Mołot Aug 30 '15 at 13:27
3
+50

What you are trying to do with the CSS inlining can only happen when the CSS is coming from Drupal, internal resource. External CSS resources cannot be inlined. If you read at the top of the "Inline CSS/JS On Specific Pages" it says, "This will prevent all local CSS and/or JavaScript files...". I agree that it is somewhat subtle and might need to be highlighted better in the UI that it only works for internal resources.Here is a screenshot of what I am referring to.

enter image description here

The only option you have with external CSS resources with AdvAgg is to move them to the TOP of the page. You could move the resource to the bottom of the page via a hook_alter_css in a custom module. But seeing this is the bootstrap CSS I can guarantee that will render your website broken.

Unfortunately, you cannot do anything about the CSS file with Pagespeed. You could host the CSS file in your site, but then you would lose the advantage of the CDN, which I see that the rest of your site is not using a CDN. Remember that Google Pagespeed scores are only one of many benchmarks and tests you should use in making a website perform. It is best to compare many different sources of data for optimizing your site (Pagespeed, YSlow, Pingdom Page Test, Webpagetest.org, etc.) And with optimization you have to give and take, it is nearly impossible to get a perfect score because you have to make sacrifices in certain areas. Being this CSS file is on a CDN and it is minified already, the impact to your site is honestly low. If you were to move the CSS to your site so AdvAgg could inline it, it would actually be worse for your site. It is a large CSS file that is critical for rendering your website, a CDN is the best place for it! I personally have found Pagespeed to be unrealistic in it's scoring from time to time.

Improve this answer
2
  • This is correct. The bootstrap css is external. Copy locally and use hook_alter_css to switch the external location to be local. – mikeytown2 Sep 3 '15 at 22:05
  • So, everyone who uses Boostrap CDN is doomed to have a lower Pagespeed-insights score because of that particular file? :| – user16289 Sep 5 '15 at 22:20
4

Your setting for Inline CSS on specific pages is wrong. The path you should set is:

node/*
Improve this answer
6
  • It's not helping and cannot help --- My site is RTL, it's a natural flip of the language and the CSS itself is inlined --- all besides the file I mentioned... :| – user16289 Aug 31 '15 at 17:02
  • It doesn't matter if your site is RTL or not. The path registered in route is node/*. – Елин Й. Sep 1 '15 at 5:45
  • 4
    He is right. URL paths cannot be RTL. – Brady Sep 1 '15 at 12:07
  • Me? or Him? Anyway @ЕлинЙ, It's seems to me you are wrong here because most of the CSS does inlined! www.beniaharon.co.il, please go in, view source and see the there is inlining of the CSS even via this path. – user16289 Sep 1 '15 at 16:13
  • 1
    @benos Path matching is string matching...are your node pages available at (e.g.) www.beniaharon.co.il/1/node? As in with the node ID before the node part? If so, then you're right, the path should be */node. If not, and your paths are the regular (e.g.) www.beniaharon.co.il/node/1, it should be node/*. RTL doesn't come into it, unless you've somehow managed to convince Drupal to serve its node pages from an unusual path as part of your RTL conversion – Clive♦ Sep 2 '15 at 18:06
0

Inlined CSS is a double edged-sword...

It makes the page load quicker for the first visit to a site as there are no additional http requests to load the styles. However, for subsequent visits it is actually detrimental since with non-inlined css they would then be served up from the browser cache and cause pretty much zero load delay, whereas the inlined CSS adds to the page weight and thus load time of each and every page loaded.

It can be a useful tool to prevent an HTTP request by adding a few lines of CSS to a page but I certainly wouldn't recommend it for inlining hundred or thousands of lines of CSS, unless of course you are expecting the majority of visitors to visit only one page.

I'd say a good aggregation strategy is preferable to prevent large number of CSS files from being loaded on that first page load.

Improve this answer

Your Answer

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