ampproject / ampproject/amp-toolbox

Optimizer: Add OptimizeHeroImages configuration to allow media-less images to be preloaded

Open
#1,230 0 comments 0 reactions 0 assignees View on GitHub
enhancement toolbox-optimizer
Dominant language
HTML
Stars
459
Forks
242
PR merge metrics
No merged PRs in 30d

Description

As of #1132, image preloading was turned off for images that lack a `media` attribute, since otherwise images can accidentally be preloaded which are shown exclusively to mobile to desktop:

https://github.com/ampproject/amp-toolbox/blob/c6527a01694896da46b395f0833ce262927eb3cb/packages/optimizer/lib/transformers/OptimizeHeroImages.js#L118-L122

However, there are many cases where a template doesn't actually have viewport-dependent hero images. For them, therefore whether or not a hero image without a `media` attribute gets preloaded should be dictated by by a configuration option (which defaults to `false`).

It's also possible that some `media`-less hero images may be viewport-specific whereas others are shared. Consider a template that has a square logo for mobile but a rectangular logo for desktop, but both mobile and desktop share the same top story image. This case should also be accounted for, however I'm not sure the best way to do so with configuration. The most flexible way to do so would be for the configuration to take a callback that would allow arbitrary logic to be used to determine whether an image can be preloaded. For example, if only the logo is can't be prerendered, and logos have the class names `desktop-logo` and `mobile-logo` respectively for desktop and mobile viewports, then this could be configured as follows:

```js
const transformer = new OptimizeHeroImage( {
maxHeroCount: 6,
canPreloadCallback: ( heroImage ) => {
return ! /logo/.test( heroImage.attribs.class );
}
} );
```

I realize that transformer configurations up until now may be limited to JSON-primitives, but this seems the most flexible.

Contributor guide

Open the contributing guide

Research direction

Start in packages/optimizer/lib/transformers/OptimizeHeroImages.js, especially the logic linked at lines 118-122, to understand why media-less images are excluded. Decide how configuration should represent the default-disabled behavior and the optional per-image callback described in the issue. Done means templates can control which media-less hero images are preloaded without reintroducing viewport-specific preload mistakes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.