Improve page speed for my website - Poetic theme

Store Design
, , ,
1

I’m using poetic theme in the I want to reduce the page loading speed. These are the issues which I gave at bottom, how we can improve.

i diagnosed most of the problem for you so you can get this done quick
I ran a full performance audit on shopthaya.com. the server is healthy (TTFB 83ms) and there’s no renderblocking JavaScript. The slow loading is 100% download weight, not backend.
The core issue
The homepage is 12.4 MB across 373 requests. Images alone are 9.9 MB — about 80% of the whole page. That’s roughly 3–4x heavier than it should be, and it’s terrible on mobile where most of our paid traffic lands.

Where the problems are (in priority order):

1. Homepage loads the entire catalogue
There are 1,221 <img> elements in the DOM (95 load immediately). The page is rendering all 76 products + every carousel + “shop the look” block at once.
:right_arrow: Fix in the theme sections: cap product grids to ~8–12 items with a “Shop all” link, and remove/defer the duplicate carousels.

2. No next-gen image formats
100% of images are JPG/PNG — zero WebP/AVIF.
:right_arrow: Fix in the theme image snippets: serve images via Shopify’s image_url filter with WebP output. This alone cuts ~3 MB with no quality loss.

3. Images served oversized
64 images are delivered at more than 1.5x their display size. Heaviest files are 400–600 KB each (IMG_6412 = 589 KB, IMG_0679 = 479 KB, several product shots ~450 KB).
:right_arrow: Fix with proper srcset + width caps (≈800–1000px for product cards, not 1500–2000px).

4. Duplicate image loading
10 URLs are fetched twice in one page load. Worst case: IMG_6412.jpg (589 KB) is preloaded as a link AND re-fetched as an img = ~1.2 MB wasted on one image.
:right_arrow: Remove the redundant preload tag for that asset.

What’s already fine (don’t touch):

  • Server / TTFB (83ms)
  • No render-blocking scripts in the head
  • Lazy-loading is mostly wired up correctly

Target after fixes:
Homepage under 2.5–3 MB, request count down toward ~120–150, and LCP under 2.5s. That should roughly halve perceived load time on mobile.

website link: shopthaya.com

2

Hi @siva_fds I went through a similar situation with a Poetic theme store and managed to get load time down significantly. Here’s what actually worked:

1. Reduce products shown on homepage
Limit your product grids to 8–12 items max and add a “Shop All” link instead of loading the full catalogue. You can do this in the theme editor under each section’s settings — look for “Products to show” slider.

2. Enable WebP images via Shopify’s image filter
In your theme code, make sure images use Shopify’s image_url filter with format: 'webp'. Example:

{{ image | image_url: width: 800, format: 'webp' }}

This alone can cut 2–3 MB with zero visible quality loss.

3. Fix oversized images
For product cards, cap image width to 800–1000px using srcset. Avoid serving 1500–2000px images in small grid tiles.

4. Remove duplicate preload tags
Check your theme’s <head> for any <link rel="preload"> tags pointing to images that are also loaded via <img> tags — remove the duplicate preload.

5. Limit carousels
If you have multiple “Shop the Look” or carousel sections, either remove the duplicates or lazy-load them.

These 5 steps should bring your homepage from 12 MB down to around 2.5–3 MB and cut load time roughly in half on mobile.

Hope this will helps you if this will work then don’t forget to like and mark as solution on it

4

Hello @siva_fds

Based on your audit, the main bottleneck is image optimization rather than your server or theme performance. Since your TTFB is already excellent and there are no render-blocking scripts, I would recommend focusing on the following improvements:

  • Reduce the number of products displayed on the homepage.
  • Convert images to next-generation formats such as WebP.
  • Resize oversized images using proper srcset and responsive image widths.
  • Remove duplicate image preloads to eliminate unnecessary downloads.

These optimizations should significantly improve your homepage loading speed, especially on mobile devices.

Additionally, if you’re looking for an easier way to manage and optimize your store’s media, you may want to check out File Manager & Image Optimizer. It helps organize your media, compress images, fix missing alt text, detect unused files, and optimize your image library to improve store performance.

I hope this helps! If you need any assistance implementing these optimizations, feel free to reply here, and I’ll be happy to help.

5

@siva_fds solid audit, that is a genuinely good breakdown. The replies above already covered the strategy, so I will not repeat it. The one piece still missing is the actual code for the biggest win, the images, since “serve via image_url with WebP” is hard to action without a snippet.

Worth knowing first: Shopify’s CDN already serves WebP and AVIF automatically to any browser that supports them, as long as the image URL comes from the image_url filter and you do not force a format. So there is no separate WebP step to add. You just stop shipping oversized originals and let the CDN size and convert them, which is where your 400 to 600 KB files drop to roughly 40 to 80 KB.

In Poetic, find the snippet your product cards use for the image (usually something like snippets/card-product.liquid) and replace the raw img tag with a sized, responsive one:

{%- assign img = product.featured_image -%}
{%- if img -%}
  <img
    src="{{ img | image_url: width: 800 }}"
    srcset="{{ img | image_url: width: 300 }} 300w,
            {{ img | image_url: width: 500 }} 500w,
            {{ img | image_url: width: 800 }} 800w"
    sizes="(min-width: 990px) 25vw, (min-width: 750px) 33vw, 50vw"
    width="{{ img.width }}"
    height="{{ img.height }}"
    alt="{{ img.alt | escape }}"
    loading="lazy">
{%- endif -%}

The srcset and sizes let phones pull the 300 to 500px version instead of a 2000px one, which is most of your mobile weight. The width and height also stop the layout shifting as images load, which helps your LCP. Keep loading="lazy" on everything below the first row, but let the hero or first product row load eagerly so LCP is not held back.

For the duplicate preload, open layout/theme.liquid, search the head for rel="preload" pointing at IMG_6412, and delete that line. And the 1,221 images loading at once is just the homepage rendering the whole catalogue, so cap each product section to 8 to 12 in the theme editor and drop any duplicate “Shop the Look” sections, like the others said.

If you paste your current product card image code here, I will rewrite it to match Poetic exactly.