Optimize Google Analytics / Google Tag Manager via Preconnect Headers

Add the following before the tag in your html to give google analytics loading a little boost and make the pagespeed and chrome auditing tool happy with your site

<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link href="https://www.google-analytics.com" rel="preconnect" crossorigin>
<link href="https://www.googletagmanager.com" rel="preconnect" crossorigin>

These optimizations can speed up your page load.
Opportunity: Preconnect to required origins
Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. Learn more.

CloudFlare Mirage Causing Google Pagespeed Hang Ups

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.

Mirage is considered Beta because it’s an experimental feature that may cause issues displaying images in association with certain Javascript libraries, such as image carousels or photo viewers. Issues with Mirage affect only a small percentage of customers.


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.

edmonton.webp jellyfish.webp banger.js 404 errors

I’ve been getting an increase in 404 errors hit by Googlebot recently: - - [01/Jul/2019:20:29:17 +0000] "GET /porpoiseant/banger.js?cb=169-1&bv=2&v=15&PageSpeed=off HTTP/1.1" 404 3277 "https://fccid.io/JWC-BS5-5" "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://ww - - [01/Jul/2019:10:37:53 +0000] "GET /detroitchicago/edmonton.webp?a=a&cb=170-1&shcb=27 HTTP/1.1" 404 "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" - - [01/Jul/2019:10:37:53 +0000] "GET /porpoiseant/jellyfish.webp?a=a&cb=170-1&shcb=27 HTTP/1.1" 404  "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"

I’m assuming this is either from a CloudFlare 3rd party app or perhaps one of the primary functions of CloudFlare. CF should really be handling these requests and not allow them to hit the back-end server.
The only third-party app I am using on CF is Google Analytics. Given the nature of the request, I’m assuming this could be an artifact from Rocket Loader or the WebP image loading function of CloudFlare Polish.

Have you seen these requests recently? Please share below so I can continue tracking this down.

Update: I’ve narrowed down the source of these requests: CloudFlare Mirage. Mirage is a CF addon intending to improve page load time by Image Virtualizing and Request Streamlining. CloudFlare uses some smart algorithms to serve mobile devices intelligently-optimized (lossy) images as well as lazy-loading the full resolution image. On top of this, Mirage manages to send all the page images over fewer network requests. Despite these supposed speed advantages, I’ve removed the Mirage tool from my websites. Here’s Why.