JS is blocked on a mobile version

Hello, Kirupa members.

I need your help :slight_smile:

I’ve copied a part of a site which I’m creating to show you the issue.
But, actually, I’ve realised that it works much better than on the main site.
Regardless that it’s the same code and it’s on the same server. But I’ve put less pages to show you the example.

So, the issue is that there are hundreds of images. They are all in WEBP. It does work smoothly on a desktop version, but on a mobile phone, one can’t click on the burger menu while images are loading (I have this feeling, that this is because of the images load).

This is very annoying, a user can’t go to another page, because the burger menu is blocked while the page (images ?) is loading.

I’ve put the code like this:

<script defer src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
<script defer src="../js/main.js"></script>
<script defer src="../js/footer-menu2.js"></script>
<script defer src="../js/burger.js"></script>

I’ve tried “async” too. And I tried to move burger’s script to the header and to the top of this list too. It didn’t help.

You can find all the pages in the dropdown menu under Collections.

Could you please advise me how can I resolve this burger issue.

Thank you very much in advance :slight_smile:

Just for kicks, if you replace all the images with the same one, does the delay still happen? If you remove all the images and replace it with just a blank div element, does the delay happen?

@kirupa Thank you for your answer :slight_smile: Let me check it.

@kirupa Yes, it does work perfectly if I replace all the images with the same image, or if I leave an empty div.
I tried on a page which was the hardest to load, with hundreds of images, and it worked. The burger is not affected by the images load.

Perfect! Ok - then try this trick:

Add a loading=lazy attribute and value to your images! This will only load images that you see in your viewport, and this has a huge benefit on loading performance.

:grinning:

1 Like

@kirupa Honestly, it didn’t help.
And as for me, it was even worse. If you scroll very fast, the images don’t have time to load, and it looks like it’s a blank page.
So, I’ve just got rid of a burger. It’s not very modern, but at least the navigation is easy and smooth.

What else I could do in this case in your opinion?

Sometimes, I just have an impression that some issues are related to shared hostings and nothing could help.

Thank you very much in advance.

Do you have a link to your problematic example page? The sample pages you have contain too few images, so it works very nicely!

Playing with the Chrome DevTools on the page with the hundreds of images may uncover some clues as to what we can do :thinking:

@kirupa Here is the site https://runwaytail.com/

As I said, I got rid of the burger on a mobile, because the burger-links were not clickables while images were loading.
I got rid of loading=lazy attributes too, as it didn’t help and was much worse.

But, still, pages with lots of images are rather slow on mobile, considering that I even had to keep this Middle Ages static menu on mobile.

Do you think this issue is due to a Shared Hosting?

Could you, please, take a look at the site.

Thank you very much in advance.
Helena

If the same site loads quickly on a desktop browser, then it shouldn’t be a hosting issue.

Run your site on this validator: https://pagespeed.web.dev/report?url=https%3A%2F%2Frunwaytail.com%2F

Notice the recommendations it is making. The performance isn’t great, but it isn’t terrible either. The most actionable item for mobile is to serve your content in next-gen image formats. Do you have a CDN attached to your site?

@kirupa Thank you for your answer.

All the images are in WEBP format.

Actually, some pages do perform well. Like this one. Jacquemus Ready-to-wear Fall 2022

Because I’ve recized all the images, and when I turned all the images in WEBP format.

But the problem is that I can’t do it on every single page, because the site from which I take all the original images only offers images in WEBP format.
So that means that to use the same technique I have to convert all the images to JPEG at first. And then recize it, and reconvert again to WEBP.

GULP offers only “convert JPEG to WEBP”. I used also GOOGLE extension to download WEBP, already converted in JPEG. But it was a mess in the final files, so it didn’t help much.

@kirupa Do you know how could I convert all the images at once from WEBP to JPEG.
After this, I could use GULP to recize them all at once and re-convert to WEBP.

No, I don’t have a CDN option with this Hosting.

Thank you very much in advance.
Elena