- This topic has 7 replies, 3 voices, and was last updated 7 months, 1 week ago by David.
July 2, 2020 at 1:03 am #1349094vast
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?July 2, 2020 at 4:37 am #1349257DavidStaffCustomer Support
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.July 2, 2020 at 1:28 pm #1349881vast
Is there a solution of the cumulative shifts Google is reporting since these are noticeable on mobile devices as well as affect rankings?July 2, 2020 at 2:47 pm #1349920TomLead DeveloperLead Developer
I just checked all three links you share and the CLS scores for each were all
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.July 2, 2020 at 3:12 pm #1349929vast
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.
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.July 3, 2020 at 4:52 am #1350402DavidStaffCustomer 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
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
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.July 24, 2020 at 11:33 pm #1375516vast
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.July 25, 2020 at 4:30 am #1375705
- You must be logged in to reply to this topic.