Theme Author
Tom
(@edge22)
Hi there,
I think the best thing here is to start with a completely blank GeneratePress installation: https://developers.google.com/speed/pagespeed/insights/?url=speedtest.generatepress.com
That site doesn’t get that issue.
So that means it must be something you’re adding to the site itself.
Perhaps the best thing to do is create a completely empty new page, and test that page. Same issue?
If so, then it’s something on your site you’ve added site-wide (logo, widgets etc..).
Let me know 🙂
I created this empty page and the problem still happens.
In my Child theme I have only functions.php, screenshot.png, style.css and custom.js.
Totally Removing child-theme CSS/JS (and flushing Autoptimize cache), didn’t help.
In all tryings I still get this message in GPI:
46.3KiB of the HTML response was required to render the above-the-fold content. This requires 3 network round-trips. Prioritize the above-the-fold content so that it can be rendered with only the first 2 round-trips’ worth of HTML.
None of the final above-the-fold content could be rendered with the HTML delivered within 2 round-trips.
—
AFAIU, this has to do with the sites header, but I didn’t customize its layout at all…
Hmm, this is very strange. 😐
You seem to be inlining all of your CSS, which means in order to be able to render the content, multiple network round-trips have to be done (as the content is below that large chunk of inline CSS). the solution here would be to switch to Autoptimize’s “inline & defer CSS”-option, cfr. more info on that in the FAQ.
hope this clarifies,
frank (ao dev)
I read the three FAQ sessions that deal with deffering CSS (1 part of ATFC in <head> and 1 part in the <footer> – I assume).
Tom/Frank, I took a look at wp-content/themes/generatepress/css but there isn’t a file for all the ATFC CSS…
That is to say, there is no file like “atfc.css” that should be referenced in Autoptimize’s input box, for all ATFC CSS that I want to load in <head>.
So, is it true that my only option is to duplicate all that CSS and put it in a new file (which I’ll declare as first in the CSS hierarchy), and that this CSS file should include all <header CSS content for all 3 media views and their breakpoints (mobile, tablet, desktop, for newcomers)?
That sounds like a lot of work. I’m not sure if these approximately 15/10 (or 10/5) points are even worth this effort.
What do you think?
there is no file like “atfc.css” that should be referenced in Autoptimize’s input box for all ATFC CSS
that’s normal; try using one of the tools referenced in the AO FAQ to generate your critical CSS and put that in the input box.
Theme Author
Tom
(@edge22)
I’m not even sure that’s the issue.
If you run a test on a GP site with next to no optimization at all (no AO etc..), you still won’t get the prioritize visible content warning: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fdemo.generatepress.com%2F&tab=desktop
to break it down;
1. with normal linked CSS in head you’ll have “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
2. if you inline all CSS, there is no render blocking CSS, but if the amount of CSS is significant, you’ll get “Prioritize visible content” for reasons explained earlier
so the next (and final) step would be to switch to “inline & defer CSS” and entering the externally generated “critical css” needed to render the above-the-fold page immediately which AO will inline while the load of the full css will be deferred. that way the inlined CSS is not render blocking and your visible content will be prioritized (as there will not be multiple network round trip times to get and render the above-the-fold content)
hope this clarifies more 😉
frank
Frank, indeed that’s the case. Here’s what I did (I detail greatly for ease of read of newcomers as well):
First I unclicked “inline all CSS” in AO.
Second, I went to the FAQ you linked to above, and there to the FAQ session “But how can one find out what the “above the fold CSS”?
I used the tool you noted there “criticalcss-bookmarklet“, aimed for Google Chrome.
I run it’s source code in Chrome’s console. I then got my critical CSS as console output.
I went back to AO, clicked “inline and deffer CSS”, and pasted the critical CSS into the box, and clicked to empty all cache and save configuration.
I then ran a GPI test (in another browser, to prevent cache bias, and any reader could of coruse just clear cache in its preffered browser) and indeed, I no longer had this POV problem for both mobile and desktops.
https://gist.github.com/PaulKinlan/6284142
I would wish, however, and this is really only a wish, that GP will have this behavior out of the box to all Autoptimize users. It might be “politically incorrect” to make this specific association between GP and AO (I don’t know the WordPress community politics that much to say) but anyway it can be nice, I think.
Theme Author
Tom
(@edge22)
This is actually the first time I’ve seen this warning.
I’m assuming it comes from having the “Inline all CSS” option checked in the first place.
Glad you got it all working – thanks for the help, Frank!
Tom, is there any chance whatsoever, that this will be included in the core behavior of GP? I really really believe this is a nice contribution…
Theme Author
Tom
(@edge22)
GP itself doesn’t add anything to the theme to communicate with third party plugins (WooCommerce being the exception). This is to make sure the theme stays light, and only adds code that will be used by the majority of users.
A completely default install of GP doesn’t have this issue, it’s introduced by content/other plugins.
