Support » Theme: GeneratePress » Prioritize visible content

  • Hi, this is about me experiencing “Prioritize visible content” with a GP based site, in a GPI test.

    I use GP and got about 85/90 in GPI. This is a great score. The only remaining gap of 15 + 10 points is due to a problem “Prioritize visible content”. common in GP and some other themes (but doesn’t happen on starter themes). I so wish to have these extra points and so love GP and have no plans to use any other theme in my site.

    Only in my homepage I have a JS fade-in effect for the heading that was suspicious as causing this problem, but I checked all other webpages of the site (which doesn’t have this fade-in effect or any other dedicated JS) and the “PVC” problem still occur… 😐

    When I tried to change GP just for testing, to some starter themes, I didn’t have these problem (for example, I tested with BlankSlate). I consulted Frank from Autoptimize and understood from him that this is something Autoptimize doesn’t cover and comes from a theme. I also tried to delete my custom.js file and truncate the cache, yet after all that I still have the same PVC notification in Google which is basically the only problem preventing 100/100… I will cherish any advice.

    I also tried to remove all child-theme css, truncate autoptimize cache, and still had it.

    Thanks anyway for any tip what to do with this.

    Will gladly try excluding any JS in my custom.js file.

Viewing 13 replies - 1 through 13 (of 13 total)
  • 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!

    POV=PVC*

    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.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Prioritize visible content’ is closed to new replies.