I was just running through an SEO checklist to see how we could improve and it suggested checking the speed of pages loading using https://pagespeed.web.dev/
It's all looking good with the exception on the Cumulative Layout Shift which we fail on the desktop on all of the pages that I tested. I tested the Voice demo site and that passed so it's obviously something I've done with the website but the fact that it's on all pages has baffled me. Does anyone have any thoughts?
Thanks,
Jo
Hi Jo,
As you may have gathered, Cumulative Layout Shift is a score of how much the content moves around as the page loads. Less movement is better!
I have made a small change that might help a bit, to add the width/height to the html for the logo image.
However, the big problem on your site is the Google Translate widget. There are at least three problems with this:
- You've added the code into the Raw Header HTML field of the theme settings, which means it is drawing the widget in the <head> section of the page, not in the <body>. This generates invalid HTML since you aren't allowed HTML in there!
- When the widget is drawn, it moves the entire page content down by the height of the widget, resulting in a large Layout Shift.
- When you use the Translate widget in the 'SIMPLE' mode, as you have done, when you click on it the list of languages goes off the screen, so it's kind of useless anyway!
For now I have commented this out in the Raw Header HTML using <!-- and --> to start and end the comment. So you can removes these two lines if you want the widget to come back again!
However, i'd recommend against it for the above reasons!
There is a Google Translate includelet you could try instead - e.g., put it in the right column on your homepage.This doesn't set the SIMPLE mode so creates a standard select widget to select language, which doesn't break the layout.
Or you could try adding the code into the Footer HTML. (Although it won't be as visible down there, it will at least be valid and not generate a Layout Shift!)
Hope this helps!
Joe
Thanks Joe. I'd forgotten there was a google translate includelet when I was rushing to try to improve our accessibility.
It's great having it on the homepage but it only changes the language for that page. I've tried inheriting it to subpages but I think I'm doing it wrong as I can't seem to get it working on any of the options.
Sorry!
On your test site I've put it into the right column and set it to inherit to the top. This works fine but has a few drawbacks:
- Some pages don't look good with the right column added, such as "Meet our team" and "Carers' Support".
- There's still some layout shift in the right column as the widget loads (though better than it was!)
- If it's at the top of the column maybe it's too intrusive, and if it's at the bottom maybe it's too hidden?
- It doesn't appear on non-CMS pages.
So not a resounding success, you might say! You could experiment with different placing - such as in the footer?
I would question whether the widget is really necessary. I'm not really sure it helps accessibility - I think there are browser plugins these days that do a similar but better job. (And so presumably if your first language wasn't English you'd be quite likely to have this plugin?)
The Google Translate widget is in fact no longer supported by Google - so it seems they agree!
I'd be happy to consider alternatives if it can be justified as being of value.
We did look at adding it as a standard option to the new Clarity theme (it would live in the grey bar next to the login/admin buttons) but in the end went without it for the above reasons.
Cheers
Joe
That's very interesting and I'm inclined to agree - if google don't think it's the right solution, then neither do I!
Thank you so much for your time and thoughts on this.