Hi, I build my new website using Layerslider throughout, but it's running extremely slowly. When I test it with GTmetrix it gets a rating of F, and a lot of the reasons it's giving for the slow speed seem to link to issues with LayerSlider.
I can see some of what's causing the delay seems to be the images I've used in the sliders. So I know I can try to reduce the size of those. But the list of things under 'avoid long main-thread tasks' seem to all be linked to Layerslider itself.
Yes, I see that something is not working properly on your site. We have incorporated many optimizations into LayerSlider, and using several sliders at the same time should not cause such problems. At layerslider.com, we use several sliders at the same time.
I can recommend you to open LayerSlider Settings, and enable the settings seen on the attached screenshots under Performance & Project Settings menu.
Please note, that performance issues can also caused by not optimized plugins, or a slow server (or slow internet connection). I would recommend you to temporary switch to a default WordPress theme and disable all plugins except LayerSlider for testing.
Please let me know if these steps helped solving your issues.
Thanks for your reply. I have introduced those settings but nothing has changed. In fact, since I sent the report, now the sliders aren't showing anyimages that are inserted within them either, and it's still running very slowly.
When I edit the sliders I can still see the images, they're there in my media library - but when loading the website, the sliders are empty apart from the text. See attached screenshots.
I'm completely flummoxed by this. When I open a page of the website without any sliders on, for example: (https://northgate.org.uk/index.php/teaching/) it loads quicker and I can see all of the images. So I'm definitely feeling it's a LayerSlider issue.
Thanks for your help, I look forward to your reply
The images are not showing because - as I can see - you are using an image optimizer / lazy loader plugin (or theme feature). LayerSlider has a built-in solution for that, so, please disable the third party plugin and the images will be visible.
Thanks for your quick reply, George. I've turned off the lazy load and this seems to have solved the image problem, but the sluggish nature of loading the home page with all the sliders on still persists...
I also had another question. On the home page, I've got a slider for both desktop and mobile, with each one set to hide/show on their respective devices. I'm finding that on mobile as I scroll down, the slider that follows doesn't show until the current one is right at the top of the page. It makes it seem like there's no more content, and then... boom... the slider kicks in and you have to scroll back to view it. Video attached. How do I fix this, please? It doesn't run like this on desktop.
Thank you for the login credentials and for your patience.
I've investigated your sliders and found, that the mobile-versions are often too tall. If "Start in viewport" option is enabled, sliders are starting their animations when their half size (vertically) are already visible on the screen (as you scroll down). If the slider is very tall (the aspect ratio is larger than 1:1.75), you will need scroll down more, than a half-screen till the animations will be triggered.
Currently, there are two solutions for this:
1. Please disable "Start in viewport" under Project Settings -> Slideshow
or
2. Please "cut" your tall sliders vertically half. I mean: create two sliders with half of the original's height and embed both to your page.
Thanks for getting back to me, and for your time looking into my issue.
So I looked at disabling 'Start in viewport' but then of course by the time I get to the slider, all the animations have already happened.
Regarding 'cutting' mobile sliders in half, do you mean essentially having half the content on one, and then the other half on another?
How do other sites navigate this issue? I'm only doing this with the mobile versions because the sliders weren't being responsive, and the text was so small. I've been slowly going through and creating mobile versions that are more readable. For example, see this page that I haven't made mobile friendly yet (https://northgate.org.uk/index.php/im-new/)
"do you mean essentially having half the content on one, and then the other half on another" - yes exactly.
I can recommend you to use the following aspect ratio for mobile sliders: 1:1.75 Which means, if - for example - the width of the slider is 400 px, the height should be approx. 700-750px but not higher.
Thanks for your help thus far. Coming back to the original question, it seems that LayerSlider is still majorly responsible for the speed of my website. See attached screenshot. I've reduced the file size of images across the site, including the ones that are embedded into the slide, but it still runs incredibly slowly with a GTMetrix of F. Any ideas?
I'll set to work on the aspect ratio advice as you have kindly already given.
My name is John, and this ticket was assigned to me to investigate the performance issues further.
I believe almost every aspect of this case can be attributed to server speed. When I ping northgate.org.uk, it takes around 200ms to receive 64 bytes of packets. This is quite a slow response since I usually get around 30ms for most UK servers.
By default, GTMatrix uses Canada as the test location, so they likely have an even slower connection. In my test (see the attached screenshot), the Time To First Byte (TTFB) was 1.2 seconds. It means that GTMatrix had to wait 1.2 seconds to receive anything back from your server. This is the earliest measurable event, and nothing on your web page has even started to load at this point. It's very important to note that every other request your web page generates depends on this time and can have a significant effect.
The First Contentful Paint was more than 2 seconds, which is also very high. At this point, LayerSlider did not yet start loading your content, and it's the earliest time a visitor can see anything loaded from your site.
The Onload Time was 4.3 seconds, which normally would be the point when your content properly appears. However, around this time is when LayerSlider and any other script can initialize themselves and start to load their own content.
LayerSlider preloads the necessary images used in your projects that must be displayed as soon as possible. This usually means it preloads the images of any project's first slide. Sadly, slow connection times can prolong this, and that's why GTMatrix displays multiple LayerSlider entries for the long main-thread tasks and other categories. So it doesn't mean that LayerSlider itself is slow; it just means that LayerSlider initiates the loading of images, and LayerSlider itself also waits for your server.
To give meaning to these numbers, our home page (with more images, large videos, lots of sliders, etc.) has 31ms for TTFB, 148ms First Contentful Paint, 1.3s Onload Time, and 1.6s for Time to Interactive.
I also want to note that JavaScript-based interactive content such as LayerSlider has to wait until your page more or less loads. Hence, it's unavoidable to have some slowdowns that synthetic benchmarks usually don't like.
Hi, I build my new website using Layerslider throughout, but it's running extremely slowly. When I test it with GTmetrix it gets a rating of F, and a lot of the reasons it's giving for the slow speed seem to link to issues with LayerSlider.
I can see some of what's causing the delay seems to be the images I've used in the sliders. So I know I can try to reduce the size of those. But the list of things under 'avoid long main-thread tasks' seem to all be linked to Layerslider itself.
Can you help, please? What have I done wrong?
Kind regards
Andy
Attached files: Image 08-06-2023 at 15.13.jpg
Image 08-06-2023 at 15.14.jpg
Hi Andy,
Yes, I see that something is not working properly on your site. We have incorporated many optimizations into LayerSlider, and using several sliders at the same time should not cause such problems. At layerslider.com, we use several sliders at the same time.
I can recommend you to open LayerSlider Settings, and enable the settings seen on the attached screenshots under Performance & Project Settings menu.
Please note, that performance issues can also caused by not optimized plugins, or a slow server (or slow internet connection). I would recommend you to temporary switch to a default WordPress theme and disable all plugins except LayerSlider for testing.
Please let me know if these steps helped solving your issues.
Attached files: layerslider-settings-performance.png
layerslider-settings-project-defaults.png
Best Regards,
George | Kreatura Dev Team
Hi George,
Thanks for your reply. I have introduced those settings but nothing has changed. In fact, since I sent the report, now the sliders aren't showing any images that are inserted within them either, and it's still running very slowly.
When I edit the sliders I can still see the images, they're there in my media library - but when loading the website, the sliders are empty apart from the text. See attached screenshots.
I'm completely flummoxed by this. When I open a page of the website without any sliders on, for example: (https://northgate.org.uk/index.php/teaching/) it loads quicker and I can see all of the images. So I'm definitely feeling it's a LayerSlider issue.
Thanks for your help, I look forward to your reply
Kind regards
Andy
Attached files: Screenshot 2023-06-13 at 10.41.04.png
Screenshot 2023-06-13 at 10.41.15.png
Hello Andy,
The images are not showing because - as I can see - you are using an image optimizer / lazy loader plugin (or theme feature). LayerSlider has a built-in solution for that, so, please disable the third party plugin and the images will be visible.
Best Regards,
George | Kreatura Dev Team
Thanks for your quick reply, George. I've turned off the lazy load and this seems to have solved the image problem, but the sluggish nature of loading the home page with all the sliders on still persists...
I also had another question. On the home page, I've got a slider for both desktop and mobile, with each one set to hide/show on their respective devices. I'm finding that on mobile as I scroll down, the slider that follows doesn't show until the current one is right at the top of the page. It makes it seem like there's no more content, and then... boom... the slider kicks in and you have to scroll back to view it. Video attached. How do I fix this, please? It doesn't run like this on desktop.
Kind regards
Andy
Attached files: RPReplay_Final1686652914-2.mp4
Hello Andy,
Please create me a temporary wp-admin access, I would like to check the settings of the sliders. They should appear much earlier.
Best Regards,
George | Kreatura Dev Team
Thanks George. I'd appreciate that.
How do I do that without giving the login out publicly?
Many thanks
Andy
Hello Andy,
Thank you for the login credentials and for your patience.
I've investigated your sliders and found, that the mobile-versions are often too tall. If "Start in viewport" option is enabled, sliders are starting their animations when their half size (vertically) are already visible on the screen (as you scroll down). If the slider is very tall (the aspect ratio is larger than 1:1.75), you will need scroll down more, than a half-screen till the animations will be triggered.
Currently, there are two solutions for this:
1. Please disable "Start in viewport" under Project Settings -> Slideshow
or
2. Please "cut" your tall sliders vertically half. I mean: create two sliders with half of the original's height and embed both to your page.
Best Regards,
George | Kreatura Dev Team
Hi George,
Thanks for getting back to me, and for your time looking into my issue.
So I looked at disabling 'Start in viewport' but then of course by the time I get to the slider, all the animations have already happened.
Regarding 'cutting' mobile sliders in half, do you mean essentially having half the content on one, and then the other half on another?
How do other sites navigate this issue? I'm only doing this with the mobile versions because the sliders weren't being responsive, and the text was so small. I've been slowly going through and creating mobile versions that are more readable. For example, see this page that I haven't made mobile friendly yet (https://northgate.org.uk/index.php/im-new/)
Thanks again
Andy
Hello Andy,
"do you mean essentially having half the content on one, and then the other half on another" - yes exactly.
I can recommend you to use the following aspect ratio for mobile sliders: 1:1.75
Which means, if - for example - the width of the slider is 400 px, the height should be approx. 700-750px but not higher.
Best Regards,
George | Kreatura Dev Team
Hi George,
Thanks for your help thus far. Coming back to the original question, it seems that LayerSlider is still majorly responsible for the speed of my website. See attached screenshot. I've reduced the file size of images across the site, including the ones that are embedded into the slide, but it still runs incredibly slowly with a GTMetrix of F. Any ideas?
I'll set to work on the aspect ratio advice as you have kindly already given.
Any advice gratefully received.
Thanks
Andy
Attached files: Image 21-06-2023 at 13.50.jpg
Hi Andy,
My name is John, and this ticket was assigned to me to investigate the performance issues further.
I believe almost every aspect of this case can be attributed to server speed. When I ping northgate.org.uk, it takes around 200ms to receive 64 bytes of packets. This is quite a slow response since I usually get around 30ms for most UK servers.
By default, GTMatrix uses Canada as the test location, so they likely have an even slower connection. In my test (see the attached screenshot), the Time To First Byte (TTFB) was 1.2 seconds. It means that GTMatrix had to wait 1.2 seconds to receive anything back from your server. This is the earliest measurable event, and nothing on your web page has even started to load at this point. It's very important to note that every other request your web page generates depends on this time and can have a significant effect.
The First Contentful Paint was more than 2 seconds, which is also very high. At this point, LayerSlider did not yet start loading your content, and it's the earliest time a visitor can see anything loaded from your site.
The Onload Time was 4.3 seconds, which normally would be the point when your content properly appears. However, around this time is when LayerSlider and any other script can initialize themselves and start to load their own content.
LayerSlider preloads the necessary images used in your projects that must be displayed as soon as possible. This usually means it preloads the images of any project's first slide. Sadly, slow connection times can prolong this, and that's why GTMatrix displays multiple LayerSlider entries for the long main-thread tasks and other categories. So it doesn't mean that LayerSlider itself is slow; it just means that LayerSlider initiates the loading of images, and LayerSlider itself also waits for your server.
To give meaning to these numbers, our home page (with more images, large videos, lots of sliders, etc.) has 31ms for TTFB, 148ms First Contentful Paint, 1.3s Onload Time, and 1.6s for Time to Interactive.
I also want to note that JavaScript-based interactive content such as LayerSlider has to wait until your page more or less loads. Hence, it's unavoidable to have some slowdowns that synthetic benchmarks usually don't like.
Attached files: gtmatrix-results.png
Best Regards,
John | Kreatura Dev Team