Reader: if an image URL can't be made safe, discard it before the post card type is chosen

[bluefuton]

Discussed in p5PDj3-4Up-p2.

Changes proposed in this Pull Request

As of #45503, Reader's image filtering discards any image that has a query string after we’ve taken off known Photon size parameters like w and quality.

However, we don't do this check until quite late in the rendering process, after we've chosen what type of card to display. If there are images that don't meet the standard, they remain in post.images and we end up with missing images displayed like this:

This PR adds an earlier safeImageUrl check to the 'keep valid images' rule, so any URL that we can't make safe is removed from post.images and post.content_images before we choose a post card type.

Testing instructions

Visit https://wordpress.com/read/feeds/98993195.

Without the PR, there'll be a bunch of empty images (all ads from a8.net with a query string):

With the PR applied, there'll be fewer gallery cards, but no missing images.

You can also run the unit tests with yarn test-client client/lib/post-normalizer.

[matticbot]

Test live: https://calypso.live/?branch=fix/reader-image-filtering

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~13 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-main         +26 B  (+0.0%)       +6 B  (+0.0%)
entry-login        +26 B  (+0.0%)       +7 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~7 bytes added 📈 [gzipped])

name    parsed_size           gzip_size
reader        +20 B  (+0.0%)       +7 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~21 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-design-blocks                               +20 B  (+0.0%)       +7 B  (+0.0%)
async-load-components-web-preview-component            +20 B  (+0.0%)       +7 B  (+0.0%)
async-load-blocks-support-article-dialog-dialog        +20 B  (+0.0%)       +7 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[krymson24]

@bluefuton works as expected!

[bluefuton]

Thanks for the review @krymson24 🙂