High CLS on 2.9 with many menu items

Thank you for reporting this, @r3crac. There is in fact a related support question here so it does indeed look like something is going on here.

I was comparing 2.8 and 2.9 using the Theme Unit Testing content but I cannot spot the CLS you point at? From my end, the layout and li styling are identical. Could you help provide a little bit more details and perhaps a screenshot to illustrate your findings?

Once we have more details, we can open a ticket in Trac to have this fixed.

Thank you!

Hello,

I have updated theme to 2.9 version, so you can check CLS on my website. Here is a screenshot from CLS Checker addon (LS-4 CLS: 0.146): https://i.imgur.com/pA9zrgZ.png

Screenshot from page speed: https://i.imgur.com/OaelitV.png

I did not change anything in css, so it’s stock (just updated theme to 2.9). I hope that’s enough to find a fix.

Cheers

• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.

edited (I thought I found a fix, but I didn’t)

• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.

Hi @r3crac – your site is loading quickly for me today, and it looks you’re still running Twenty Sixteen 2.9. Did you manage to solve the issue?

Hey, no I did not find a fix (CLS>0.1). I think I need to switch from version 2.9 to 2.8.

2.9:

2.8:

Didn’t change CSS, just theme version.

edit: switched to 2.8 and made some css changes (cls near 0). On 2.9 cls>0.1

• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.

@r3crac Thanks for that screenshot. Would you be able share the tool you’re using, if it’s an online one?

If you’d be willing to do a test, could you create a second menu with fewer menu items – say five – and then temporarily assign it to your header menu, and let me know the results? This would help confirm the source of the issue. Thanks!

The source is: https://pagespeed.web.dev/
Original list (version 2.9):

5 items in the list (version 2.9):

I’ve made a test with CLS Checker Chrome addon and CLS=0:|

Another test with different page to be sure (ver. 2.9, 5 items in the menu):

Checked out again with more items (ver. 2.9 with many items in the menu):

Well, I guess many items in the menu in version 2.9 is the source of the issue with high CLS (Google wants it to be lower than 0.1).

2.8, big menu list:

• This reply was modified 1 year, 7 months ago by r3crac.

Hi there – I created a test site running Twenty Sixteen, with a main menu consisting of over 40 menu items.

With Twenty Sixteen 2.7 – CLS was 0.083
With Twenty Sixteen 2.9 – CLS was 0

Based on this test, I’m not sure yet that a large number of menu items is sole cause of the issue you’re seeing.

Hi @r3crac – @greenshady noticed that a big change in Twenty Sixteen 2.9 is that fonts are loaded locally instead of via Google Fonts.

If you want, you could run a test by undoing that change, to see if you still have the slow CLS. Try adding this piece of code using the Code Snippets plugin with 2.9 and let me know:

if ( ! function_exists( 'twentysixteen_fonts_url' ) ) :
	function twentysixteen_fonts_url() {
		$fonts_url = '';
		$fonts     = array();
		$subsets   = 'latin,latin-ext';

		/*
		 * translators: If there are characters in your language that are not supported
		 * by Merriweather, translate this to 'off'. Do not translate into your own language.
		 */
		if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'twentysixteen' ) ) {
			$fonts[] = 'Merriweather:400,700,900,400italic,700italic,900italic';
		}

		/*
		 * translators: If there are characters in your language that are not supported
		 * by Montserrat, translate this to 'off'. Do not translate into your own language.
		 */
		if ( 'off' !== _x( 'on', 'Montserrat font: on or off', 'twentysixteen' ) ) {
			$fonts[] = 'Montserrat:400,700';
		}

		/*
		 * translators: If there are characters in your language that are not supported
		 * by Inconsolata, translate this to 'off'. Do not translate into your own language.
		 */
		if ( 'off' !== _x( 'on', 'Inconsolata font: on or off', 'twentysixteen' ) ) {
			$fonts[] = 'Inconsolata:400';
		}

		if ( $fonts ) {
			$fonts_url = add_query_arg(
				array(
					'family'  => urlencode( implode( '|', $fonts ) ),
					'subset'  => urlencode( $subsets ),
					'display' => urlencode( 'fallback' ),
				),
				'https://fonts.googleapis.com/css'
			);
		}

		return $fonts_url;
	}
endif;

Looks like this code worked for me. Now CLS is lower than 0.1 (actually it’s 0) on 2.9. Thank you. I need to add that I have OMGF plugin installed with Font-Display=Block option selected. When I deactivate this plugin (on 2.9), then CLS is around 0.14 (because Font-Display is not set to block by default?).

• This reply was modified 1 year, 7 months ago by r3crac.
• This reply was modified 1 year, 7 months ago by r3crac.

Hey there, I’m glad that helped. Since your plugin looks to be intended to work with Google Fonts, but the latest version of 2.9 no longer uses Google Fonts loaded remotely, you might try testing the following combination, if you haven’t already:

Twenty Sixteen 2.9
OMGF plugin deactivated
code snippet as provided earlier deactivated so fonts load locally

To check whether another plugin might also be impacting things, you could also temporarily deactivate all plugins, including Code Snippets. You can use the Health Check plugin‘s troubleshooting mode for this, which will not change your live site. If the problem goes away, reactivate your plugins one by one (while still in troubleshooting mode) to find the culprit.