We have expanded our homepage with a layer slider that includes a video. Unfortunately, the Google performance report, especially for the mobile site, is unacceptably poor.
A proposed solution is to completely hide the layer slider for screens of a certain width (mobile devices) and in this case to display something static.
However, the issue is that the contents (especially the video) are still loaded even if "Hide on mobile" is activated or if it is set to hide under 768 pixels wide.
Is there a way to prevent the layer slider from loading on mobile devices?
Thank you for getting in touch with us. My name is George, and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
We are using many optimizations, for example, setting preload to metadata for html5 videos. This means that if the video is hidden (so it should not play), the browser should not start to download the whole video, but the metadata only (thumbnail and other information of the video such as length, resolution, etc.)
Our experience is that sometimes, a small chunk will be downloaded from the video. We will try to find a solution for that, but we have to make sure if the layer with the video is visible (for example, rotating the device from portrait to landscape mode), it should start immediately. So, completely removing the video element is not a good solution.
About Google Performance: we know that by using LayerSlider you may get a lower score, but it is important to know that these pages not really accurate when there is dynamic content (controlled by JavaScript) is on your site.
For example, if you check Apple's site (especially where they are using animations), you will get a very low score in these services, even though Apple takes their website loading performance very seriously.
All in all, we are working on a better solution to optimize the loading of videos in this way, but we recommend that you don't just rely on tests, but try to load the page on real mobile devices and you won't experience a significant drop in speed.
We have expanded our homepage with a layer slider that includes a video. Unfortunately, the Google performance report, especially for the mobile site, is unacceptably poor.
A proposed solution is to completely hide the layer slider for screens of a certain width (mobile devices) and in this case to display something static.
However, the issue is that the contents (especially the video) are still loaded even if "Hide on mobile" is activated or if it is set to hide under 768 pixels wide.
Is there a way to prevent the layer slider from loading on mobile devices?
Hello Martin,
Thank you for getting in touch with us. My name is George, and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
We are using many optimizations, for example, setting preload to metadata for html5 videos. This means that if the video is hidden (so it should not play), the browser should not start to download the whole video, but the metadata only (thumbnail and other information of the video such as length, resolution, etc.)
Our experience is that sometimes, a small chunk will be downloaded from the video. We will try to find a solution for that, but we have to make sure if the layer with the video is visible (for example, rotating the device from portrait to landscape mode), it should start immediately. So, completely removing the video element is not a good solution.
About Google Performance: we know that by using LayerSlider you may get a lower score, but it is important to know that these pages not really accurate when there is dynamic content (controlled by JavaScript) is on your site.
For example, if you check Apple's site (especially where they are using animations), you will get a very low score in these services, even though Apple takes their website loading performance very seriously.
All in all, we are working on a better solution to optimize the loading of videos in this way, but we recommend that you don't just rely on tests, but try to load the page on real mobile devices and you won't experience a significant drop in speed.
Best Regards,
George | Kreatura Dev Team