This topic contains 33 replies, has 8 voices, and was last updated by Anita 1 week, 2 days ago.
-
Posts
-
I put a lot of hours into this issue. I tried the plugin mentioned above as well as PHP solutions. Nothing consistently changed the Google CLS score.
Fortunately, I think I finally found the solution. When I saw how simple it was, I almost kicked myself.I'm using the Outreach Pro theme, but I suspect this will work for other Genesis themes as well. I'll provide the solution, followed by an explanation:
@media only screen and (max-width: X) {
.genesis-nav-menu {
display:none
}
}
Note for "X" add the screen size in pixels at which your theme adds the responsive menu icon (i.e., "hamburger" menu).Since I didn't know much Javascript, I never bothered to try the above solution previously. But after I learned about how the Javascript / JQuery "toggle" function works (which is used in your Genesis child theme), I learned that it essentially reverses whatever your CSS display setting is on an element (i.e., If the CSS is set to display:none, it will display it. Then, if clicked again, it will hide it.). Knowing this, it makes perfect sense why we would want the menu hidden until the hamburger icon is clicked.
Next question: Why doesn't Studiopress just code it this way to begin with? I suspect it's because they want the navigation menu to be displayed for users who don't have Javascript enabled. But research suggests that only 1-2% of web users don't have Javascript enabled. So unless you're okay with compromising your site's UI/UX for a handful of individuals who, for whatever reason, have chosen to disable javascript in their browser, this seems like an obvious solution to the problem.
BTW, I was shocked at how much cleaner my page loads look have looked since implementing this solution. Truly a night and day difference. You'll never see an unwanted menu item again:)
But the thing that people are missing here, and I am not defending StudioPress, but actually all theme designers - Google pulled this out of their hat. Plain and simple. No one ever would have expected Google to come up with this stuff. You are working on an old theme. Outreach was created years ago (2013) and it won't ever be updated again. It was created for that particular time period and worked as it should.
The menu is not the only thing associated with the Cumulative Layout Shift. It's anything that moves when the page loads. A lot of people don't realize that a lot of things shift.
Everyone's sites are different so resolution to CLS is going to be different for each one even if the menu is fixed.
Hey Anita,
I wasn't trying to throw shade at Studiopress, whose products I've been happily using for years. I do think that if there's an elegant fix available, Studiopress should consider helping its legacy theme users with a solution, perhaps via Genesis core updates if feasible.
I agree with you that CLS is a relatively new and multifaceted issue. In my case, however, the menu item flashing problem was accounting for roughly 2/3rds of my CLS score. Once I implemented the above fix (and also added height values to the .nav-primary class at different screen sizes to prevent layout shifting while the icon loads) the score (and user experience) improved dramatically.
Thanks for your work moderating this forum!
@a-j-drenth Thank you, I appreciate that. So, StudioPress just released an update to Genesis Sample. Here is the Changelog.
Three key things there that were updated:
* Implement preconnect for Google Fonts.
* Improve Content Layout Shift (CLS) occurring when using a custom logo.
* Improve Content Layout Shift (CLS) caused by the mobile menu.I think... and I don't want to speak on their behalf, but I think their focus right now is on Full Site Editing and Genesis Blocks, Genesis Blocks Pro and Genesis Pro (the theme). They are still working on updating the Framework as well, plus updating some of the more recent child themes.
They sell a lot of themes and again, your theme was created almost 8 years ago. So the likelihood of them going back that far and updating it is pretty slim.
And... Google can't expect theme developers to just stop everything they are doing to accommodate what they are asking. It's just not reasonable. I'm struggling with that myself with customers.
Thank you for the discussion and proposed solutions. Unfortunately they don't seem to work on my site using the Magazine Pro theme.
@jtwillia2 what's the URL of your website?
https://www.theoptimizingblog.com/
I've removed the code after trying it unsuccessfully though.
@jtwillia2 take a look at the Genesis Sample Changelog. See what was updated there. You may be able to implement some changes from the Sample.
@anita I was checking that out but honestly, trying to translate that into what specifically I'd need to add to my theme is a bit outside my skill set. May see if my developer friend can use that resource and help me out.
The small piece of code from @a.j.drenth above is the closest I've gotten. It seems to work between 840px (where it goes to hamburger) and 600px, but below 600px the menu won't expand: https://wordpress-572906-1855295.cloudwaysapps.com/
I changed my theme to use the Genesis Sample theme. CLS test is now a pass and my theme is more legible and cleaner looking.
My homepage mobile score is 92, and on desktop, it's 100. Thank you Studiopress!
My wedding photography website
Pagespeed Insights test results
Award-winning wedding photographer in Scotland
@jtwilia2
Try changing it to: .genesis-nav-menu ul {display:none}
It seemed to work when I tried it in page inspector.
@a.j.drenth So the whole piece would be:
@media only screen and (max-width: 840px) { .genesis-nav-menu ul {display:none} }?
This didn't do anything. But I also don't have
.genesis-nav-menu ulreferenced anywhere else in the CSS.This reply has been marked as private.You can drop the CSS into the Additional CSS box under Appearance > Customize. Clear any caching, and then run the test.
You must be logged in to reply to this topic.