After encountering some Sea-Themed Google Pagespeed Warnings for porpoiseant , jellyfish.webp, and banger.js, I’ve tracked down the offending code to be from CloudFlare’s Mirage tool (found under the Speed tab)
From the CloudFlare Website, this is the summary of Mirage:
What does Mirage do?
Mirage tailors image loading based on network connection and device type. Devices with small screens receive smaller images, and slower connections receive lower resolution images. This speeds up page rendering so users can begin interacting with your website without waiting for images to download first.
Mirage improves page load time by:
- 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.
- Request Streamlining: Combines multiple individual network requests for images into a single request.
Note: Mirage does not transcode or otherwise alter the original full-resolution images.
In a real-world setting, I imagine Mirage can provide some good speed advantages. This is even more true for image-lite sites where users are interested in reading the text first before the full-resolution images have loaded. Unfortunately, in Google’s Pagespeed-Lab context, the Googlebot sees Mirage as a drain to websites. Googlebot seems to prefer manually implemented image optimizations and lazy-loading techniques. Because Pagespeed is now a ranking factor and Mirage is still a beta feature, I am now avoiding the tool in order to avoid possible Google penalties for having an apparently slow site.