Extra CSS in inline code

  • naruara

    (@naruara)


    6 years, 2 months ago

    Hello,

    I’ve been using the critical css for a few days and so far I found a better way to work with but I still have problems.

    The css have been decrease cause at the first attempted I had something like 3mb of CSS inline, so it was even slower than before.

    Now I found the way to decrease but there is something weird which autoptimize include at the end of the inline css.

    There is another “</style><link rel=”preload”” style link preload added I mean two to be honest, which slow down again the website.

    Of course this CSS is not used. Also when I check the css that critical CSS render. Those two tags are not there.

    Do you have a workaround?

    Config:

    Aggregate CSS-files? ON (without have 10 or more css file loaded, which contribute to a bigger render blocking)
    Also aggregate inline CSS? OFF ( if on I have 3MB of CSS inline)
    Generate data: URIs for images? OFF
    Inline all CSS? OFF
    Fetch Original CSS / OFF
    Add CCSS for logged in users? ON
    Force path-based rules to be generated for pages? ON

    Thanks for your help!

    The page I need help with: [log in to see the link]

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

    (@optimizingmatters)

    6 years, 2 months ago

    the preload-links are to load your full CSS, which is still needed to style the “below-the-fold”-part of the page. without it only the “above the fold”-part of the page would be style. as the CSS is preloaded however, it is not render-blocking, so it will not affect the first paint times.

    hope this clarifies,
    frank

    Thread Starter naruara

    (@naruara)

    6 years, 2 months ago

    Okay, but I checked that Css and there is some unused css.

    Remove unused CSS:

    …css/autoptimize_73bd37
    Size 320 KB
    Potential Savings 308 KB

    There is also no difference comparate to before. I mean the website is still also slow and loose 2.8s cause of the unused css.

    Is there a way to make it working better?
    Because so far I don’t see any difference in speed.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    6 years, 2 months ago

    No, afraid AO (or the power-up) aren’t meant to remove unused CSS naruara, only to make sure the CSS is not render-blocking which goes a great length to ensure “first paint”-times are significantly better. The other thing that is needed is to make sure you don’t have render-blocking JS, in your case jquery.

    For that you could try to either;
    * remove js/jquery/jquery.js from the Autoptimize exclusion JS field
    * or tick the “Defer jQuery and other non-aggregated JS-files?” option in AO CCSS advanced options

    In both cases test extensively to see nothing breaks.

    Thread Starter naruara

    (@naruara)

    6 years, 2 months ago

    In both case the site breaks or have an error with jquery.

    Thread Starter naruara

    (@naruara)

    6 years, 2 months ago

    I have the impression there is bug in the plugin.

    When I have used the “Defer jQuery and other non-aggregated JS-files?”.

    IT has put the font and the google recaptcha in DEFER but after I disabled it cause it was not working well for me.

    The recaptcha is still in DEFER and impossible to delete it.

    Any idea?

    Thread Starter naruara

    (@naruara)

    6 years, 2 months ago

    There is something I don’t understand. I’m doing some test.

    I just saw that the css file of autoptimize is at 2.2MB. How is it suppose to help my website? It can’t go faster. The options are the same I gave you. I noticed this by being not connected to the website.

    You can’t tell me that with 2.2MB most of it is important for my page.

    I already sent a message to the support of Critical CSS before. I will in case wait for their answer.

    Edit: Just tested with the generated CSS of CRITICAL CSS of 70ko page working fine.
    Only thing is those inline style link added which is 2mo.

    I think I understand, as I understand you delete the render blocking by putting the css in the inline? So finally it is not really a solution if it’s working like that.

    • This reply was modified 6 years, 2 months ago by naruara.
    • This reply was modified 6 years, 2 months ago by naruara.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    6 years, 2 months ago

    The unused CSS is being reported as being Autoptimize’s, but AO merely aggregates all the CSS provided by your theme & plugins, so if you (really) want to tackle “remove unused CSS” then you should look into your theme & plugins (you might be able to get some improvement using e.g. “plugin organizer” to only allow plugins to work on specific pages). Moreover the unused CSS will likely be different for different pages (or parts of your site), so that would lead to different autoptimized CSS-files being loaded on different pages.

    hope this clarifies,
    frank

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Extra CSS in inline code’ is closed to new replies.