Summary

While I searching for ways to defer non-critical CSS files, I found that magento2 has a defer attribute in the head.xsd file. This means I can write the following code in the default_head_blocks.xml without any errors.

<css src="css/intl-tel-input.css" defer="true" />

But I realized that this defer attribute unfortunately has no effect on the CSS element. I just wondering the purpose of allowing us to use this attribute. Do you have any future plans about this attribute for any of the linkType elements (css, link, font)?

Examples

https://github.com/magento/magento2/blob/2.4-develop/lib/internal/Magento/Framework/View/Layout/etc/head.xsd#L11C27-L11C27

Proposed solution

<css src="css/intl-tel-input.css" defer="true" />

After editing the Renderer.php file, we can get the output as follows by writing the code above. With this way, we can defer non-critical render-blocking CSS files on the first load.

<link rel="preload" href="css/intl-tel-input.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/intl-tel-input.css"></noscript>

Release note

No response

Triage and priority

• Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.