AMP-ondersteuning voor de kerncomponenten

Vanaf release 2.11.0 van de Core Components, worden AMP - Accelerated Mobile Pages - volledig ondersteund.

In dit document wordt een overzicht gegeven van de manier waarop AMP wordt ondersteund en van de manier waarop u dit voor uw sites kunt inschakelen. Nochtans voor volledige technische details, gelieve de documentatie van de ontwikkelaar van GitHub te zien.

Wat is AMP?

Accelerated Mobile Pages of AMP is een opensource-framework dat oorspronkelijk door Google is ontworpen om pagina's te optimaliseren voor mobiel surfen. AMP-pagina's worden doorgaans veel sneller geladen dan standaardwebpagina's en bieden betere mobiele ervaringen.

AMP in de kerncomponenten

Ondersteuning voor AMP in de Core Components is volledig configureerbaar. AMP-versies van pagina's kunnen alleen worden aangeboden, naast de standaard HTML-versies, of helemaal niet.

De componenten van de Kern gebruiken amp als Verschuivende selecteur om een pagina van AMP terug te geven. example.html zou bijvoorbeeld de normale pagina weergeven en example.amp.html zou de AMP-versie zijn.

Individuele projecten kunnen beslissen of zij AMP al dan niet zullen benutten. Omdat AMP- en standaard HTML-pagina's parallel kunnen worden geleverd, kan een project ervoor kiezen om AMP alleen op bepaalde pagina's van het project te gebruiken.

Aan de slag met AMP-ondersteuning in uw project

Hoewel AMP-ondersteuning veel flexibiliteit biedt, zijn er slechts enkele eenvoudige stappen nodig om snel aan de slag te gaan:

  1. Installeer indien nodig de extensie voor AMP-ondersteuning.
    • Voor AEM als projecten van de Cloud Service, is de uitbreiding automatisch beschikbaar met de Componenten van de Kern en geen installatie is noodzakelijk.
    • Voor on-premise en projecten van AMS, moet de uitbreiding uitdrukkelijk worden geïnstalleerd wanneer het installeren van de Componenten van de Kern.
  2. Zodra de uitbreiding AMP wordt geïnstalleerd, moet de componentenauteur de componentensupertypes aan die in de uitbreiding eenvoudig richten.
  3. Schakel AMP- ondersteuning in op sjabloonniveau of op afzonderlijke pagina's.
  4. Implementeer indien nodig gekoppelde CSS.

AMP inschakelen voor pagina's

Als u AMP voor een pagina wilt inschakelen, moet de AMP-modus zijn geselecteerd in het Paginabeleid.

Opties voor AMP-paginabeleid

  • Geen AMP - De pagina wordt alleen als standaard-HTML geleverd.
  • AMP met paden - De pagina wordt als AMP en HTML geleverd.
  • Alleen AMP - De pagina wordt alleen als AMP geleverd.

De AMP-instellingen voor een pagina kunnen ook worden overschreven in Pagina-eigenschappen voor een afzonderlijke pagina.

Eigenschappen van AMP-pagina

  • Overnemen van paginasjabloon - Dit is de standaardwaarde, waardoor de instelling kan worden overgenomen uit het beleid van de paginasjabloon.
  • Geen AMP - De pagina wordt alleen als standaard-HTML geleverd.
  • AMP met paden - De pagina wordt als AMP en HTML geleverd.
  • Alleen AMP - De pagina wordt alleen als AMP geleverd.

CSS-vereisten

Bij gebruik van AMP met de kerncomponenten is het belangrijkste verschil dat AMP vereist dat alle CSS in het <head>-element worden gealigneerd en geoptimaliseerd.

Hiertoe wordt een aangepaste pagina-component gebruikt, die alleen de AMP-specifieke CSS laadt voor componenten die op de pagina aanwezig zijn.

OPMERKING

Vanwege ontwerpbeperkingen van AMP biedt Adobe geen ondersteuning voor het gebruik van het responsieve raster met de AMP-versie van uw pagina.

Voor verdere vereisten en technische details, te zien gelieve de documentatie van de ontwikkelaar van GitHub.

Op deze pagina