I am using mmenu as responsive menu on my website. I noticed recently that in Googles search console I have errors due to high CLS (Cumulative Layout Shift). I checked and it's true, when I try to open my page in "slow" mode for a half sec I see the original menu structure, then mmenu loads (after jQuery is ready etc) and the page is showing correctly.
My simplified page structure is:
$(document).ready(function() {
$("#menu").mmenu({
"extensions": ["pageshadow"],
"header": {
"title": "Menu",
"add": true,
"update": true
}
}, {
// config
offCanvas: {
pageSelector: "#container"
}
});
}); <html>
<head>
</head>
<body>
<nav id="menu">
<ul>
<li><a>Categories</a>
<ul>
<li>
<a href="https://example.com/1">Link 1</a>
</li>
<li>
<a href="https://example.com/2">Link 2</a>
</li>
<li>
<a href="https://example.com/3">Link 3</a>
</li>
</ul>
</nav>
<div class="content">This is content</div>
</body>
</html>What do you think, it is possible to apply any quick fix here which will fix my CLS issue?
from Responsive menu (mmenu) cause high CLS
No comments:
Post a Comment