Una de las soluciones para resolver el bloqueo de representación de los recursos CSS en HTML es precargar el CSS y luego cargar el CSS una vez que se carga el archivo:
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'"/>¿Alguna idea sobre cómo convertir el código HTML a la implementación de AEM?
No hay nada que convertir, solo necesita generar ese marcado en particular en una página.
Hay muchas formas de escribir componentes a nivel de página y las implementaciones a menudo tienen al menos varios de esos componentes en uso. Tendría que modificar el código responsable de vincular a las bibliotecas del lado del cliente . Creo que esta cantidad de flexibilidad no está integrada en los mecanismos que utiliza AEM para incluirlos. Probablemente tendría que reemplazar las etiquetas JSP estándar o las plantillas HTL con un poco de implementación personalizada, dependiendo de cómo se hayan escrito los componentes de nivel de página.
Debe identificar los componentes de nivel de página detrás de cada una de las plantillas utilizadas en su sitio y ajustarlas. Si tiene un proyecto totalmente nuevo, el trabajo es más fácil ya que puede comenzar con este enfoque.
Consulte https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-4-clientlib-javascript-with-async-and-defer-css-with/mp/323641 para obtener algunas sugerencias que podrían Se relevante.
Su trabajo podría ser más fácil si usa AEM Core Components , que no son parte del producto, sino un proyecto de código abierto administrado por Adobe y la comunidad de AEM. Parece haber alguna funcionalidad adicional en torno a esto que en Vanilla AEM. Sin embargo, no he usado ninguna de esas funciones y no estoy seguro de qué tan cerca están de la preparación para la producción.
Este problema menciona la precarga de scripts, lo que implica cierto grado de soporte https://github.com/adobe/aem-core-wcm-components/issues/1823
Aquí está la documentación para la última iteración del componente de página https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/components/page /v3/page/README.md