I have two filtering tags on my homepage that contain images. Is there a way to prevent the non-default ‘Art’ images from loading on page load? And only call them when the tag is clicked.
My goal is to shave time off the initial page load. This is how the page is set up:
Here is my public share link: LINK
(how to access public share link)
Hii,
You are right to focus on improving your load time and yes loading all the Art and Design images together is likely the reason your LCP is so high. You can fix it by doing few things like:
Instead of having all Design and Art images in one list create two separate CMS Collection Lists one for each tag.
Keep the “Design” list visible by default.
Set the ‘Art’ list to display:none initially.
Then, use your Finsweet Filter button to toggle visibility so that the ‘Art’ list only loads when clicked.
This way the browser won’t even try to load the Art images at first.
In your Finsweet filter or button setup just make the click interaction show the ‘Art’ list and hide the ‘Design’ one.
When the ‘Art’ tag is clicked, the hidden section becomes visible and only then do the Art images load.
Even after fixing the filter part make sure your images are light.
Convert them to WebP format.
Turn on lazy loading for all your images (you can do this under the image settings).
This will improve your site’s load time especially that 29s LCP you’re seeing on mobile.
If you want to make this whole optimization process easier you can also look into Website Speedy App. It automatically compresses images, optimizes code, and improves your site’s speed without you having to tweak anything manually.