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
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
well, you could tick the “disable google fonts”-option in AO or experiment with the “google webfont optimizer” plugin?
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
Could you have any suggestion in order to manage this issue?
tweak the critical CSS maybe? 🙂
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
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”?
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
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
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?
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 😉
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
