-
AuthorPosts
-
March 6, 2024 at 3:53 pm #1436510
Hi
I am having issues with performance on site – according to pagespeed insights – especially on mobile view (Largest Contentful Paint element 15,980 ms) and issues with large layout shifts (15 layout shifts found).
Despite loading wp-optimize the site doesnt seem to be minifying, and doesnt seem to be serving cached images, although it has adjusted to webp pages.
I would really appreciate your help with this. Is there a known conflict with this plugin and the theme, or am I missing a key setting that is causing this.
Many thanksMarch 7, 2024 at 12:20 pm #1436604Hi guys – any idea on this one? It seems the performance issues are also due to avia layout shifts and the lottie file – is there any way to reduce the impact of these without changing the design?
Thanks for your helpMarch 9, 2024 at 2:28 pm #1436805Hi,
Thank you for your patience, when I check your site on PageSpeed Insights the 15 layout shifts all seem to be due to curtain-reveal-overlay animation on some of your columns. This animation is specifically designed to be delayed and will cause a layout shift. You could choose to not use the animation in the elements or you could follow our documentation to disabled the animation for a specific page or only on mobile.
For example to remove the animation on your homepage on mobile add this css to your WordPress ▸ Customize ▸ Additional CSS, please note that the WordPress Additional CSS has the highest priority:@media only screen and (max-width: 767px) { .home * { opacity: 100!important; /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } }
I tested this on my demo site and this changed my layout shift from 15 to 1.
You will want to keep in mind that any lazyloading that your wp-optimize plugin is doing will also affect the layout shift, one way around this is to define a min height for the element so when the element is shown it doesn’t cause a layout shift.
When I looked for the lottie issue in the PageSpeed Insights it seems to be the svg has a height & width of 1080px which is larger than the mobile device, but this size is embedded into the file. So I guess you could create a second smaller lottie file for mobile devices, or ingore this warning.Best regards,
MikeMarch 25, 2024 at 6:29 pm #1438292This reply has been marked as private.March 25, 2024 at 11:05 pm #1438309Hi,
Sorry I don’t know what the errors ‘unable to locate resource ‘under nextgen format’ are about, have you tried disabling your plugins like wp optimise?
Or try disabling the theme Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression
Sometimes having a second plugin do the file merging and compression can cause errors, so try either disable the theme cache or the caching plugin.
nextgen sounds like a server error, I’m not seeing this on my demo site, but I use a simple cpanel host.
Perhaps this is due to MIME Type Sniffing, try using this tool to check and this guide to correct. I’m taking a guess.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.