Your Shopify homepage is blank on mobile for several seconds. Here is how to find the cause and fix it.

You open your store on your phone and, for a few seconds, nothing useful appears. Maybe the screen is white. Maybe the header loads but the big banner underneath stays empty or black. On your office Wi-Fi it looks fine, so it is easy to dismiss. Your customers don't dismiss it. Most of them arrive on a phone, often on mobile data, and an empty screen is exactly the moment they hit the back button.

This guide explains why a Shopify homepage can stay blank on mobile, how to confirm what is causing it on your own store in about 15 minutes, and how to fix each cause. You don't need to be a developer for the first part. The fixes need someone comfortable editing theme code, and we show the exact changes.

Why the homepage stays blank

The browser can only paint what it has. A blank or half-empty first screen almost always comes down to one of these, and many stores have two or three at once:

1. A huge hero image or video. The banner at the top is often a 3,000 px wide photo, or an autoplay video, that a phone has to download before it can show anything in that space. Shopify will resize images for you, but only if the theme asks for a sensible size.
2. The hero image is lazy-loaded. Lazy-loading tells the browser "load this later, it is off-screen". That is right for images further down the page and wrong for the first image a visitor sees. Some themes and some page builder sections lazy-load everything, including the hero.
3. A slideshow that waits for JavaScript. Many slideshow sections keep every slide hidden until their script has loaded and run. On a slow phone, that script can arrive several seconds after the page, so the banner area sits empty until then.
4. Apps loading scripts before the page can render. Each app you install can add code to every page. Reviews, upsells, chat widgets, pop-ups, tracking pixels and currency converters all compete for the same slow connection and the same phone processor.
5. "Anti-flicker" snippets. Some A/B testing and personalisation tools hide the whole page on purpose until their script decides what to show. If that script is slow, the page stays white.
6. Web fonts that hide text. If the theme loads custom fonts without a fallback, headings can stay invisible until the font file arrives.

Step 1: see it the way your customers see it

Your own phone on fast Wi-Fi hides the problem. Use a slow connection instead.

1. Open your homepage in Google Chrome on a computer.
2. Open DevTools with F12 (or right-click and choose Inspect), then click the phone-and-tablet icon to switch to a mobile view.
3. In the Network tab, change "No throttling" to Slow 4G, and tick Disable cache.
4. Open the Performance tab, click the reload-and-record button, and wait for it to finish.
5. Look at the row of screenshots along the top. That filmstrip shows exactly what a visitor sees second by second.

Then run the same page through PageSpeed Insights and look at the mobile result. Two numbers matter most here: First Contentful Paint (when anything appears) and Largest Contentful Paint (when the biggest element on screen, usually your hero, appears). Google treats Largest Contentful Paint under 2.5 seconds as good. If your store has enough visitors, the top of the report also shows data from real Chrome users, which is the most honest number you will get.

Tip: in PageSpeed Insights, open the "Largest Contentful Paint element" diagnostic. It tells you which element Google considers the main one. If it is your hero image or a slide, the fixes below apply directly.

Step 2: find the cause

With the filmstrip and the PageSpeed report open, work through these checks in order:

• Is the hero lazy-loaded? Right-click the banner, choose Inspect, and look at the <img> tag. If it has loading="lazy", that is your first fix.
• How big is the hero file? In the Network tab, filter by Img and sort by size. A hero over roughly 300 KB on mobile is a warning sign. A video in the first screen usually means several megabytes.
• Is the banner a slideshow? If the empty area fills in all at once when the slideshow script runs, the theme is hiding slides until JavaScript is ready.
• Which scripts load first? In the Network tab, filter by JS and look at what loads before the hero image. Note the app names in the file addresses.
• Is the whole page hidden? If the screen is completely white (not just the banner), search the page source for async-hide or opacity: 0 near the top. That points to an anti-flicker snippet.

Step 3: fix it

Load the hero image first, at the right size

In most Online Store 2.0 themes the hero image is output by a section file such as sections/image-banner.liquid or sections/slideshow.liquid. Find the line that renders the first image and make sure it uses Shopify's responsive image tag, is not lazy-loaded, and is marked as high priority:

{{ section.settings.image
  | image_url: width: 1500
  | image_tag:
    widths: '375, 550, 750, 1100, 1500',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    preload: true }}

This lets a phone download a 750 px version instead of the full-size original, tells the browser to fetch it before less important files, and adds a preload hint so the download starts as early as possible. Use this only for the first visible image. Everything below the first screen should keep loading: 'lazy'.

Upload hero images at a sensible size in the first place. 2,000 px wide is plenty for most banners. Shopify serves modern formats such as WebP automatically when the theme uses image_url.

Replace the mobile hero video with an image

If the first screen is a video, show a still image on phones and keep the video for larger screens, or set a poster image so something appears immediately. Autoplaying video over mobile data is one of the most common reasons we see a banner area stay black for several seconds.

Make the first slide visible without JavaScript

If your slideshow hides slides until its script runs, change the theme CSS so the first slide is visible by default and only the other slides are hidden. The visitor then sees the first banner immediately, and the slideshow takes over once its script is ready. Better still, ask whether you need a slideshow at all. A single strong image usually loads faster and converts at least as well.

Audit your apps

1. List every installed app in Settings > Apps and sales channels.
2. Remove apps you no longer use. Then check that their code is gone too: old apps sometimes leave snippets in theme.liquid or in snippets/.
3. For apps you keep, turn off features you don't use on the homepage (for example, review widgets or upsell blocks that only matter on product pages).
4. Prefer apps that use theme app extensions (app blocks) over apps that inject scripts into every page.

Remove or limit anti-flicker snippets

If an A/B testing or personalisation tool hides the page while it loads, either remove it if you are not actively running tests, or restrict it to the pages you are testing and lower its timeout so the page is never hidden for more than a fraction of a second.

Let text appear straight away

Fonts loaded through the theme editor already use font-display: swap in current Shopify themes. If you added custom fonts by hand, make sure their @font-face rules include font-display: swap so text shows in a fallback font while the custom one loads.

Step 4: check the result

1. Repeat the Slow 4G filmstrip in Chrome. You should now see the header and the hero within the first one or two frames.
2. Run PageSpeed Insights again and compare First Contentful Paint and Largest Contentful Paint with your first run.
3. Check the page on a real phone over mobile data, not Wi-Fi.
4. The field data from real visitors (the top of the PageSpeed report, and the Core Web Vitals report in Google Search Console) is based on the previous 28 days, so it improves gradually over the following weeks.

When to get help

The checks in steps 1 and 2 are safe for anyone to do. The fixes in step 3 involve editing theme code, so make a copy of your theme first (Online Store > Themes > Actions > Duplicate) and make the changes on the copy. If your theme is heavily customised, built by a page builder, or several years old, the fix may be part of a wider clean-up, and it is worth having someone look at it properly.

Speed problems like this are a large part of our speed optimisation work, and we fix them on existing stores without a full rebuild. If you would like us to look at yours, book a free 30-minute call and we will go through what loads first on your homepage and the two or three changes that would help most.