Sobes.tech
Aiuto per il colloquio
Risorse
Preparazione al colloquio
Risorse
Ricerca di lavoro
Risorse
Legale
Torniamo alle domande
Middle

Cosa sono le pagine AMP?

sobes.tech AI

Risposta dell'AI

AMP (Pagine Mobili Accelerate) è un framework HTML open source creato da Google per creare pagine web rapide e responsive che si visualizzano bene sui dispositivi mobili.

Principi fondamentali di AMP:

  • Set limitato di tag HTML: Viene utilizzato un sottoinsieme di HTML, che consente di accelerare l’analisi e il rendering della pagina.
  • Caricamento asincrono delle risorse: Script, immagini e altre risorse vengono caricate in modo asincrono, senza bloccare il rendering del contenuto principale.
  • Priorità al contenuto: L’ottimizzazione mira a un rapido caricamento del contenuto visibile.
  • Dimensioni statiche degli elementi: La maggior parte degli elementi ha dimensioni predefinite, riducendo i "salti" del contenuto durante il caricamento.
  • Utilizzo di AMP Cache: Un’organizzazione esterna (ad esempio, Google) può mettere in cache le pagine AMP e consegnarle dal suo cache, garantendo un caricamento istantaneo.

Componenti chiave di AMP:

  • AMP HTML: Set limitato di tag HTML con l’aggiunta di componenti AMP personalizzati.
  • AMP JS: Libreria JavaScript per gestire il caricamento delle risorse e l’interattività.
  • AMP Cache: Rete proxy per mettere in cache e consegnare le pagine AMP.

Esempio di utilizzo di AMP:

<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Esempio di pagina AMP</title>
    <link rel="canonical" href="https://example.com/обычная-страница.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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}}@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>
    <style amp-custom>
      /* I tuoi stili CSS */
    </style>
  </head>
  <body>
    <h1>Ciao, AMP!</h1>
    <p>Questa è una pagina veloce.</p>
    <amp-img src="/images/kitten.jpg" alt="Gattino" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Vantaggi di AMP:

  • Velocità di caricamento: Le pagine si caricano molto rapidamente, specialmente sui dispositivi mobili.
  • SEO migliorato: Google dà priorità alle pagine AMP nei risultati di ricerca mobile.
  • Migliore esperienza utente: Caricamento rapido e scorrimento fluido.

Svantaggi di AMP:

  • Limitazioni nel design e nelle funzionalità: Non tutte le tag HTML e le funzioni JavaScript sono disponibili.
  • Complessità di implementazione: Richiede sviluppo separato o adattamento del contenuto esistente.
  • Dipendenza da Google (in certa misura): AMP Cache è sotto il controllo di Google.

AMP è ampiamente utilizzato per articoli di notizie, blog e altri contenuti in cui la velocità di caricamento è critica sui dispositivi mobili.

PrecedenteAvanti