The Hidden Cost of Mixed Content: How One HTTP Image Can Tank Your Site Performance

A WooCommerce store’s About page was loading in 3.4 seconds — the slowest page on the entire site. Google’s real-user data showed a layout shift score of 0.28, nearly 35 times worse than what lab tests indicated. The culprit? A single image loading over HTTP instead of HTTPS.

One image. One missing letter s. Weeks of poor performance scores and degraded user experience.

What Is Mixed Content?

When your website runs on HTTPS (as it should), every resource the page loads — images, stylesheets, scripts, fonts — should also load over HTTPS. When a resource loads over plain HTTP on an otherwise HTTPS page, that’s mixed content.

Browsers handle mixed content in two ways:

• Active mixed content (scripts, iframes) is blocked entirely. Your page may break visibly.
• Passive mixed content (images, videos) is usually still loaded, but with consequences that aren’t immediately obvious.

It’s the passive kind that causes the most damage, precisely because it doesn’t break anything visibly. The page still works. The image still appears. But behind the scenes, a cascade of problems is building.

How One HTTP Image Creates Multiple Problems

Problem 1: The CDN Won’t Cache It

Most CDN configurations are set up to only cache HTTPS resources. An image requested over HTTP bypasses the CDN entirely and loads directly from the origin server. This means:

• The image loads slower for every visitor, every time.
• It doesn’t benefit from geographic distribution — a visitor in Auckland gets the same response time as a visitor in London, instead of being served from a nearby edge server.
• It increases load on your origin server unnecessarily.

In the real case, fixing the HTTP-to-HTTPS issue meant the image could finally be picked up by CloudFront’s CDN, immediately improving load times.

Problem 2: Largest Contentful Paint (LCP) Suffers

LCP measures how long it takes for the largest visible element on the page to load. For many pages, that’s the hero image. If that image is loading over HTTP (and therefore not cached by the CDN), it loads from the origin server on every single page view.

The About page in our real example had an LCP of 3.4 seconds — the worst on the site. Google considers anything over 2.5 seconds a poor experience. This directly affects your Core Web Vitals score in Google Search Console.

Problem 3: Layout Shift Gets Worse

When an image loads slowly, the browser renders the page text first, then shifts the layout when the image finally arrives. This is Cumulative Layout Shift (CLS) — and it’s one of the most frustrating experiences for users.

The store in our example showed a CLS of 0.008 in lab tests (excellent) but 0.28 in real-world field data (poor). The difference? Lab tests load the page once in a controlled environment. Real users experience the slow HTTP image competing with fast HTTPS resources, creating unpredictable timing that causes layout shifts.

Problem 4: Browser Security Warnings

Modern browsers display a warning icon in the address bar for pages with mixed content. Your site still has the padlock, but it may show a small warning triangle or “Not fully secure” message. For an e-commerce site, this erodes customer trust at the exact moment you need them to feel confident entering payment details.

Problem 5: SEO Impact Compounds Over Time

Google has confirmed that page experience signals, including Core Web Vitals, influence search rankings. A single HTTP image that degrades LCP and CLS on a key page doesn’t just affect that page — it affects your site-level Core Web Vitals assessment in Google Search Console.

The longer mixed content persists, the more real-user data accumulates in Google’s CrUX (Chrome User Experience Report). Even after you fix the issue, it takes 28 days for the field data to fully reflect the improvement, because CrUX uses a rolling 28-day average.

How Mixed Content Creeps In

Mixed content rarely starts as a deliberate choice. It accumulates through:

• Content migration: When a site moves from HTTP to HTTPS, most migration tools update URLs in the database. But images embedded directly in page content, custom fields, or theme settings may be missed.
• Copy-pasting from old content: Duplicating an old page or copying content from a document that contains HTTP image URLs.
• Plugin-generated URLs: Some plugins store absolute URLs in their settings. If the plugin was configured before the HTTPS migration, those URLs may still be HTTP.
• External embeds: Embedding an image or resource from an external source that uses HTTP.
• Manual edits: Someone uploads an image and manually types the URL instead of using the media library’s insert function.

How to Find and Fix Mixed Content

Quick Check

Open your site in Chrome, press F12 to open Developer Tools, and check the Console tab. Mixed content warnings appear as yellow or red messages specifying exactly which resources are loading over HTTP.

Comprehensive Scan

Several free tools can scan your entire site:

• Browser Developer Tools: Check the Console and Network tabs on each key page.
• Your hosting provider: Ask them to check — many managed hosting providers can identify mixed content at the server level.
• WordPress plugins: Tools like Better Search Replace can find and fix HTTP URLs stored in your database.

Prevention

• Use relative URLs where possible (starting with / instead of https://yourdomain.com/).
• Use the WordPress media library to insert images rather than typing URLs manually.
• After any migration or SSL setup, run a database search-and-replace to convert remaining HTTP URLs to HTTPS.
• Check external embeds — if you embed content from third-party services, verify they support HTTPS.

A Checklist After Fixing Mixed Content

Once you’ve converted HTTP resources to HTTPS:

1. Clear all caches — your CDN cache, any page caching plugin, and Redis/object cache.
2. Test the specific pages that were affected. Verify images load and the padlock icon shows without warnings.
3. Run a PageSpeed Insights test on the affected pages to get a new lab score.
4. Wait 28 days for field data (CrUX) to update, then verify the improvement in Google Search Console.
5. Set up monitoring — check Core Web Vitals monthly to catch any new mixed content before it accumulates field data.

The Lesson

Website performance problems rarely announce themselves. A single HTTP image on a single page can silently degrade your loading speed, your layout stability, your security indicators, and your search rankings — all while your site appears to work perfectly in testing tools.

The fix took seconds: change http:// to https:// in one image URL. The impact of not catching it lasted weeks. Check your site for mixed content today — it’s one of the highest-return, lowest-effort improvements you can make.