Large Layout Shift issues... Sydney Pro Header Slider flickers when you visit my website

Since the latest theme update, I’ve been getting poor GTmetrix, and Google Pagespeed grades. Sydney Pro Header Slider loads slow and flickers for a second when you visit my website. When I disable or remove the photos, I get a grade B (decent score) My photos are small in size (129 kb to 349 kb). I’ve always used 1920x1200 for the header slider images. Could the pixel size be wrong or something?

I also have issues with these areas on the home page. Please see the snapshot. I’ve changed text, font size, and changed margin, and padding several times. Same problem… My website is https://www.bossplayaproductions.com/

Please help! Thanks!

Hi,

First of all, ​please accept my apologies for the delay in response. I was stuck in draft. I really appreciate your patience.

Which tool do you use to check your website’s performance? Do you have a link to share here? So I can try to provide some related information easier to help you with this.

Regards,
Kharis
aThemes Support

Thanks for replying! I’ve been using GTmetrix, mostly. Also, Google’s PageSpeed Insights, and Pingdom.

Right now, I have disabled or deleted all of my plugins except Elementor, Premium Addons for Elementor, SG Optimizer, WP Rocket, and Squirrly SEO 2021. I’m getting a B grade now but I’m getting the same “Avoid large layout Shifts” error, even when I delete and re-create the elements.

Also, I can’t install my Facebook or Google Analytics pixels (manually or by using a plug-in) without getting an E or F in GTmetrix. I need those to work in Sydney Pro also.

Hello, I am having this same issue exactly. Is there any suggestions to make this work?

I am assuming that if there is a way to add the width and height attributes to the header images or css class, it may be able to resolve the issue.

Unfortunately, I have not been able how to figure this out yet.

4 months later, and I have yet to get a response or solution from tech support about this. I’m really considering investing in a stable, heavy coded theme. I’ve housed this theme for about 5 years now and I believe I’ve gotten all I can get out of it. The customer support team is also not as good as it used to be. I’m really disappointed… :neutral_face: :-1:

Hello,

First sorry the delay here!

I did a test with your website in the Google Page Speed and notice that CLS and *Reduce Unused JS Code seems to be the most important factors for your bad result.

To improve the Cumulative Layout Shift in the results, please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media only screen and (min-width: 768px) {
	.header-slider {
		height: 100vh !important;
	}
}
@media only screen and (max-width: 767px) {
	.header-slider {
		height: 100vw !important;
	}
}

Regarding the Unused JS code, as you can see in the below image, the main culprit is the facebook that is being added from a thirdy party script. Please note that the theme code is not related with thirdy party scripts, so this is not a theme fault.

My suggestion for you is contact the Facebook plugin author about that.

Another import things I saw:

  • The cache plugin you have is not generating static HTML version your pages, so the cache of Cloudflare is not being applied to the pages HTML. My suggestion for you is enable the cache for all pages. Probably WP Rocket has an option for this. This way you will gain some important mili-seconds in the first load of the page and consequently increase the performance results.

  • Also you can try to reduce the quality/size (kb’s) of the images above the folld.

We hope this helps!

Sorry again for the delay here!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Thanks for getting back to me. I relocated back to North Carolina by the time you replied though. Before I moved, I applied the CSS code. Just looked back at it today on Google Page Builder. I’m getting the same CLS errors on mobile and sometimes on desktop view. This is with the code you gave me.

I uninstalled heavily coded plugins except for Elementor and Premium Plugins for Elementor. I also cropped my slider images to 1620x1080 and compressed the size of them.

I don’t want to have to purchase another slider program or download additional plugins. When are you guys going to do an update to make the media slider better?

Hello @djcreativity,

I will speak with our development team about that.

For now, please try with this new CSS code:

https://pastebin.com/raw/h9vSP0dd

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi, thanks for sending this new CSS code. The code worked well for desktop (Score: 90) but not mobile (Score: 22) on PageSpeed Insights.


Hello,

Regarding the CLS, please try removing the animation from the slider texts:

.text-slider {
    animation: none !important;
    -webkit-animation: none !important;
}

I did some tests here and seems that the animation is increasing a lot the CLS too:

Please try that and let me know how it goes.

Kind Regards,

Rodrigo.

aThemes Support

I just went ahead and turned the header slider off. Both the slider and text animation was important to me. I created a slider with Elementor for now. After this weekend, I will switch to a lighter coded theme and won’t use a slider. Thanks for your help!

Hello,

I talked with our development team and CLS (Layout Shift) improvements to the default sydney slider will be coming in a future release of the theme.

The theme also is ready for the Crelly Slider and Smartslider plugins, both are alternatives your can try.

Crelly Slider:

To enable you should get the generated slider shortcode and paste in the field at Appearance > Customize > Hero Area > Crelly Slider. Also enable the header type to Crelly Slider at Appearance > Customize > Hero Area > Hero Type.

Smart Slider:

To enable you should get the generated slider shortcode and paste in the field at *Appearance > Customize > Hero Area > Shortcode. Also enable the header type to Shortcode at Appearance > Customize > Hero Area > Hero Type.

Regarding the mobile low rating in the Google Page Speed, there’s a lot of things you need to do to increase the rating. That’s not only related to the CLS. I see you have a lot of third party scripts like facebook and google maps:

Probably these third party scripts are the main culprit of the low rating, you can try deactivating them (for testing purpose) and see the new results. Would be great if you let us know how it goes.

We hope this helps and clarifies!

Kind Regards,

Rodrigo.

aThemes Support