[Support request] Google PSi reports “Avoid large layout shifts 5 elements found”

Home Forums Support [Support request] Google PSi reports “Avoid large layout shifts 5 elements found”

Home Forums Support Google PSi reports “Avoid large layout shifts 5 elements found”

Viewing 15 posts - 16 through 30 (of 83 total)
  • Author
    Posts
  • #1440433
    David
    Staff
    Customer Support

    I just tested 3.0 latest alpha with Sidebar/content/sidebar – both on floats and flex version.
    Neither of them reported any CLS issues.

    LCP will be relevant to the content of your page. It is the measurement of time taken to load the largest element in pixels ( which is what google assumes is the most important content ). If you have any optimizations ( eg. lazyload, defer scripts etc ) or those elements request takes longer then expected it will significantly increase the LCP time.

    #1440461
    Longinos

    Hi David
    Sorry, my bad.
    I think have firured it, and maybe a is Dev Tools fail.
    When you test a page, you have it in the browser view, so when you start recording for performance you got the whole page when it star. Then the redording tool make a refresh of the page (these blank images) and the page start to render….
    Is hard to catch how dev tools works.

    View post on imgur.com

    #1440495
    Deepak

    Hi David,

    Please check the link or page which I have shared

    I deleted all custom CSS, de-activated cache plugin so no customization in the theme

    Did reset to defaults for all the generatepress settings

    1. Use sidebar/content/sidebar for all the layouts
    2. Place 20% for both sidebars
    3. Use 1900px for the main container layout as I want to use 100% as max-width (With default 1200px CLS was not seen for me as well)
    4. Using Flexbox
    5. Added secondary navigation menu in left sidebar

    Below options are enabled/disabled

    View post on imgur.com

    and PSI reports CLS (same image above contains screenshot)

    If required I can share login credential of my staging site.

    #1440815
    Tom
    Lead Developer
    Lead Developer

    Does the issue continue to happen if you remove the Secondary Navigation from the sidebar?

    I’ve tried to replicate it myself but I’m not getting the same results: https://tomusborne.com/dev/cls-test/

    #1441113
    Deepak

    Please ignore this comment

    #1441357
    Deepak

    Hi Tom,

    After spending a whole day I think I have found a decent solution but would request you to have a look as I don’t have any knowledge of javascript

    There were two problems which I was confused with one
    1. Cumulative layout Shift
    2. FOUC (Flash Of Unstyled Content)

    For problem 1:
    There were two div class which was reporting the CLS
    a. for mobile (main-navigation)
    b. for desktop (site container)

    For mobile I figured the problem was custom css which I was adding to modify mobile logo width to 80%. I changed the 80% to 165px and the CLS for mobile was fixed

    For desktop the culprit was Antispam Bee plugin. I have no idea how this can cause CLS. I also tries another antispam plugin and that also had same result. Lastly I settled with Akismet Anti-Spam which doesn’t seems to cause CLS so for desktop also Google PSI is HAPPY

    For Problem 2:
    The FOUC was still not fixed as I can visually see the layout shifting from left to right which for some reason is not seen in your dev environment.

    Normally we use Critical CSS to fix these issues but the critical CSS functionality of none of the plugin I use was able to fix this FOUC – WP Rocket, Litespeed Cache, Autoptimize, FlyingPress

    So I googled little bit and in this forum https://stackoverflow.com/a/21668527 I found below code

    <script type="text/javascript">
        var elm=document.getElementsByTagName("html")[0];
        elm.style.display="none";
        document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
    </script>

    which is based on javascript (I don’t want to use jquery as that is the whole reason I switched to GeneratePress)

    I added this code with wp_head hook and now I don’t see my content flashing any more.
    Verified with chrome, firefox, Edge.

    I have following questions/requests for you if you can please help
    1. Why a anti spam plugin causes CLS? It doesn’t even load any JS/CSS on the frontend
    2. Is it possible for you to consider an enhancement to add an option to assign width for logo for mobile devices in the customizer so that we don’t have to use Custom CSS code
    3. Can you verify the above code if it makes sense to use or do you foresee any problem?
    4. Why the FOUC is only seen in my staging environment and not yours? Believe me I disabled all the plugins, removed all customisation and with default generatepress configuration + 2 sidebars I was still able to see my content move from left to right so this cannot be my custom CSS. I would really appreciate if someone can check this instead of me using a hack to avoid FOUC.
    5. If there is no other option other than to use the hack, would it be possible to add this script in a different file such as fix-fouc.js in my child theme and call it in the head. So I can use WP Rocket to call this script only for user interaction

    Regards
    Deepak

    #1441619
    Tom
    Lead Developer
    Lead Developer

    1. This is a question you’ll need to ask the plugin developer. I’m not familiar with the plugin/code it uses, unfortunately.

    2. So a mobile option as well as the current logo width option?

    3. That code basically hides your entire site until the entire DOM is loaded. It’s not something I’d do from a UX perspective, but there’s nothing overly wrong with the method.

    4. I’m not sure. Perhaps it’s something in your content? Some custom CSS? To test, you should try a page with just regular content, see if the same thing happens.

    5. For sure, you’d just need to add it to a file and use wp_enqueue_script() in your functions.php file. However, it’s a tiny bit of JS – it may make more sense to load it inline.

    #1441624
    Deepak

    Thanks Tom for your response and looking into this.

    For now I will use the javascript until I face any issues in which case I may debug this further.

    Yes, if possible kindly add a similar option to adjust width of logo for mobiles but not in percentage as I see layout shifts with that 🙂

    Regards
    Deepak

    #1441633
    Tom
    Lead Developer
    Lead Developer

    I’ll take a look at doing that – thank you! 🙂

    #1446773
    Longinos

    Hi to all, @tom, @david
    Maybe is a dumb suposition, but…
    The issue that @deepak is facing is a cls with this structure in the body of the page:

    left sidebar – article-post – right sidebar

    but in the html code that is not the order.
    First is the article-post and then left-sidebar and right-sidebar, so the 1st element to be painted is the article-post with empty space in their left side. This makes the article-post appear at the left side of the viewport, then the left-sidebar become painted so it push the article-post to the right.

    If this is true, a structure article-post – left sidebar – right sidebar can´t make the cls appear.

    Does this make sense?

    #1446879
    David
    Staff
    Customer Support

    Hi Longinos

    the Content / Sidebar HTML structure is actually based on the logical order for Mobile stacking order ie.

    Content (1st) / Left Sidebar (2nd) / Right Sidebar (3rd).

    If the structure was changed to match the desktop layout – then re-ordering on Mobile would be required.

    However this should never be an issue as the CSS required for the layout is loaded before the HTML is rendered. The only time it could be a problem is if that CSS is deferred, been incorrectly ordered by a cache/optimization plugin or Critical CSS is badly implemented.

    CLS occurs only when there is change to the structure after the first contentful paint.

    In all our tests on a clean install of GP there has been no signs of CLS related to the theme.

    #1446884
    Deepak

    Hi David,

    I have been trying “Critical CSS” functionality of many caching plugin for GeneratePress 3.0 alpha with flexbox and somehow none of them are working.

    Without Critical CSS the CLS is not seen i.e. it is 0 but as soon as I add Critical CSS I get high CLS value for both mobile and desktop (even with a clean theme).

    Can it be due to the new FlexBox layout? I have reported this to individual plugin developer but their statement is that the plugin cannot be compatible with every theme.

    What order should be considered here or what is exactly different with this theme layout that none of the plugins work?

    Have you guys tried any cache/optimization plugin’s critical CSS in your environment which didn’t caused CLS with sidebar/content/sidebar layout using flexbox on 3.0 alpha release? if yes, can I have a look at the critical CSS content or a link to that page so I can compare the difference?

    Because without Critical CSS we get this Eliminate render CSS error with PSI, as a workaround I am preloading all my CSS files even though I know all those CSS files are not required for above the fold content but I am not sure what else can be done here.

    Regards
    Deepak

    #1446924
    Longinos

    Hi David
    I only try to found a rationale to the issue.
    The css is aplied when the html is rendered and in the same order, I think, so the css for the left-sidebar is applied after the article-post.
    Maybe one solution is apply a class to the article-post that reserves the space at the left side for the sidebar when these structure is used.
    That is a question not an afirmation.
    Or maybe I´m wrong, I don´t know.
    Sorry if that bottered you, I only try to help.

    #1447038
    David
    Staff
    Customer Support

    Hi Longinos – no apologies necessary – sorry if I came across a bit harsh. Feedback is always welcome and appreciated. If you have a specific issue – raise a new topic where we can take a look at the site and advise.

    Deepak,

    Critical CSS as a plugin one click option is never going to work for the majority of themes. The Theme does not know of the plugins existence, and neither could the plugin know of themes CSS let alone what is deemed critical. The same has also to be said for any plugins you’re using or custom CSS – how would it know of this?

    The terms above the fold is ridiculously subjective. What is above the fold on mobile, tablet and desktop will inevitably always be different unless you’re stuffing your site with a consistent Full screen hero element. Also what is critical for one page may not be the case for another page. Critical CSS has to be specific to each and every site ( and page ) design, which is why manual systems for generating critical CSS exists.

    Also you should avoid Critical CSS if your server has Page Caching enabled or what you may find is changes to your CSS ( via customizer / plugin or custom CSS ) are not updated creating a broken layout or leading to FOUC and CLS as the new CSS is loaded after.

    We do not have a site with Critical CSS optimizations in place. Personally I do not see it as necessary. The base main.css and main.js in 3.0 is compressed to a tiny 7kb.

    We have moved some CSS to components, which are only loaded if they are being used such as:

    Comments: comments.min.css
    Widget Areas ( for top bar and footer): widget-areas.min.css

    The comments css could be deferred as that should be below the fold.
    Widget areas also could be deferred if you’r only using Footer Widgets ( Not Top Bar ).

    Eliminating render blocking – here you must decide what must be loaded before rendering. What we can say here is that the Themes CSS must be loaded before rendering. It would be down to you to decided what content/plugin related CSS ( and JS ) can be deferred.

    #1447062
    Deepak

    Thanks David.

    I am very much of the same opinion, nor am I very big fan of Critical CSS. But what bothered me was the render blocking error.

    I was quite impressed and surprised as GeneratePress was the first theme (at least which I have tried and tested) who is handling the CSS loading based on the components. I had been asking this to my developer of last theme and he said it was not possible.

    I know main.min.css and style.min.css are the main stylesheets I want to be loaded while the rest could be deferred.

    But can you help me how can this be achieved? As I know these optimization plugins can do that, but this is only possible if the plugin creates Critical CSS and then defers all other stylesheets.

    Are you aware of any plugin which can selectively defer stylesheets without generating Critical CSS?

    Or can I do this using hooks or some custom code which you can help me with?

    Thanks
    Deepak

Viewing 15 posts - 16 through 30 (of 83 total)
  • You must be logged in to reply to this topic.