Come funziona una pagina AMP?
Il framework AMP è composto da 3 componenti principali:
AMP HTML
Pensa all'HTML AMP come a una versione più snella del normale HTML.
Il framework AMP ha regole rigorose per i tag HTML che puoi utilizzare.
Per garantire un caricamento veloce della pagina, alcuni elementi HTML come i form non sono consentiti su AMP.
Il framework AMP richiede anche l'utilizzo di una versione semplificata di CSS.
Visualizza l'elenco completo dei
Tag HTML per framework AMP.
AMP JS
Per garantire un caricamento veloce della pagina su piattaforme mobile, AMP limita l'uso di qualsiasi Javascript. L'unica eccezione riguarda gli script AMP, che sono ottimizzati tenendo conto dell'accelerazione del caricamento della pagina. AMP ti fornisce una libreria di componenti di facile implementazione che sostituisce i JS.
È possibile creare animazioni, caricare i contenuti in modo dinamico, modificare il layout e altro ancora utilizzando una Libreria di componenti AMP.
AMP CDN
Comunemente noto come AMP Cache, un componente critico della piattaforma AMP è la sua
Rete di distribuzione dei contenuti basata su proxy (CDN). Il CDN recupera i contenuti e le cache di AMP
per la consegna veloce. Per impostazione predefinita, il CDN AMP memorizza nella cache tutti i contenuti AMP validi e
non fornisce un'opzione di opt-out.
Tuttavia, è possibile continuare a sfruttare il proprio provider CDN sulla cache AMP per
personalizzare le configurazioni di distribuzione dei contenuti.
Esempio di pagina AMP "Hello word":
<!doctype html>
<html ⚡ lang="it">
<head>
<meta charset="utf-8">
<link rel="canonical" href="ciao-mondo.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="title" content="Questa è la mia pagina AMP.">
<meta name="description" content="Questa è la mia pagina AMP ciao mondo.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Importa altre estenzioni AMP qui -->
<style amp-custom>
/* Aggiungi i tuoi stili qui */
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href=".">
<title>La mia pagina AMP</title>
</head>
<body>
<h1>Ciao Mondo</h1>
</body>
</html>