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.
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 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.
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.
@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.
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?
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?
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.
Ya might have moved on but this interested me so here ya go…
Just so you know the burger can be unresponsive while page loads on desktop as well…well it was for me.
To fix this just move modal to just below the header tag, put the script tags below that and remove the defer off the two scripts used for the burger. Itll end up looking like this…
</header>
<div class="modal-about" id="modal-about">
<div class="modal-about__wrapper">
<button class="modal-about__close" id="modal-close"><img src="img/elements/close-white.svg" alt=""></button>
<p> Submissions</p>
<p>Editorials, Street Style Photoshoots and Beauty Articles are the things we seek for.
Contact us if you want to showcase your work or those of a brand at <a href="mailto:[email protected]">[email protected]</a></p>
<p>Remember that each submission must be UNIQUE for RUNWAY TAIL.
By UNIQUE we mean Photographs that have NEVER BEEN PUBLISHED in any medium or social network.</p>
<img class="modal-about__img" src="img/modals/img-modal.jpg" alt="">
</div>
</div>
<script defer src="js/moving-line.js"></script>
<script defer src="js/gallery-home.js"></script>
<script src="js/burger.js"></script>
<script src="js/modal-about.js"></script>
<main>
Whats happening…We move the modal up higher so it gets loaded before trying to load all the big images. The scripts for the burger and modal will then load straight away after and its ready to work. The other two scripts wont load and execute until the whole dom is parsed and before assests are loaded, just as if they where still at the bottom of the body tag (thanks to the defer). Its ok to load the two scripts right now because the only dom elements they interact with have already been loaded, thats why we moved the modal to above them.
The other thing you really need to do is resize those big images. You have style set to size them at 322X582 so theres no real need for those big images. Currently they take up 5.? meg and once resized as webp they take up 386kb. On windows I used XnConvert (can batch resize and convert among other things).
Same goes for your galleries. You need to resize all the img tags images to what you want on the page and think of them as the thumbnails and then point the hrefs in the a tags too the full sized images.
And yeah, your shared hosting is prolly slowing ya down coz the example I made for you loads a heck of a lot better (even before the changes).
Example (will be deleted at some point, fork)… Runway - Replit
Creating engaging and entertaining content for designers and developers since 1998.
