Sobes.tech
Interjú segítség
Források
Interjú előkészítése
Források
Álláskeresés
Források
Jogi
Vissza a kérdésekhez
Middle

Mi az az AMP-oldal?

sobes.tech MI

Válasz az MI-től

Az AMP (Accelerated Mobile Pages) egy nyílt forráskódú HTML-keretrendszer, amelyet a Google hozott létre gyors és reszponzív weboldalak készítésére, amelyek jól jelennek meg mobil eszközökön.

Az AMP fő elvei:

  • Korlátozott HTML-címkék készlete: Egy részhalmazát használja a HTML-nek, ami gyorsítja a betöltést és a renderelést.
  • Aszinkron erőforrás betöltés: A szkriptek, képek és más erőforrások aszinkron módon töltődnek be, nem blokkolva a fő tartalom renderelését.
  • Tartalom prioritása: A gyors betöltést a látható tartalomra optimalizálják.
  • Statikus elemméretek: A legtöbb elem előre meghatározott méretekkel rendelkezik, csökkentve a "ugrásokat" betöltés közben.
  • AMP Cache használata: Egy külső szervezet (pl. Google) cache-elheti az AMP oldalakat, és azokat saját cache-éből szolgálhatja ki, biztosítva a azonnali betöltést.

Az AMP fő összetevői:

  • AMP HTML: Korlátozott HTML-készlet, amelyhez egyedi AMP-komponensek tartoznak.
  • AMP JS: JavaScript-könyvtár az erőforrások betöltésének és az interaktivitás kezelésének irányítására.
  • AMP Cache: Egy proxy hálózat az AMP oldalak cache-elésére és szállítására.

Az AMP használatának példája:

<!doctype html>
<html amp lang="hu">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Példa AMP oldalra</title>
    <link rel="canonical" href="https://example.com/szokásos-oldal.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>
      /* Saját CSS stílusok */
    </style>
  </head>
  <body>
    <h1>Szia, AMP!</h1>
    <p>Ez egy gyors oldal.</p>
    <amp-img src="/images/kitten.jpg" alt="Kiscica" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Az AMP előnyei:

  • Betöltési sebesség: Az oldalak nagyon gyorsan betöltődnek, különösen mobilon.
  • Javított SEO: A Google előnyben részesíti az AMP oldalakat a mobilos találatok között.
  • Javított felhasználói élmény: Gyors betöltés és sima görgetés.

Az AMP hátrányai:

  • Tervezési és funkcionalitási korlátozások: Nem minden HTML-címke és JavaScript-funkció érhető el.
  • Implementáció bonyolultsága: Külön fejlesztést vagy meglévő tartalom adaptálását igényli.
  • Google-függőség (egy bizonyos mértékig): Az AMP Cache a Google irányítása alatt áll.

Az AMP széles körben használják híroldalak, blogok és más tartalom esetén, ahol a betöltési sebesség kritikus fontosságú mobilon.

KorábbiKövetkező