Sobes.tech
Ajutor la interviu
Resurse
Pregătirea interviului
Resurse
Căutare de locuri de muncă
Resurse
Legal
Înapoi la întrebări
Middle

Ce sunt paginile AMP?

sobes.tech AI

Răspuns de la AI

AMP (Paginile Mobile Accelerate) este un cadru HTML open-source creat de Google pentru a crea pagini web rapide și responsive, care se afișează bine pe dispozitivele mobile.

Principiile de bază ale AMP:

  • Set limitat de etichete HTML: Se utilizează o submulțime de HTML, ceea ce permite accelerarea analizării și randării paginii.
  • Încărcarea asincronă a resurselor: Scripturile, imaginile și alte resurse sunt încărcate asincron, fără a bloca randarea conținutului principal.
  • Prioritatea conținutului: Optimizarea vizează încărcarea rapidă a conținutului vizibil.
  • Dimensiuni statice ale elementelor: Majoritatea elementelor au dimensiuni predefinite, reducând "salturile" de conținut în timpul încărcării.
  • Utilizarea AMP Cache: O organizație terță (de exemplu, Google) poate stoca în cache paginile AMP și le poate livra din cache-ul său, asigurând o încărcare instantanee.

Componentele cheie ale AMP:

  • AMP HTML: Set limitat de etichete HTML cu adăugarea de componente AMP personalizate.
  • AMP JS: Biblioteca JavaScript pentru gestionarea încărcării resurselor și interactivității.
  • AMP Cache: Rețea proxy pentru cache și livrare a paginilor AMP.

Exemplu de utilizare a AMP:

<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Exemplu de pagină 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>
      /* Stilurile tale CSS */
    </style>
  </head>
  <body>
    <h1>Salut, AMP!</h1>
    <p>Aceasta este o pagină rapidă.</p>
    <amp-img src="/images/kitten.jpg" alt="Kitten" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Avantajele AMP:

  • Viteză de încărcare: Paginile se încarcă foarte rapid, mai ales pe dispozitive mobile.
  • SEO îmbunătățit: Google preferă paginile AMP în rezultatele de căutare mobilă.
  • Experiență mai bună pentru utilizatori: Încărcare rapidă și derulare lină.

Dezavantajele AMP:

  • Limitări în design și funcționalitate: Nu toate etichetele HTML și funcțiile JavaScript sunt disponibile.
  • Complexitatea implementării: Necesită dezvoltare separată sau adaptarea conținutului existent.
  • Dependența de Google (în anumite măsuri): AMP Cache este controlat de Google.

AMP este utilizat pe scară largă pentru articole de știri, bloguri și alte conținuturi unde viteza de încărcare este critică pe dispozitivele mobile.

AnteriorÎn continuare