Support » Plugin: Autoptimize » What are the Benefits to Aggregate Inline CSS?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Just a slightly smaller chance of things breaking, as that way CSS is kept in the order it is found in. Not aggregating inline CSS has no performance impact to the best of my knowledge.

    hope this clarifies,
    frank

    Thank you for answering my question. I have been wondering about it for awhile. I didn’t want to take your time. I have been researching it for a few days but didn’t find anywhere with a clear answer.

    I think I will change my workflow to inline CSS. I think this will solved above the fold better.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I generally would advice against inlining all CSS, because:
    * it makes your HTML bulkier (I have seen pages inline all CSS where the CSS was 95% of the HTML) and thus slower to load
    * the CSS is not cacheable that way, it has to be send over and over
    * it pushes your social meta-tags down the HTML where some (e.g. FB) won’t find it any more

    I you want to improve ‘above the old” and ‘start render’, you should look into “inline & defer” instead (see the AO FAQ for more info).

    frank

    Thank you Frank for the advice. I see your points. I’ve learned so much from you.

    Do html pages get cache? If it does then the inline CSS get cache with it, no?

    Another option is inline above the fold CSS and exclude those classes and id. How do the media query get excluded?

    Example: @media (max-width:768px){.class {width:768px}}

    Do we just exclude the .class?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Do html pages get cache?

    not by AO, but maybe you have page caching by your hoster or a plugin?

    If it does then the inline CSS get cache with it, no?

    yes, but assuming the full AO’ed CSS is the same across pages, when inlined you have

    HTMLA with CSS1 inlined = 100KB
    HTMLB with CSS1 inlined = 100KB

    vs
    HTMLA with CSS1 linked = 100KB
    HTMLB with CSS1 linked = 20KB as CSS1 does not have to be re-downloaded

    Another option is inline above the fold CSS and exclude those classes and id.

    What do you mean “exclude those classes and id”?

    So the idea is to inline above the fold CSS. Do aggregate inline CSS but exclude those classes and ids from above the fold inline CSS.

    I see what you’re talking about “HTMLB with CSS1 linked = 20KB as CSS1 does not have to be re-downloaded”. That make sense. But if aggregate inline csss and if I have inline CSS on all my pages then CSS1 linked will be re-downloaded for all pages because they will different file each time, right?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    So the idea is to inline above the fold CSS. Do aggregate inline CSS but exclude those classes and ids from above the fold inline CSS.

    AO does not support that (pretty complex to remove specific CSS) and considering the critical CSS can be different for each page this too would cause the aggregated CSS to be different for every page.

    I see what you’re talking about “HTMLB with CSS1 linked = 20KB as CSS1 does not have to be re-downloaded”. That make sense. But if aggregate inline csss and if I have inline CSS on all my pages then CSS1 linked will be re-downloaded for all pages because they will different file each time, right?

    only if your inline CSS is different on all pages, in which case I would suggest to exclude the different part from optimization or to disable “aggregate inline CSS” 🙂

    Thank you so much. After this conversation with you think the best option for me is not aggregate inline CSS so my CSS1 linked will be the same for all pages.

    I will inline all above the fold CSS and keep other inline CSS to the minimal.

    Question: When we don’t aggregate inline CSS, does it still get optimized and minified in HTML? I do use Varnish so HTML page will get cache.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    No, inline CSS does not get minified when “aggregate inline CSS” is off. but then again most inline CSS I see is already minified, so impact is small 🙂

    Thank you for answering my questions. Now I know I will optimized my inline CSS manually. Thanks again Frank. You’re the best as always.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘What are the Benefits to Aggregate Inline CSS?’ is closed to new replies.