Azure WebApp: Slow image rendering and caching issues on custom project (xxbrits)

Hi @Harry Willson
It seems you're experiencing issues with image rendering speed and caching inconsistencies on your Azure WebApp.

Since Azure Front Door and CDN are in use, check that caching rules are properly set, possibly with a longer TTL for better cache retention.

Confirm that lazy loading is set up correctly, so images load as they approach the viewport, which can help reduce initial load times, especially on mobile devices.

Make sure images are compressed as much as possible without losing quality, even if using WebP and lazy loading.

 Address flickering in mobile browsers (notably Chrome) by using srcset attributes to serve images in appropriate sizes for different devices.

Utilize Application Insights to track image load times and identify potential backend delays beyond CDN caching.

 If static assets are impacting performance, consider serving them via Azure Static Web Apps for optimized delivery.

Check if Azure Front Door’s connection limits are being reached, as this can affect loading times.

Implement health checks to continually monitor app performance.

• Troubleshoot Slow Web App Performance
• Scaling Azure App Service
• Using Health Check in Azure App Service
  Let me know if you have any further assistances needed.

Hello,

Welcome to Microsoft Q&A,

You're seeing 2 different issues,

1. The edge isn’t always giving you your already-cached bytes as fast as it could
2. Chrome on Android is deprioritizing/late-decoding your images (so they “flicker” or arrive after a few seconds)

Tackle them from both ends, Front Door config and HTML delivery.

Front Door + Blob: make caching deterministic

1. Turn caching on explicitly for images (Rule Set). Front Door S/P doesn’t cache unless you enable it per route/rule. Add a rule set that matches image paths (*.avif, *.webp, *.jpg, *.png, *.gif) and:

Action → Cache → Enable

Cache behavior → Override always

Duration: e.g., 365d (only do this if asset URLs are fingerprinted)

• Compression: on for text, off for images (they’re already compressed). Docs: caching and rule-set configuration.
• https://learn.microsoft.com/en-us/azure/frontdoor/how-to-configure-caching
• https://docs.azure.cn/en-us/frontdoor/front-door-caching

2. Choose the right cache key. If you use cache-busted filenames (/img/hero.4f3c9a.webp), set Query string = Ignore. If you version via ?v=hash, set Query string = Include all so variants don’t collide.

Front Door S/P doesn’t honor arbitrary Vary headers as part of the cache key. Put the variant into the URL (path or query) instead of varying on headers like DPR/UA.

HTML: get pixels on screen earlier (mobile Chrome)

Prioritize the LCP/hero image.

Use fetchpriority="high" only on the true hero; it measurably improves LCP on Chrome Android.

loading="lazy" everywhere can delay critical images on mobile. Keep lazy for content farther down.

Always set width and height (or aspect-ratio) so the browser lays out boxes before pixels arrive—no CLS “jump”, no flicker.

Lighthouse’s “Reduce unused JS” warning means the main thread is busy. Use defer/async for any script not needed for first paint; heavy JS can delay image decoding on mobile.

Please upvote and accept the answer if it helps!!