auro-wcss: prefetch asset capability

[lee-leonardo]

Is your feature request related to a problem? Please describe.

The webcore stylesheets is seeing some flicker due to latency in the lower environments. This was reported by Zyle Moore. We've isolated the change to the only reference of the asset at this github location:

https://github.com/AlaskaAirlines/WebCoreStyleSheets/blob/bc976532759cd65b44d3d7df54aa258fb42b5d8f/src/_fonts.scss#L48

This is interacting with our asset mapping solution and the proxied contentstack cdn. The redirection is causing some latency (in production) or is unable to be handled correctly in some scenarios (lower environments). The request would be to incorporate a way to mark these resources as prefetch from the client perspective. The content team can investigate a way of assigning to the prefetch cache to the network requests made after the fact, but that will not affect first time pop-in.

Describe the solution you'd like

Either and javascript, html, or css prefetch flag on the asset so that this behavior can be controlled by the browser.

Describe alternatives you've considered

• Adding prefetch html
  • not a singular html document to add this to, adding it to the homepage or landing page doesn't not seem appropriate.
• Adding prefetch to the assets en locale
  • Not possible due the routing happening through APIM, we will look to see if this is possible in fastly with the addition of the headre, but this will only affect subsequent loads.

Additional context

https://web.dev/articles/codelab-two-ways-to-prefetch

https://teams.microsoft.com/l/message/19:e2e6815f3b23423695793234f2b85038@thread.skype/1713460334170?tenantId=0f44c5d4-42b0-45c2-bf55-d0fea8430d33&groupId=aa01c782-8f88-480d-85f1-0927b1757977&parentMessageId=1713460334170&teamName=AS%20e-comm%20Software%20Engineering&channelName=Content%20Public%20Channel&createdTime=1713460334170

Exit criteria

No response

[blackfalcon]

The @font-face selector does not support prefetch. Currently, anyone consuming the Auro fonts CSS is either doing so via Sass as an individual import or via pre-processed bundled resources as a CSS file.

Either way, Auro has no control over the code that needs to be updated that is located in the app's header.

​<link rel="prefetch" href="https://..." rel="stylesheet">

Things we can do to support this is update documentation that educates consumers on how to pre-fetch the web font. That would either be pre-fetching all their CSS that contains the @font-face rule, or we break that out into an individual ./fonts.css file that can be consumed, or users can simply ref the CDN endpoint used as the src in the @font-face rule.

I don't recommend that last option as it will be very difficult to update in the event there is a change.

But in the end, even if there is a new CSS file for fonts we can only make that accessible to users, they are responsible for the rel="prefetch" on their end.

[Eliza-Huang]

This is interacting with our asset mapping solution and the proxied contentstack cdn.

only legacy assets with the /media url will be interacting with the mapper, so the line should just be

This is interacting with the proxied contentstack cdn.

[lee-leonardo]

Yeah I agree that this probably is on the developers to prescribe the prefetch in the header. @codetothepoint was thinking of creating a utility to help generate metadata tags in the html document, this might be a good idea to roll it into.

[blackfalcon]

The last comment and other side conversations conclude that this is not an issue for Auro, nor this repo, to solve. Closing as there are no further actions to be taken.