pages-plugin-asset-negotiation
pages-plugin-asset-negotiation copied to clipboard
Idea: negotiate with HTTP Client Hints
I think that it may be a good next step to add negotiation not only for the type (i.e. using Accept
) as the current implementation does, but also using more recent approach: Client hints
This way the following can be addressed:
- preferred low data with
Save-Data
(which is even a low-entropy one so it's sent right away - effective connection type
ECT
- image responsiveness with device pixel ratio (with
Sec-CH-DPR
) and size descriptors (withSec-CH-Viewport-Width
andSec-CH-Viewport-Height
This is a great suggestion, thank you!
I'll have to have a think about the API I want to implement for each of these, since unfortunately we can't easily get information about files from Pages yet, such as their content-length
or things to determine which would be best to save data, for example.
unfortunately we can't easily get information about files from Pages yet, such as their
content-length
or things to determine which would be best to save data
First thought is: since this is a plugin one will use with premeditation, then maybe a way to go would be just to allow the creator to provide data-saver alternatives for assets (distinguished by name with some pure function)?
Then the plugin would have to do the following algorithm
- Check if there's
dataSaverAlternative
- If there is: pass the URL (or path) of the requested asset to it.
- Check if there's asset matching returned URL
- Serve it
It's then entirely up to the author (at a cost of generating more during build and eating up the "number of elements in deployment" limit)
It could be implemented like this:
const dataSaverAlternative = (path) => path.replace(/\.([^.]+)$/, "-datasaver.$1");
It adds -datasaver
suffix before extension (in very unsophisticated way)
Something like that should work great, yes! There's unfortunately also not a way to efficiently check if an asset exists yet either (though I'm regularly encouraging the team to add one), so I'd have to always try and fetch it in its entirety (if enabled), which could add latency, especially if done in combination with Accept
, since you could then have 3 image formats and for each image format a datasaver option. I'll need to think on it a little more.
I'm very much in favour of supporting any Client Hints in this plugin that make sense though!