Following on from my earlier thread on page load times https://community.sellerdeck.com/for...age-load-times there are a couple of quick fixes I've identified that should fix the main remaining Cumulative Layout Shifts that Google sees. You'll find them in the Core Web Vitals of your Google search console, particularly on mobile, and more details will be on the PageSpeed insights report if you follow the links from there.
As I understand it, CLS shifts are not currently penalised by Google but will be from sometime in 2021 so this isn't an academic discussion.
PS. 'Inspect' on Chrome now has a great 'performance' tab which will also detect and highlight CLS issues and what is moving and by how much. It's been very useful in identifying the problem areas.
The main culprits are:
1. Make sure you have a size defined in the HTML for all your images
2. The 'topcontact' buttons on mobile display the information first before being given a 'display:none' styling and then disappearing. Adding display:none as inline CSS stops this. Details are in the original thread linked to above.
The two remaining CLS issues I've managed to fix are:
3. The scroll bar.
At first paint the browser renders the page using all the information it has, then realises it needs to add a scroll bar on the right, so redoes all it's calculations and draws the page again. In Chrome on a 1920 x 1080 display this reduces the window size by 16px so anything that is right aligned in the full screen such as the mini cart box is shifted 16px leftwards. Anything centered, such as the main content div which is a large area also gets shifted by less than 16px.
The Solution to this is quite simple. Add this to your CSS file
html {
overflow-y:scroll}
Which tells the browser to render the scroll bar at first paint.
Kudos to Tim Vereecke for the solution to this. https://twitter.com/timvereecke/stat...533248?lang=en
4. The Nav bar on mobile.
The standard responsive layout for mobile devices uses mega-menu to create a drop down section list. The problem is that this is initially drawn in place and then hidden afterwards leading to a large CLS shift in the main content,
The solution has taken me a while to figure out but is really very simple. All you have to do is add the 'menuHide' css class to the Mega Menu Layout. i.e. the top of the Mega Menu Layout will now say
Sellerdeck uses the css classes of menuHide and menuShow to set the dropdown to hide / show respectively. This just presets the drop down to not show as otherwise the HTML will default to be displayed as normal.
On mobile devices this sets the drop down css to display:none right from the very beginning thereby avoiding the CLS problem. It's also safe to do as menuHide is only defined in the CSS for mobile (i.e. small screen) devices.
Having made these changes my CLS figures are now down to a level where I think Google will be happy with them.
Mike
As I understand it, CLS shifts are not currently penalised by Google but will be from sometime in 2021 so this isn't an academic discussion.
PS. 'Inspect' on Chrome now has a great 'performance' tab which will also detect and highlight CLS issues and what is moving and by how much. It's been very useful in identifying the problem areas.
The main culprits are:
1. Make sure you have a size defined in the HTML for all your images
2. The 'topcontact' buttons on mobile display the information first before being given a 'display:none' styling and then disappearing. Adding display:none as inline CSS stops this. Details are in the original thread linked to above.
The two remaining CLS issues I've managed to fix are:
3. The scroll bar.
At first paint the browser renders the page using all the information it has, then realises it needs to add a scroll bar on the right, so redoes all it's calculations and draws the page again. In Chrome on a 1920 x 1080 display this reduces the window size by 16px so anything that is right aligned in the full screen such as the mini cart box is shifted 16px leftwards. Anything centered, such as the main content div which is a large area also gets shifted by less than 16px.
The Solution to this is quite simple. Add this to your CSS file
html {
overflow-y:scroll}
Which tells the browser to render the scroll bar at first paint.
Kudos to Tim Vereecke for the solution to this. https://twitter.com/timvereecke/stat...533248?lang=en
4. The Nav bar on mobile.
The standard responsive layout for mobile devices uses mega-menu to create a drop down section list. The problem is that this is initially drawn in place and then hidden afterwards leading to a large CLS shift in the main content,
The solution has taken me a while to figure out but is really very simple. All you have to do is add the 'menuHide' css class to the Mega Menu Layout. i.e. the top of the Mega Menu Layout will now say
Code:
<div id="mega-menu" class="menuFlex menuHide">
On mobile devices this sets the drop down css to display:none right from the very beginning thereby avoiding the CLS problem. It's also safe to do as menuHide is only defined in the CSS for mobile (i.e. small screen) devices.
Having made these changes my CLS figures are now down to a level where I think Google will be happy with them.
Mike
Comment