- This topic has 77 replies, 34 voices, and was last updated 1 month, 2 weeks ago by
.
-
Posts
-
It seems to me that the issue is not related to a child theme but rather a component of its core framework, as I mentioned earlier. The framework demo also shows the menu for a few milliseconds, but it disappears. The navigation menu is dynamically displayed by using display: none and display: block properties, so from my perspective, this is not intended to avoid CLS but rather to work as a display: block. Because the CSS elements containing the classes we need to display in the navigation menu are not yet loaded, the display: any property of the navigation menu HTML element is missing by default because the CSS elements containing the classes are not yet loaded.
I am unaware of any workaround for this issue, but there may be a workaround. I think that if we could add the display: none property right to the HTML Nav element without waiting for the button to be touched, then we would be able to resolve the issue. Does this issue have a workaround?
It is for the sake of search engines, but from the point of view of the user too, that this is not only the case here but also from the user's point of view. Seeing an unwanted menu item show up and then disappear all of a sudden seems pretty lazy when this can be accomplished by touching the menu toggle to make it appear.I got rid of this problem on my site (using child Theme: Daily Dish Pro) using this advice:
Application: Insert it to C
ustom CSS inside Appearance >> Customize >> Additional CSS
Currently working
@media only screen and (max-width: 768px){ #genesis-nav-primary { display: none; } }Hey @anita, do you think this method will work on my website as well?
I am using Astra theme, and elementor.
My website has a very good score but when it comes to page experience and WEb core vitals, its not passing on mobile.The CLS score of my site is above the expectation. How can i decrease it. Can you please share your stratigies.
Masalah CLS Menu Seluler dengan Digital Pro dapat diatasi dengan memastikan bahwa item menu memiliki lebar tetap, menggunakan teknik pramuat untuk gambar, dan mengoptimalkan pemuatan font. Selain itu, meminimalkan jumlah skrip pihak ketiga dan mengoptimalkan pengiriman CSS juga dapat membantu mengurangi pergeseran tata letak pada perangkat seluler. Pemantauan dan pengujian rutin juga dapat mengidentifikasi potensi masalah CLS dan membantu mengatasinya dengan segera.Untuk info lebih lanjut kunjungi Situs ini
Hi,
I am having this issue now with my site, and after the March 2023 Google Core update - all of my URLs are now failing with an avg CLS of 0.11.
I'm running on the archived parallax pro theme. Can anyone please suggest a workaround that might help?
The site URL is hashimashi.com.
Many thanks,
RichardHello,
Thank you for bringing this issue to our attention. It appears that the flashing of hidden menu items on mobile devices is causing a CLS issue, which can negatively impact a website's Core Web Vitals, especially those running the Digital Pro theme on less resourceful servers.
One possible solution for this issue is to use CSS to hide the menu items until the "Menu" button is clicked, instead of using JavaScript or jQuery. This way, the layout won't shift when the menu items are shown and then hidden. Another possible solution is to preload the menu items using JavaScript so that they are already loaded before they are displayed, which can also help to reduce the layout shift.
At NCERTPOINT, we understand the importance of having a fast and responsive website, especially in today's digital age. Our team of experts is dedicated to finding the best solutions for our clients' website issues, including optimizing Core Web Vitals. If you need further assistance with this issue or any other website-related problems, feel free to reach out to us for help.
To my understanding, the issue doesn't seem to be related to a child theme but rather a core framework component, as I previously mentioned. Even the framework demo briefly displays the menu before it disappears. The navigation menu is dynamically displayed using the display: none and display: block properties. Hence, in my opinion, this behavior is not intended to avoid Cumulative Layout Shift (CLS) but rather to function as a display: block. Since the CSS elements containing the required classes for displaying the navigation menu are not loaded yet, the navigation menu HTML element's display property is missing by default.
Cumulative Layout Shift (CLS) is a metric used by Google to measure how much a website's content shifts around as it loads, which can be particularly problematic on mobile devices where screen real estate is limited. If you are experiencing CLS issues with the mobile menu on your Digital Pro theme, here are a few steps you can take to try and fix it:
Optimize your images: Large images can cause a delay in page load times and contribute to CLS issues. Make sure all of the images on your site are properly optimized for web and are not too large Vrl Tracking.
Use web fonts: If you are using custom fonts on your site, make sure they are loaded asynchronously so that they don't delay the loading of other content on your site.
Minimize code: Make sure your site's HTML, CSS, and JavaScript code are all optimized and minified to reduce the amount of data that needs to be loaded.
Use a responsive menu: If your mobile menu is causing CLS issues, consider using a responsive menu that collapses or expands as needed, rather than a fixed menu that remains visible at all times.
Test and monitor: Use tools like Google PageSpeed Insights, Lighthouse, or WebPageTest to test your site's performance and identify any areas where CLS is a problem. Keep monitoring your site's performance and adjust as needed to ensure a smooth and seamless user experience.
It is essential for website owners to optimize their site's design and layout to reduce the impact of CLS issues. This can include reducing image and video file sizes, using a content delivery network (CDN), and limiting the number of scripts and plugins used on the site. By being mindful of their site's energy use in the form of K electric, website owners can not only improve the user experience but also contribute to a more sustainable energy future.
Mesotherapy products is typically performed in a series of sessions, with each session lasting about 30 minutes. During the treatment, a very fine needle is used to inject the mesotherapy solution into the targeted area. Patients typically experience minimal discomfort during the treatment, and there is no downtime required after the procedure.
Our friendly and knowledgeable staff are always available to answer any questions and provide expert advice on all aspects of jewelry buying and selling or cash for gold in belmont.
Cumulative Layout Shift (CLS) is a metric used to measure the visual stability of a website. It represents the amount of unexpected layout shifts that occur during the loading of a page. These shifts can be caused by various factors, including slow-loading images, font loading, or the resizing of containers.
In the case of the Mobile Menu CLS issue in Digital Pro, it's possible that the layout shift is caused by the menu items not being fully loaded before being displayed on the screen. This can happen if the menu items are not preloaded or if the font size or layout of the menu items changes during the loading process.
To address this issue, you can try a few solutions:
Preload the menu items: You can use the "prefetch" attribute to preload the menu items before they are displayed. This can reduce the amount of layout shift that occurs during the loading process.
Optimize images and fonts: Make sure that the images and fonts used in the menu are optimized for mobile devices. This can help to reduce the load time and improve the visual stability of the website. you can also check this website
Use a fixed menu: A fixed menu can help to reduce the amount of layout shift that occurs when scrolling on a mobile device. By keeping the menu in a fixed position, you can ensure that it stays in the same place as the user scrolls through the page.
I hope these solutions help you to address the Mobile Menu CLS issue in Digital Pro. Let me know if you have any further questions or concerns!
One solution to this issue is to use a fixed or sticky menu that stays in place as the page loads. Another approach is to optimize the menu's code and styling to reduce the amount of shifting that occurs during the loading process. To address this issue with Digital Pro, users can consult the theme's documentation or contact the theme's support team for guidance on how to optimize the mobile menu and improve the overall user experience.
- You must be logged in to reply to this topic.