Critical CSS Not Working

  • Resolved woody1969

    (@woody1969)


    6 years, 10 months ago

    Morning, my critical css is not working. I have tried both of the big critcal css generators. Cached is by Siteground Memchached and using Keycdn. I have also tried disabling all plugins to see if there was a conflict but no luck. At one point I did use an AMP plugin but that has now gone, don’t know if that messed anything up?

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

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

    (@optimizingmatters)

    Hi @woody1969, thanks for moving the discussion here ??

    So:
    * AMP has no impact (AO is not active on AMP-pages)
    * memcached has no impact (except is you have full pages cached in memcached)
    * keycdn has not impact (as the critical CSS is embedded in the HTML)

    Now I checked that page and I see critical CSS in the HTML source, so from a pure AO point of view all works as expected, so the question; what do you mean by “my critical css is not working”?

    frank

    Thread Starter woody1969

    (@woody1969)

    Thanks for the fast reply ?? Your page has 1 blocking CSS resources. This causes a delay in rendering your page on GPSI. Inline and defer is selected with the critical css but still have render blocking?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    So there is no problem with “inline & defer” as such (from a narrow AO perspective), but with the generated critical css. The fact you still have render blocking is because part of the elements in the above-the-fold content are rendered (and/ or styled) by JavaScript, which is invisible to most (all?) Critical CSS generating services. If you compare the 2 screenshots under “prioritize visible content” you’ll see some differences, it’s those differences that will require (manual) tweaks to your critical CSS. If you tried the premium criticalcss.com service to generate the critical CSS, you could always ask them for assistance to fix this.

    To be clear; as can be seen in this test your critical CSS is being used to render the page even before the normal CSS is loaded (rendering starts at 1.5s, the normal CSS is only downloaded at 1.85s.

    If I were you I would now first and foremost focus on “reduce server response time” (the test I linked to shows a 0,8 time to first byte for your HTML). It looks like your hoster has a caching layer, but that is (probably) not working due to one or more plugins using PHP-sessions (which is a killer for most caching solutions and is an anti-pattern in WordPress development).

    Hope this helps,
    frank

    Thread Starter woody1969

    (@woody1969)

    Thanks very much for your help and advice

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome @woody1969, feel free to leave a review of the plugin and support here! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Critical CSS Not Working’ is closed to new replies.