[Resolved] Large layout shfits

Home Forums Support Large layout shfits

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1349094
    vast

    It appears that the majority of the site libraries have large layout shifts as well as lower than expected Page Insights measurements. Examples includes;

    Is there a common resolution to the large layout shifts for all the themes? If no, what changes are required for the themes above?

    #1349257
    David
    Staff
    Customer Support

    Hi there,

    most sites i have tested report 0 ( or near as damn it ) for CLS.
    A few tests have shown something like ‘5 elements contributing to a large layout shift’ that totals 0. Not sure how googles algorithms work but that seems a little out of whack

    Overall scores – some sites i admit could do with a better optimized image here and there – but we expect users to replace them any how.
    We also don’t remove font variants as we don’t want to ‘limit’ the end users options.
    Any caching or plugin optimizations cannot be added to the demo sites as they would interfere with the import process.

    #1349881
    vast

    Hi David,

    Is there a solution of the cumulative shifts Google is reporting since these are noticeable on mobile devices as well as affect rankings?

    #1349920
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I just checked all three links you share and the CLS scores for each were all 0.

    As for the other performance metrics – all of the demo sites are as-is, there is no caching, no minifying plugins etc.. We could likely add some, but they’re mostly meant to serve as a visual representation of what you’ll be importing.

    #1349929
    vast

    Hi Tom,

    The issue as the site grows the large layout shifts affect the cumulative shift layout. For example, the metrics for Java shows the following changes at the bottom of the page.

    View post on imgur.com

    Is there a solution to resolve these for the 3 site libraries as you explore the wider collection?

    As for the general presentation, it would be helpful to provide guidance on the changes required (without a plugin to start with) to gain the improvements if there are easily achievable via CSS and/or the child template.

    #1350402
    David
    Staff
    Customer Support

    OK – so lets examine Broadcasts insight report.
    We see 3 elements under Avoid large layout shifts. Lets assume they are causing an unnoticeably small layout shift as the site reports a 0 CLS ranking.

    What else can we learn from the report.

    1. All 3 elements are text elements. The most obvious reason why they could cause a layout shift will be Fonts.

    Which leads us to:

    2. Fonts are listed under Opportunities: Eliminate render-blocking resources and Diagnostics: Ensure text remains visible during webfont load

    Which identifies an optimisation we can make to our site. What are the simplest options:

    1. Replace the google font for a System Stack font.

    2. Serve the font locally
    https://docs.generatepress.com/article/adding-local-fonts/

    Of the two, Option 1 will provide the best performance improvements and i am 99% confident stop those 3 elements being listed. As the browser doesn’t need to make any font requests or assumptions as to what size it will occupy.

    In response to:

    The issue as the site grows the large layout shifts affect the cumulative shift layout.

    Fonts are only loaded once on page load ( and possibly the entire site visit if cached in the browser ). Google is reporting the 3 above the fold elements not the rest of the page, which would be the case if the above were true.

    The vast majority of what Google reports can be cured with better optimization. And are some of the above optimizations i would probabaly take – yes, but are these a real CLS concern – i think not.

    #1375516
    vast

    Thanks for the detailed reply David.

    In testing various solutions, below is a list of things to consider.

    – The changes in localized fonts does not resolve the issue in its entirety.
    – Preloading the fonts minimizes it however does not completely address it.
    – Falling back to system fonts prior to loading Google fonts for example reduces the content reflow the issue remains.
    – If dimensions are not specifically defined, layout shifts.
    – Since CSS is render blocking, it affects the content layout.

    The solution that worked included the following changes;
    – Preloading via HTTP/2
    – Setting the font display to ‘optional’ as opposed to ‘swap’
    – Instantiating web font loader – https://github.com/typekit/webfontloader
    – Specifying dimensions with the associated media queries.
    – Inline above-the-fold CSS.

    Hopefully this helps anyone else that is looking to minimize layout shifts.

    #1375705
    David
    Staff
    Customer Support

    You’re welcome – thanks for sharing your findings!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.