Tagged: fullscreen slider, loading speed, pagespeed, visibility
I use four Fullscreen Sliders on my main home page—one for each of the responsive width visibility options. In other words, one Slider shows for viewers whose screen is under 479px, and the other three Sliders do not show. If the person’s screen is above 990 px, a different Fullscreen Slider shows and the other three are hidden, and so on for the other two responsive width categories.
This is very helpful for customizing the look of the website to the person’s device, but it seems like all FOUR Fullscreen Sliders and their content are being loaded by the browser—even if only one is visible—and this is resulting in my PageSpeed ranking being adversely affected and the site being loaded more slowly than I would like.
My goal is to have a good PageSpeed rank and have my site pages load quickly. Can you help me make it so that only the assets needed for any particular user’s display are loaded without having the other content loaded in the background (since it’s not needed for their specific display width)?
Thank you.
maybe this gives you some hints how it could be obtained: https://kriesi.at/support/topic/the-website-loads-invisible-elements/#post-1490800
