Mirage - Not Resizing or Lazy Loading?

#1

I have Mirage enabled, but when I run Pagespeed Insights, on the mobile view, I still see very large image sizes on the mobile view and no lazy loading.

I believe Mirage is supposed to do both of these things to improve mobile performance, but it does not seem to be doing it. If I look at the image sizes as well, they show as huge.

Here’s what I have double checked

  1. Cloudflare is running for my site (only enabled for www but that’s all I’m using and testing)
  2. Mirage is enabled
  3. Mobile view selected for Pagespeed Insights
  4. Images loading - size and no lazy loading

Image loading insights – see sizes of images

The main reason I bought a Cloudflare Pro plan was to optimize the mobile site experience and especially sizing and lazy loading of images.

Also, here’s the URL that I’m using for the test:

https://www.bostoncentral.com/things-to-do-in-boston

Shouldn’t Mirage be doing this?

#2

Almost. It’s more like a pseudo lazy loader.

Image Virtualizing: Replaces images with low resolution placeholder images that have the same dimensions as the original (including third party images). Once the page renders completely, full resolution images are then lazy-loaded (prioritizing images in the browser viewport). This process allows pages to render quickly and minimizes browser reflow.

CloudFlare:

  • uses a low resolution placeholder, still a unique placeholder for each image.
  • loads every full image after the page has loaded.

A true lazy loader:

  • uses a very tiny placeholder, like a single pixel gif if you’d like, and that same resource can be re-used for every image.
  • loads each full image independently after it’s [nearly] scrolled into view.

Those differences are confusing lighthouse. The testing tool is not considering the images lazy loaded because of the way CloudFlare does it’s magic. That’s a testament to how well CF works transparently to end users!

CloudFlare is great for site owner for push-button optimizations. But it’s not a replacement for truly optimum performance through coding.

If you want the best in performance you’re better off controlling this yourself w/in the code. There are many javascript libraries that handle this.

In the below test the page has 54 images being handled by an on-site lazy loader. The only two images that are reported are those which are not lazy loaded by me.

1 Like
#3

Thanks for your help. In the description of Mirage, it also says that it shows a lower size image depending on the device, but this also does not seem to be happening when I look at the mobile Pagespeed test:

Is it also recommended to add create multiple size images and use srcset manually as well?

#4

PageSpeed Insights is a great tool in some aspects, but it’s very poor as far as debugging a specific issue goes.

I’d suggest you test your pages with https://www.webpagetest.org/, find a server near the location of your target audience, and run a few tests.

They will enable you to check for headers that contain precious information about what’s going on. You may want to place the test result link here so that people in this community may have a look and hopefully help you figure this out.

split this topic #5

A post was merged into an existing topic: Mirage and SVG

#7

Yep. Especially considering high density displays. But srcset is a web design concept, not a CloudFlare feature. Just like lazy loading, it’s probably something you’ll want to control yourself.

1 Like
split this topic #8

A post was merged into an existing topic: Mirage and SVG