如何删除 AEM 中的渲染阻塞 CSS 资源？答案

【问题标题】：How to remove render blocking CSS resources in AEM?如何删除 AEM 中的渲染阻塞 CSS 资源？
【发布时间】：2022-06-08 22:38:55
【问题描述】：

解决 HTML 中渲染阻塞 CSS 资源的解决方案之一是预加载 CSS，然后在加载文件后加载 CSS：

<link rel=\"preload\" href=\"main.css\" as=\"style\" onload=\"this.rel=\'stylesheet\'\"/>

关于如何将 HTML 代码转换为 AEM 实现的任何想法？

没有什么可以转换的，你只需要在页面上输出那个特定的标记。编写页面级组件的方法有很多，而实现通常至少有其中的几种。您将不得不调整负责链接到客户端库的代码。我相信这种灵活性并没有内置到 AEM 用来包含这些的机制中。您可能不得不用一些自定义实现来替换标准 JSP 标记或 HTL 模板，这取决于您的页面级组件是如何编写的。如果你有一个新建项目，工作会更容易。
我的研究证实了你的方法。如果发布它@toniedzwiedz，我可以接受它作为答案

标签： javascript adobe aem

【解决方案1】：

没有什么可以转换的，你只需要在页面上输出那个特定的标记。

有很多方法可以编写页面级组件，并且实现通常至少有几个在使用这些组件。您必须调整负责链接到client side libraries 的代码。我相信这种灵活性并没有内置到 AEM 用来包含这些的机制中。您可能不得不用一些自定义实现来替换标准 JSP 标记或 HTL 模板，这取决于您的页面级组件是如何编写的。

您应该识别网站上使用的每个模板背后的页面级组件并进行调整。如果您有一个新建项目，则工作会更容易，因为您可以从这种方法开始。

如果您使用 AEM Core Components，您的工作可能会更轻松，它不是产品的一部分，而是由 Adobe 和 AEM 社区管理的开源项目。与普通 AEM 相比，这似乎有一些额外的功能。不过，我没有使用任何这些功能，而且我不确定它们离生产就绪有多近。

这个问题提到了预加载脚本，这意味着一定程度的支持https://github.com/adobe/aem-core-wcm-components/issues/1823

这是页面组件https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/components/page/v3/page/README.md 的最新迭代的文档

【讨论】：