Images flicker / break for a moment on page load (Home + Product Pages) — Need help diagnosing

Technical Q&A
,
1

Hi everyone,

I’m experiencing a weird issue on my Shopify store (site: cosy-homes.uk). When I open the homepage or a product page, the images “break” or flicker for a second during the page load then once the page is fully loaded, the images display correctly.

Here are more details:

  • The flicker happens only during the initial load, not after.

  • It happens on both desktop and mobile (I have tested).

  • I’m not sure whether this is lazy-loading, an animation issue, or something else.

  • I have not recently changed a lot of custom code, but I want to check all possible causes.

What I have checked / considered so far:

  1. I know that lazy loading can cause delays or flickering of “above-the-fold” images. Shopify’s performance guide mentions that lazy loading LCP (largest contentful paint) images can slow things down.

  2. I read about image transitions / fade-in animations being a potential issue.

  3. I also know that large image file sizes or too many large banners/sliders could slow the rendering.

Questions (for the community):

  • Has anyone seen this kind of flicker / “break for a second” issue in their Shopify theme?

  • How can I diagnose whether the problem is in my theme code (CSS/JS) or due to lazy loading?

  • Should I try switching “lazy” loading to “eager” for some images (or all), and if yes, how do I do that in Liquid / my theme?

  • Are there performance-best practices (or code snippets) to remove image transitions that might be causing this flicker?

  • Could any Shopify apps I’m using be interfering (or is this more likely a core theme issue)?

I’d really appreciate any pointers, code examples, or debugging advice. Thanks in advance!

2

Hi there,

I took a look at your store and noticed that the image flicker is happening because the theme is trying to load a placeholder image that doesn’t actually exist. Since the placeholder file is invalid, the browser attempts to fetch it, fails, and then immediately switches to the real image which creates that quick flash effect you’re seeing.

Updating the placeholder to a valid one will stop this from happening.

You can use a functional placeholder like this:

https://placehold.co/160x46

Just swap out the broken placeholder link inside your theme files (commonly found in sections/*.liquid or snippets/*.liquid). After that, the images should display without any flickering.

image
image1920×401 48.7 KB

3

Hi @Popa :waving_hand: this is typically from placeholder or default images being rendered or animation for some reason.
A common cause is from bad “performance” optimizations.
If did this to the theme then use a theme backup, you did make one right?, or do a file rollback .
Beyond that the forums are meant for specific SINGULAR questions, not for teaching web development nor theme development
Do the initial work and ask specific questions not broad city wide how tos.

If you don’t know how to fix such things you can reach out to me or other contributors for theme repair services.
:speaking_head: :postbox: CLICK profile-pic on forums for options to connect.
ALWAYS include context in new communications such a reference urls , post urls, etc

4

Nah, that placeholder is only one image in a hidden login form…

Also – it’s not a good idea to load anything from the 3rd party servers – they go down and you have no idea what’s wrong with your site.

In general – themes from ThemeForest, especially when they are version 1.0 are of mediocre quality (there are exclusions, but.)
Many of them are not designed with modern website requirements, like PageSpeed (CWV scores) which will bite later on (when you login to Google search console and see your pages in red zone).

This one, for example does not reserve space for elements which will load later, so it have a high CLS metric.

Also, slides are shown stacked until slideshow javascript kicks in – this is why there is this flicker.
for this exact one, you can use CSS rule like this:

.slick-side-h1:not(.slick-initialized) .itemv-slide-h1:not(:first-child) {
  display: none;
}

Frankly, you’d be better off with any theme from Shopify theme store, even/especially free ones.

5

Hey! @Popa
I understand the issue you’re facing is that image flicker/break while loading is something I’ve seen quite a few times in stores, and it usually comes from how images are being loaded or animated rather than the actual file size.

I checked your site (cosy-homes.uk) and yes, I can clearly see the small flash/flicker on banners before they settle in especially on first load. Usually one of these causes is responsible: Lazy loading being applied to the main hero / LCP image, CSS fade or scale animation transitions, Apps injecting scripts before image rendering, Image dimensions not being reserved (so layout jumps briefly)

You can do few things like:
Change the hero/main banner image loading from lazy to eager

Your largest image should load immediately. In most themes, you’ll find something like:

loading=“lazy”

Change to:

loading=“eager”

fetchpriority=“high”

This will stop the flicker on first render and improve LCP too.

Disable fade-in animations temporarily

Some themes add CSS like:

opacity: 0;

transition: opacity .4s;

If you see this, test removing it or setting:

opacity: 1 !important;

Because the image first loads transparently and then fades which looks like ‘breaking’.

Reserve the image space

Make sure images have fixed width/height to avoid snapping into place:

style=“aspect-ratio: 16/9;”

Hero images: set loading=“eager”
Disable fade animations temporarily
Ensure width/height values exist
Test without extra apps or scripts

You’re on the right track this is not a major issue, but fixing it will improve the user experience, perceived performance, and potentially conversions. Improving loading speed overall is also a priority, You can also take a look into the Website Speedy App which helps optimize stores automatically without removing apps or changing the theme like lazy load adjustment, image optimization, script control, etc.

6

Hi @Popa ,
This image “flicker” you’re seeing on cosy-homes.uk is caused by Cumulative Layout Shift (CLS) issues. The page loads without knowing the final image dimensions, so the content jumps when the images finish loading. That’s why you see a quick “break” or flash before everything settles.

Why this happens (CLS-specific explanation)

  • Your theme is loading images without reserved space.
  • The browser doesn’t know the image width/height until the image finishes downloading.
  • When the real dimensions become available, the layout shifts → causing the flicker.

This is a classic CLS problem.

How to fix it (in Shopify)

1. Add width & height attributes to all images (required for CLS)

Shopify supports this automatically using Liquid:

{{ image | image_url: width: 800 | image_tag: loading: "lazy", widths: "400,600,800", class: "..." }}

If your theme uses raw <img> tags, ensure you add:

<img
  src="{{ image | image_url }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="lazy"
/>

This reserves space so images don’t jump on load.

image
image1920×516 156 KB