Hello! so my site looks as what I’ve wanted it, however the thumbnails are loading slow, is there a code or way to make the site prioritize loading the thumbnails of the products first? or faster? my site is,
Topic summary
A Shopify store owner seeks help with slow-loading product thumbnails on their site (okkidokki.shop).
Main recommendations provided:
- Convert images to WebP format – PNG thumbnails cause rendering delays; WebP is faster and Shopify-compatible
- Optimize image sizes – Keep thumbnails under 300-500 KB and use Shopify’s image_url filter with width parameters (e.g., width: 300)
- Implement strategic loading – Use
loading="eager"for above-the-fold thumbnails, lazy loading for content below - Address Largest Contentful Paint (LCP) – PageSpeed Insights testing revealed render delay as the primary bottleneck
- Consider Instant Page preloading – Insert code before
</body>tag to preload pages before user clicks
Additional issues noted:
- Some product thumbnails missing on collection/product pages
- Oversized header (owner adjusted manually for different platforms)
- Overall theme structure may need professional refinement
Tool recommended: Squoosh.app for WebP conversion
The discussion remains open with the owner acknowledging some existing thumbnail display issues and seeking conversion tools.
Look like you really messed the whole theme.
It’s better to hire someone to fix in your way of alignment at a thermos cost ( s, - your past thread ).
Your Answer-
you are using most of thumbnail in png format which is not good for large rendering ( it’s add latency in painting the image on screen ), Instead
Convert all img/thumbnail in .webp format rest shopify theme will handle the size
Additional Review
- In collections page many thumbnail is missing,
- Product page not showing the thumbnail,
- Header is to big not Good looking
Overall, the site feels more like a work-in-progress than a polished storefront. To ensure a smoother experience for your visitors and better performance, I’d kindly recommend working with an experienced theme developer who can align everything properly and help bring your vision to life efficiently.
Hi @okkidokkishop ,
First of all Your Website looks great and it’s products are way more good , I personally like your website !
Now To prioritize the loading thumbnails of products first and faster Do follow the below Steps ;
Quick Fixes:
Use Smaller Image Sizes
In your product grid code, load thumbnails like this:
{
{ product.featured_image | image_url: width: 300 | image_tag }
}
Prioritize Top Thumbnails
For the first few visible products, add loading=“eager”:
Enable WebP Format
Shopify supports fast-loading WebP:
{
{ product.featured_image | image_url: width: 300, format: ‘webp’ | image_tag }
}
Avoid Large Image Files
Make sure your original uploads are optimized (under 300–500 KB for thumbnails).
Keep Lazy Loading Below the Fold
Let everything else load lazily to keep the initial page fast.
Follow these steps and do let me know if it helps.
Thanks
I have made a test on your store from PageSpeed Insights and intend to see the details of your store situation. From what I know, you can optimise the site loading speed via three ways below. You can have a try and see if one of them is helpful. Thank you!
-
Shorten the loading time of Largest Content Paint. You can understand this part as the largest element on the store which blocks your page from loading faster. To further improve it, you need to know which subparts matter most and from what I see in the test result, the Render delay factor is the main cause code. You can see this article I find for the reference and learn more details about current situation for further improvement.
-
Consider Instant Page method. This is a way for your website to make site pages load instantly in 1 mins and the way to get this result is by inserting one code directly before on your liquid file. It is actually a way to preload a page right before a user clicks on it. For more details, you can visit its official website and have a look.
-
Optimize image size. I notice your website contains lots of images and pictures, even animations. If your website has plentiful images, it is suggested to have a fully check of your image sizes and make sure they are under proper resolutions. If you notice any one of them takes longer time than other images to load completely, you need to pay more attention and use lossless compression, so that your images can display properly and it won’t affect page loading speed too much.
Last year when I take measures to optimize my store content and do On-Page SEO, I used one tool to monitor my store situation and check my optimization effort. I can share with you here and you can use it on the store to see if helpful or not. Thank you!
Collections page is missing many thumbnails? where? The header is big , as i couldnt change the size on the theme, so what I did was I tailored it to various platfroms, such as mobile, it cuts off and transitions to fit, then on desktop it sizes the whole header, The product page is not loading the thumbnails sometimes but like I said making this post I needed help with that 
whats the best place to convert images into a webp?
Hi @okkidokkishop ,
Use Squoosh