Anyway to make my site or the thumbnails load faster?

[okkidokkishop]

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, 

www.okkidokki.shop

[Nilankar]

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.

[okkidokkishop]

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 😕 

[okkidokkishop]

whats the best place to convert images into a webp?

[StevenT_A7]

Hi @okkidokkishop , 

Use Squoosh

[StevenT_A7]

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":

<img src="..." 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 

[Wendell4]

Hi @okkidokkishop

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!

1. 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.

2. 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 </body> 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.

3. 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!