Supporto AMP per i Componenti core amp-support
A partire dalla versione 2.11.0 dei Componenti core, è pienamente supportato AMP: Accelerated Mobile Pages.
Questo documento offre una panoramica del supporto AMP e delle modalità di abilitazione di tale funzionalità per i siti. Tuttavia, per informazioni tecniche complete, vedi la documentazione per gli sviluppatori GitHub.
Che cos’è AMP? what-is-amp
Accelerated Mobile Pages o AMP è un framework open-source progettato originariamente da Google per ottimizzare le pagine per la navigazione mobile. Le pagine AMP vengono generalmente caricate molto più rapidamente delle pagine web standard, offrendo una migliore esperienza sui dispositivi mobili.
AMP nei Componenti core amp-in-core-components
Il supporto per AMP nei Componenti core è completamente configurabile. Le versioni AMP delle pagine possono essere pubblicate in via esclusiva, insieme alle versioni HTML standard, o non pubblicate affatto.
I Componenti core utilizzano amp come selettore Sling per eseguire il rendering di una pagina AMP. Ad esempio, example.html esegue il rendering della pagina normale e example.amp.html è la versione AMP.
I singoli progetti possono decidere se utilizzare o meno AMP. Infatti, poiché le pagine AMP e HTML standard possono essere distribuite in parallelo, un progetto può scegliere di utilizzare AMP solo su determinate pagine.
Introduzione al supporto AMP nel progetto getting-started
Sebbene il supporto AMP offra una grande flessibilità, per iniziare a utilizzarlo occorrono solo alcuni semplici passaggi:
-
- Per i progetti AEM as a Cloud Service, i Componenti core sono disponibili per impostazione predefinita e non è necessaria alcuna installazione aggiuntiva.
- Per i progetti on-premise e AMS, puoi scaricare il pacchetto di contenuti più recente per i Componenti core da GitHub e installarlo nei tuoi ambienti AEM.
- Se il progetto on-premise o AMS utilizza una versione dei Componenti core precedente alla 2.14.0, devi installare l’estensione AMP disponibile come parte della versione su GitHub.
-
Puntare il componente
resourceSuperTypeacore/wcm/extensions/amp/components/page/v1/page.- Se hai utilizzato Archetipo progetto AEM per il progetto come best practice consigliata e hai scelto l’opzione per abilitare il supporto AMP, l’operazione è stata eseguita automaticamente.
-
Abilita il supporto AMP a livello di modello oppure sulle singole pagine.
-
Distribuisci i file CSS allineati come richiesto.
Abilitazione di AMP per le pagine enabling-amp
Per abilitare AMP per una pagina, è necessario selezionare la Modalità AMP in Criterio pagina.
- Nessun AMP: la pagina viene distribuita solo come HTML standard.
- AMP associata: la pagina viene distribuita sia come AMP che come HTML.
- Solo AMP: la pagina viene distribuita solo come AMP.
Le impostazioni AMP per una pagina possono anche essere ignorate in Proprietà pagina per una singola pagina.
- Eredita dal modello della pagina: questo è il valore predefinito che consente di prendere l’impostazione dal criterio del modello della pagina.
- Nessun AMP: la pagina viene distribuita solo come HTML standard.
- AMP associata: la pagina viene distribuita sia come AMP che come HTML.
- Solo AMP: la pagina viene distribuita solo come AMP.
Queste opzioni vengono visualizzate nell’interfaccia utente solo se resourceSuperType è impostato correttamente per il supporto AMP. Il contenuto di esempio WKND predefinito non ha impostato resourceSuperType e pertanto le opzioni per AMP non sono visibili nell’interfaccia utente.
Requisiti CSS css-requirements
Quando si utilizza AMP con i Componenti core, la differenza principale è che AMP richiede che tutti i CSS siano allineati nell’elemento <head> e ottimizzati.
Per supportare questa funzione, viene utilizzato un componente pagina personalizzato che carica solo il CSS specifico per AMP per i componenti presenti nella pagina.
Per ulteriori requisiti e dettagli tecnici, vedi la documentazione per gli sviluppatori GitHub.