Support » Plugin: Autoptimize » Autoptimize css is above the fold

  • Resolved LoreGI13

    (@loregi13)


    Hi
    I’ve just activate the plug-in, on wp 4.7.3. and using the Twenty seventeen official theme.
    I retested the site with google pagespeed tool and the tool points out that:
    wp-content/cache/autoptimize/css/autoptimize_449ff626cc583ad5ff8a67ab895c76ca.css
    is critical css wich stop contents above-the-fold

    this sound strange, as this is the plug-in that should solve this kind of problems…
    Can you help me with this ?
    thanks
    Lorenza

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Frank Goossens

    (@futtta)

    this sound strange, as this is the plug-in that should solve this kind of problems…

    Nope, AO is not an automagical Google Pagespeed Insights fixer 🙂

    Can you help me with this ?

    Off course; you can either switch to “inline all CSS” (easy) or to “inline & defer CSS” (better). there’s more info in the FAQ.

    Hope this helps,
    frank

    Thread Starter LoreGI13

    (@loregi13)

    Hi Frank,
    thanks for helping.
    I’ve selected the inline & defer CSS option. As PageSpeed Tools Insights tells me that there is one css that stop contents above-the-fold and this is:
    https://fonts.googleapis.com/css?family=Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i&subset=latin%2Clatin-ext
    I have tried to copy and past this css in the Inline field, but maybe I loose something because if I re-test with Google Pagespeed Insights I have the some result – the fonts.googleapis is still there boring me!
    I’ve tried to re-test with all the wp plugins deactivated – all except the autoptimize. Nothing changes.
    mmmh. Can you help?
    thanks
    Lorenza

    Plugin Author Frank Goossens

    (@futtta)

    well, you could tick the “disable google fonts”-option in AO or experiment with the “google webfont optimizer” plugin?

    Thread Starter LoreGI13

    (@loregi13)

    I prefer not using an other plug-in which would slow the performance.
    I have disabled google font.
    In the meanwhile, I have choosen to Exclude CSS from Autoptimize the theme stylesheet (Twenty Seventeen theme) because I noticed that the h1 Site Title (that should be at the bottom of the featured page) was not displayed correctly.
    Now, Google Pagespeed Insights alert me that the Twenty Seventeen stylesheet is stopping above-the folder, but I cannot compromise the layout of page.
    Could you have any suggestion in order to manage this issue?
    Thanks!
    Lorenza

    Plugin Author Frank Goossens

    (@futtta)

    Could you have any suggestion in order to manage this issue?

    tweak the critical CSS maybe? 🙂

    Thread Starter LoreGI13

    (@loregi13)

    ok, maybe now I’m understanding better how to use the field to Inline “above the fold CSS”. You mean I tweak the critical CSS (on FAQ I found I can use a criticalpathcssgenerator) then I past ONLTY THAT critical path in the field. I see that now it is fixed. Only now I understand this is the correct way to use “inline & defer CSS” field.
    (The only problem is that if I don’t exclude the whole CSS Twenty Seventeen stylesheet from Autoptimize, I don’t know why, the Site Title will not be displayed correctly… it seems the autoptimize change the Site Title relative position – anyway now I exclude this css :this is the only way I think)
    Thanks for helping with this.
    Lorenza

    Plugin Author Frank Goossens

    (@futtta)

    The only problem is that if I don’t exclude the whole CSS Twenty Seventeen stylesheet from Autoptimize, I don’t know why, the Site Title will not be displayed correctly… it seems the autoptimize change the Site Title relative position – anyway now I exclude this css :this is the only way I think

    well, it depends; do you also have that problem when not using “inline & defer”?

    Thread Starter LoreGI13

    (@loregi13)

    let’s see:
    if you mean choosing the option
    Inline all CSS
    I can see I have no problem with Title Site layout, so, this solution would be better, but, what about this:
    Inlining all CSS can improve performance for sites with a low pageviews/ visitor-rate, but may slow down performance otherwise.

    if I do a pingdom speed test, or Inspect page with Chrome’s DevTools, I cannot feel any difference, the only element with a volubility is TTFB
    Waiting (TTFB) dance between 400 ms to 1 s and it does not depend upon the autoptimize.

    so, let’s ay: if my visitors are less than 100 per day , do you suggest using the simple “Inline all CSS” option?
    thanks!
    Lorenza

    Plugin Author Frank Goossens

    (@futtta)

    No, I actually didn’t mean “inline all CSS” nor “inline & defer CSS” 🙂 but if “inline all CSS” works, then not doing either very likely will work as well, which confirms the h1-problem stems from the critical CSS you’re using.

    as far as “inline all CSS” is concerned; even more important is the size of the CSS that is inlined. if you have more then let’s say 100KB I would advice against that even if you don’t have a high pageview/visitor rate (which is not the same then amount of visitors).

    frank

    Thread Starter LoreGI13

    (@loregi13)

    Hi Franck, thanks for assisting me through many steps – and I understand I’m not so smart on this backstage elements.
    So, if I use the Chrome’s DevTools and focus on css elements, it is strange.. the css I can see are:
    dashicons.min.css
    admin-bar.min.css
    font-awesome.min.css
    and the weight is 108 kb. (But where are all the other css? I can imagine that autoptimize transformed packed and I cannot imagine !)
    So – I admit it is too tricky for me to apply your suggestions and I could drive you crazy which is not good – let’s say: the best solution in my case could be return on option Inline and defer and then exclude the theme stylesheet from autoptimize – otherwise fix that critical CSS on h1 code. This is my pragmatic solution, what do you think?

    Plugin Author Frank Goossens

    (@futtta)

    well, just one small adjustment to your proposal;

    the best solution in my case could be return on option Inline and defer and then […] fix that critical CSS on h1 code.

    and i can agree entirely 😉

    Thread Starter LoreGI13

    (@loregi13)

    Hi Frank
    second time using the critical path css generator gave me a different result, and pasting it in Inline and defer field I notice that problem with h1 Site Title seems fixed.
    Testing website with GTmetrix and google page speed insight, seems all perfect.
    I cross fingers, and thanks for all suggestions you shared
    Lorenza

    Plugin Author Frank Goossens

    (@futtta)

    you’re welcome Lorenza 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Autoptimize css is above the fold’ is closed to new replies.