Stop Browsers Downloading Images on Mobile

Hi,

I’m trying to improve my Google Speed Test score on mobile. At the bottom of the website is an Owl Carousel with over 50 company logos. I have turned off this section which holds the carousel on mobile, however, the images still download. As there are many images in the carousel this is causing the slow loading times on mobile. The logos are being pulled in from the CMS, I’ve set those to be lazy load but they’re still being downloaded when you first visit the site.

Link to the site below:

https://preview.webflow.com/preview/jersey-funds-association?utm_medium=preview_link&utm_source=designer&utm_content=jersey-funds-association&preview=8e8167ba4c8e4be7845a80039d6bbd6a&mode=preview

Has anyone any ideas of how I can stop the mobile version of the site loading all the logos on page load?

Many thanks

Matt

This is only possible using custom code. You would have to determine the viewport dimensions and then load the html into the page when the viewport was larger than X. You could use Ajax to load the content from another page so you could still rely on a dynamic element from it.

You really have to ask yourself if an array of logo’s wouldn’t be better represented with a few images if at all.

Hi Jeff,

Thanks for coming back to me. I’m used to googling around and have found a couple of Webflow references to using Ajax with Webflow: Anyway to load content via ajax within webflow?

Min-width of 767px

@media screen and (min-width: 767px) {
/* Your responsive CSS */
}

Sounds like I need to move the carousel to another page, give the section an ID and then pull in?

Something like this code:

<script>

function loadcontent(cid) {

$('#viewport').load('content #' + cid);

}

</script>

Thanks

Matt

Hi, I forgot to address your point: The carousel of logos is something our client has come to expect and feels offers companies a little more exposure. Owl Carousel does have lazy load but I can’t seem to get to work: Lazy Load Demo | Owl Carousel | 2.3.4

I initially thought the Owl Carousel lazy load would solve the mobile issue.

My reference to Ajax was not based on content, not a third party carousel. So that might require some work.

OWL is dead. You should be looking for a replacement. Something like tiny-slider should do. It does support lazy loading.

Thanks for the Tiny Slider reference Jeff. I did not know Owl was no more. I’ll have to duplicate the page in question and see if I can get the tiny slider working.

Many thanks