Compatibilidad con AMP para Componentes principales amp-support
Desde la versión 2.11.0 de los componentes principales, AMP: Accelerated Mobile Pages son totalmente compatibles.
Este documento proporciona información general sobre cómo se admite AMP, así como sobre cómo habilitarlo para sus sitios. Sin embargo, para obtener información técnica completa, consulte la documentación para desarrolladores de GitHub.
¿Qué es AMP? what-is-amp
Accelerated Mobile Pages o AMP es un marco de código abierto diseñado originalmente por Google para optimizar las páginas para la navegación móvil. Las páginas de AMP generalmente se cargan mucho más rápido que las páginas web estándar, lo que ofrece mejores experiencias móviles.
AMP en los componentes principales amp-in-core-components
La compatibilidad con AMP en los componentes principales es totalmente configurable. Las versiones AMP de las páginas se pueden servir exclusivamente, junto con las versiones HTML estándar, o no.
Los componentes principales utilizan amp como selector de Sling para procesar una página de AMP. Por ejemplo, example.html renderizaría la página normal y example.amp.html sería la versión de AMP.
Los proyectos individuales pueden decidir si se utiliza o no AMP. De hecho, como las páginas AMP y HTML estándar se pueden entregar en paralelo, un proyecto puede elegir utilizar AMP solo en determinadas páginas del proyecto.
Introducción a la compatibilidad con AMP en su proyecto getting-started
Aunque la compatibilidad con AMP ofrece un buen nivel de flexibilidad, para empezar a utilizarla rápidamente se necesita completar unos pocos pasos sencillos:
-
Instalación de los componentes principales
- Para los proyectos de AEM as a Cloud Service, los componentes principales están disponibles de forma predeterminada y no es necesaria ninguna instalación adicional.
- Para los proyectos locales y de AMS, puede descargar el paquete de contenido más reciente para los componentes principales desde GitHub e instalarlo en sus entornos de AEM.
- Si el proyecto On-Premise o AMS utiliza una versión de componentes principales anterior a la 2.14.0, también debe instalar la extensión AMP disponible como parte de la versión en GitHub.
-
Dirija su componente
resourceSuperTypes acore/wcm/extensions/amp/components/page/v1/page.- Si usó el tipo de archivo del proyecto de AEM para su proyecto como práctica recomendada y eligió la opción para habilitar la compatibilidad con AMP, esto se hizo automáticamente.
-
Habilite la compatibilidad con AMP en el nivel de plantilla o en sus páginas individuales.
-
Implemente CSS en línea según sea necesario.
Habilitar AMP para páginas enabling-amp
Para habilitar la AMP para una página, el modo AMP debe estar seleccionado en la Política de la página.
- Sin AMP: la página se entrega solo como HTML estándar.
- AMP emparejado: la página se entrega como AMP, así como HTML.
- Solo AMP: la página se entrega como AMP solamente.
La configuración de AMP para una página también se puede sobrescribir en Propiedades de página para una página individual.
- Heredar de la plantilla de página: este es el valor predeterminado, que permite que la configuración se tome de la política de la plantilla de página.
- Sin AMP: la página se entrega solo como HTML estándar.
- AMP emparejado: la página se entrega como AMP, así como HTML.
- Solo AMP: la página se entrega como AMP solamente.
Estas opciones aparecen en la interfaz de usuario solo si resourceSuperType está configurado correctamente para la compatibilidad con AMP. El contenido de muestra WKND predeterminado no tiene resourceSuperType establecido y, por lo tanto, las opciones de AMP no están visibles en la interfaz de usuario.
Requisitos de CSS css-requirements
Cuando se utiliza AMP con los componentes principales, la diferencia principal es que AMP requiere que todos los CSS estén insertados en el elemento <head> y que también estén optimizados.
Para admitir esto, se utiliza un componente de página personalizado, que carga solo el CSS específico de AMP para los componentes presentes en la página.
Para obtener más información técnica y requisitos, consulte la documentación para desarrolladores de GitHub.