Reduce widget payload

[rowan-m]

Address opportunities to improve the overall loading time and bandwidth cost of the widget, specifically:

• Seemingly 3 transfers of recaptcha__en.js at ~90KB per time
• Coverage reports at ~73% unused
• Logo is 2.3KB PNG, would this be better as inline SVG?

Any other thoughts? @addyosmani @khempenius
re: https://twitter.com/JamesWee_/status/1169760386834284545

[addyosmani]

Would love to see if we can get some eyes on the largest offenders here (script costs). I'm curious if it's possible to break down the user-flows here into distinct on-demand loading steps (e.g lean core, minimal script for the "I am not a robot" flow, only load script for the more complex verification steps as needed..)

[thestereoscopics]

I would also love to see some resolution to this issue. Right now, 3 of the same scripts at 90kb each, is accounting for around 7-12% of each of the pages on the site I'm building (289kb total recaptcha/1.4MB total page assets). Justifying that to kind of load increase is tough when I've spent days setting up image optimization and caching, and minifying files.

[khempenius]

Hi @thestereoscopics - This is on our radar (I was actually just talking about this yesterday). However, it’s is a busy time of the year, so it’s going to be a little bit longer until we can get this prioritized (unfortunately).

[briedis]

How can this not be a priority? We're trying to speed up our pages to please google audit tools etc., and get this slap to the face from google itself. Almost everything is loaded double, and the file sizes are not small...

Frickin 600 KB gzipped...

[heipei]

Any update on this item?

[Malvoz]

I'm not a part of the Chrome team but I did a little audit, out of curiosity, to see how other things than code splitting, as suggested by @addyosmani, could lower the widget payload.

Opportunity	KB saved
Enable Brotli compression where possible	(In comparison to GZIP) Brotli compression results in: • 21% smaller HTML • 17% smaller CSS • 14% smaller JS
Enable Conditional Requests (Last-Modified and/or ETag) for https://www.google.com/recaptcha/api.js	0.57 [1]
Minify <iframe> HTML resources: https://www.google.com/recaptcha/api2/anchor?{...} https://www.google.com/recaptcha/api2/bframe?{...}	1.12 (before GZIP) 1.07 (before GZIP)
Compress PNG (from 91.3 KB to 41.2 KB) 📁 bg-png.zip	50.1
Convert [2] base64 encoded images to PNG and compress (from 135.43 KB data URI to 31.37 KB PNG) 📁 bg-base64-to-PNG.zip	104.06
Compress JPG (from 17.4 KB to 8.62 KB) 📁 bg-jpg.zip	8.78
Convert photography images from PNG to JPG and compress (from 63.6 KB to 21.7 KB) 📁 bg-png-photos-to-jpg.zip	41.9

[1]: Payload may accumulate depending on the amount of navigations (where max-age=300 has expired). Enable Conditional Requests to return 304 instead of re-downloading the resource if unmodified.

[2]: Although base64 encoded images are generally much larger than PNGs, some of these images aren't used until a user clicks the "I'm not a Robot" checkbox, converting those to PNGs saves bytes but will likely have a negative effect on image rendering (hence the data URI usage?), perhaps preloading can help here, in browsers that support it. CSS animations is also an option, but that's a bigger task to take on.

If this conversion from base64 to PNG is done, the following CSS selectors (in styles__ltr.css / styles__rtl.css) can reuse the same background-image URLs to reference the then identical images, instead of having one reference the PNG version, and the other the base64 encoded version (saving 30.58 KB):

• .recaptcha-checkbox-borderAnimation and .recaptcha-checkbox-nodatauri.recaptcha-checkbox-borderAnimation to both use the compressed PNG version of checkbox_sprite.png
• .recaptcha-checkbox-checkmark and .recaptcha-checkbox-nodatauri.recaptcha-checkbox-checkmark to both use the compressed PNG version of checkmark_sprite.png
• .recaptcha-checkbox-spinner and .recaptcha-checkbox-nodatauri.recaptcha-checkbox-spinner to both use the compressed PNG version of loading_sprite.png
• .recaptcha-checkbox-spinnerAnimation and .recaptcha-checkbox-loading .recaptcha-checkbox-nodatauri.recaptcha-checkbox-spinnerAnimation to both use the compressed PNG version of loading_bg_sprite.png

Note

That concludes a saving of roughly 240 KB in total, excluding potential savings from Brotli compression.

@rowan-m

Logo is 2.3KB PNG, would this be better as inline SVG?

The HTML resource containing that PNG isn't cacheable, inline SVG in this case would increase bandwidth usage on subsequent requests, however, compressing it reduces the size to 1.39 KB (byte savings included in the analysis above).

[heipei]

Sounds like you should be part of the Chrome team 😃

[ByronAP]

another +1 on fixing this as it is the biggest waste of resources I have atm

#yakillingmesmalls

[guillaumevp]

Another +1 here: a simple inclusion of a recaptcha on an empty HTML page results in 675 KB of resources loaded...

[ManadayM]

+1 for this. It'd be great, if this gets fixed. It loads ~600 KB of resources for a very tiny signup form. :(

[nghitrum]

+1 for this since I also have the same recaptcha__fi.js loaded 3 times.