Large layout shfits

[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;

Broadcast
Java
Sider

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

You’re welcome – thanks for sharing your findings!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts