Return to previous page

Mpbile Lazy loading above fold fro some widgets

This topic has 4 replies, 2 voices, and was last updated 5 months, 3 weeks ago ago by Jack Richardson

Peter

Participant

October 10, 2024 at 13:36

Hey,

We experience lazy loading above the fold for mobile on some of the x-store widgets (breadcrumb and slider). We use WP rocket and CloudFlare as CDN.

Is there a way to turn on lazy load. I have tried https://wordpress.org/plugins/lazy-load-control-for-elementor/ but only seem to work on images.

Cheers
Peter

Please, contact administrator
for this information.

#418158 Copied Theme version: 9.4.1

3 Answers

Jack Richardson

Support staff

October 10, 2024 at 14:38

Dear @Peter,

I hope this message finds you well.

You may want to try the CSS solution that was previously provided in the following response: https://www.8theme.com/topic/my-website-is-extremely-slow-on-mobile-i-have-checked-all-settings/#post-401212. If this does not resolve the issue, kindly share the correct wp-admin access credentials, and we will review the situation to determine if the CSS snippet can be further optimized for your specific case.

Please also note that the loading effect we implemented is not intended for lazy-loading the widget, but rather to ensure the correct rendering of all styles during page load.

Thank you for your attention, and we look forward to assisting you further.

Best regards,
Jack Richardson
The 8Theme Team

#418174 Copied

Peter

Participant

October 10, 2024 at 21:37

Thanks.

In order to make it work, I needed to add !important to the statments, as per below. Is that ok you believe?

Am I right in understanding that some widget normally are hidden until fully rendered. However, with a caching colution (delated JS execution for example) the triggerto show them is not gererated until page is touched.

—

body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-et-]>.elementor-widget-container,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]>.elementor-widget-container,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-etheme]>.elementor-widget-container,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-product-etheme]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-et-]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-etheme]>.elementor-widget-container,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-woocommerce-product-etheme]>.elementor-widget-container {
opacity: 1 !important;
visibility: visible !important;
}
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:before,
body.elementor-default:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:before,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:before,
body.elementor-page:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:before {
display: none !important;
}

#418207 Copied

Jack Richardson

Support staff

October 11, 2024 at 08:03

Dear @Peter,

Thank you for reaching out.

You are correct in understanding that certain widgets remain hidden until they are fully rendered. We implemented these loaders and widgets invisibility because Elementor typically loads most of the widget styles in the footer of the page. As a result, the design of these widgets may not display properly during the page loading phase.

It’s great to see that you are familiar with the use of the !important postfix, and we’re glad you took the initiative to apply it yourself to resolve the issue.

Has your request been fully addressed, or do you have any further questions? Please don’t hesitate to reach out if you need any additional assistance. We are here to help.

Best regards,
Jack Richardson
The 8Theme Team

#418252 Copied
Viewing 4 results - 1 through 4 (of 4 total)