Custom Attribute in Style tags in SXA <link rel=preload>

Question

Our site is currently implemented in SXA 1.5 and Sitecore 8.2 instance.

We generate the styles through the following code in our Main Layout file:

AssetLinks assetLinks = AssetLinksGenerator.GenerateLinks(new ThemesProvider());

  @foreach (string style in assetLinks.Styles)
  {
    @Html.Raw(style)
  }

Thus we have the following generated link for Styles (Style optimization set as Optimized in Page Content in SXA)

<link href="/-/media/themes/mysite/styles/optimized-min.css?t=20190819T075414Z" rel="stylesheet" />

Now there is a requirement from the SEO team to add an attribute to the above CSS tag as:

<link rel="preload" href="/-/media/themes/mysite/styles/optimized-min.css?t=20190819T075414Z" as="style">

How can we achieve this customized tag in SXA?

Answer 1

I don't know if there is any clean way to enrich the SXA code which generates <link> tags, but you can always just use String.Replace like that:

style.Replace("<link", "<link rel=\"preload\"")

This will make sure that rel="preload" attribute is added to your tag.

You can add as="style" or any other attributes in the same way:

@Html.Raw(style.Replace("<link", "<link rel=\"preload\""))

Answer 2

AssetLinksGenerator service is responsible for generating links to scripts and styles. You have two options:

1. Override that service and modify GenerateAssetLinks() method like more or less this: Unfortunately, this service is not registered in the DI container (I think it should, we need to change it) and you will need to modify SxaLayout.cshtml:
2. Go to the SxaLayout.cshtml and modify the list of links directly there without need to override AssetLinksGenerator.

In both cases, you need to modify the SxaLayout.cshtml view. Keep in mind that this file will be overridden while upgrading SXA.