Critical CSS on mobile device

  • Resolved rudolfl

    (@rudolfl)


    4 years, 10 months ago

    Hi,

    I just subscribed to critical CSS API key, added it to AO and looks like some rules were already created.

    However, I do not see any improvements in my Pagespeed score. It still shows “autoptimize.css” is a render-blocking.

    I did clear all caches.

    I also noticed, there is a screen size in advanced options and, by default, it is set to a desktop. Comment also say valid inputs are 800×600. But I really need to optimize mobile version.
    Does it mean, AO+critical CSS only work in desktop environment?

    Rudolf

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

    (@optimizingmatters)

    4 years, 10 months ago

    Does it mean, AO+critical CSS only work in desktop environment?

    no, the critical CSS will include CSS for smaller viewports.

    However, I do not see any improvements in my Pagespeed score. It still shows “autoptimize.css” is a render-blocking

    can you share the URL of one (or more) pages that still have render-blocking CSS?

    Thread Starter rudolfl

    (@rudolfl)

    4 years, 10 months ago

    Thanks for replying,

    I keep re-running tests in GTMetrix and PagSpeed Insights.

    I can now see that there are no more complaints about render-blocking CSS. This is a good sign.
    The bad thing is that overall score dropped significantly (about 30% on both tests) after I enabled “Critical CSS”. No other changes were made. Coincidence?

    URL: http://www.hatsfromoz.com.au

    I did clear all caches.
    Should I leave things as is for a day or so to get critical css a chance to create more rules?

    Rudolf

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 10 months ago

    I can’t compare the main KPI’s before/ after, but some pointers:
    1. you still have 1 render-blocking file, jQuery, which holds back your FCP.

    For that you could try to;
    * 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.

    2. there seems to be some layout shifts (CLS) due to the search in the header, I’ll look into that later this weekend & provide tips on how to configure CCSS to avoid that.

    frank

    Thread Starter rudolfl

    (@rudolfl)

    4 years, 10 months ago

    Thank you,

    I am aware of CLS issue due to search element. At the moment, CLS metric is in the green, so I left it to be fixed later. If you have any pointers, it will be great.

    Thank you for pointers to fix jQuery. I will try, but don’t want to change too many things at once.

    My main issue was LCP, this is where I started to dig and introduced CriticalCSS.

    I will dig deeper tomorrow.

    Rudolf

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 10 months ago

    The problem with the search element is that it is shown based on the HTML at first and then hidden by JS, which makes the logo move around. ideally JS is not used to do “UI stuff”, so you might want to re-think the way your search is integrated?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 10 months ago

    Had a quick look at your LCP; the issue is that the LCP image is half an MB, that will always cause some longer waiting time, even more so on mobile …

    Thread Starter rudolfl

    (@rudolfl)

    4 years, 10 months ago

    Thanks for pointing this one out.

    Something is REALLY weird about this one. Image itself is small. If I try to view image on its own, it is about 30-60kB (webp vs jpg format). Source image on my site is about 160kb.

    I am really curious why would test show it as being 0.5M in size. The only explanation I may have is that it is part of slider and slider code adds something to it. I will look deeper

    Rudolf

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 years, 10 months ago

    you’re right, the image is nothing near that size, so looks like a fluke at webpagetest’s … weird.

    that being said, while on the topic of sliders; from a web performance point of view they’re invariably slowing things down (and they do have some UX issues as well), so maybe consider testing if business performance suffers from removing the slider and using still images instead?

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

The topic ‘Critical CSS on mobile device’ is closed to new replies.