Render blocking CSS issues with optimized files

  • ohslin

    (@ohslin)


    3 weeks, 5 days ago

    https://ibb.co/JR7F31XX

    I am using Autoptimize on my website, but PageSpeed Insights is flagging the generated CSS files as “Render blocking requests.”

    According to the report (screenshot attached), these optimized files are causing an estimated saving loss of 930 ms. The specific files are:

    • autoptimize_single_49ac083....css
    • autoptimize_single_c8d07f6....css

    Could you please help me understand how to fix this? I want to move these network requests out of the critical path to improve my LCP and FCP scores.

    Do I need to enable “Inline and Defer CSS”? If so, what is the recommended way to handle Critical CSS for these files?

    p.s.

    I also noticed a “Forced reflow” warning in the Insights section (screenshot attached). The source is listed as [unattributed], but it takes about 80 ms.

    Could this be related to how Autoptimize handles the JS/CSS execution order? Any tips on how to identify the cause or if there’s a setting in the plugin to mitigate this would be greatly appreciated.

    • This topic was modified 3 weeks, 5 days ago by ohslin.
Viewing 1 replies (of 1 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    3 weeks, 4 days ago

    You will indeed have to look at the “eliminate render-blocking CSS” option, using one of below four options;

    a) generate & copy/paste the “above the fold CSS” in the field below (more info in the AO FAQ, look for “inline & defer CSS”) OR
    b) create manual rules on the “critical CSS” tab (generating critical css for each rule) OR
    c) take a subscription over at criticalcss and paste your API in the field on the critical CSS tab OR
    d) take a subscription for Autoptimize Pro, which includes the automated created of critical CSS rules

    hope this helps,
    frank

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.