Sobes.tech
Pomoc s pohovorom
Zdroje
Príprava na pohovor
Zdroje
Hľadanie práce
Zdroje
Právne
Späť k otázkam
Middle

Čo sú AMP stránky?

sobes.tech AI

Odpoveď od AI

AMP (Accelerated Mobile Pages) je open-source HTML rámec koji je kreirao Google za pravljenje brzih i responzivnih veb stranica koje se dobro prikazuju na mobilnim uređajima.

Osnovni principi AMP:

  • Ograničen skup HTML oznaka: Koristi podskup HTML-a, što ubrzava parsiranje i renderovanje stranice.
  • Asinhrono učitavanje resursa: Skripte, slike i drugi resursi se učitavaju asinhrono, ne blokirajući renderovanje glavnog sadržaja.
  • Prioritet sadržaja: Optimizacija je usmerena ka brzom učitavanju vidljivog sadržaja.
  • Statičke veličine elemenata: Većina elemenata ima prethodno definisane veličine, što smanjuje "skokove" sadržaja pri učitavanju.
  • Korišćenje AMP Cache: Treća strana (npr. Google) može keširati AMP stranice i dostavljati ih iz svoje keš memorije, što obezbeđuje trenutačno učitavanje.

Ključne komponente AMP:

  • AMP HTML: Ograničen skup HTML oznaka sa dodacima za AMP komponente.
  • AMP JS: JavaScript biblioteka za upravljanje učitavanjem resursa i interaktivnošću.
  • AMP Cache: Proksi mreža za keširanje i dostavljanje AMP stranica.

Primer upotrebe AMP:

<!doctype html>
<html amp lang="sk">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Primer AMP stranice</title>
    <link rel="canonical" href="https://example.com/obična-stranica.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>
      /* Ваши CSS стилови */
    </style>
  </head>
  <body>
    <h1>Здраво, AMP!</h1>
    <p>Ово је брза страница.</p>
    <amp-img src="/images/kitten.jpg" alt="Маче" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Предности AMP:

  • Брзина учитавања: Странице се учитавају веома брзо, посебно на мобилним уређајима.
  • Побољшани SEO: Google даје предност AMP страницама у мобилној претрази.
  • Побољано корисничко искуство: Брзо учитавање и глатко скроловање.

Недостаци AMP:

  • Ограничења у дизајну и функционалности: Не све HTML тагове и JavaScript функције су доступне.
  • Сложеност имплементације: Захтева одвојени развој или адаптацију постојећег садржаја.
  • Зависност од Google (у одређеној мери): AMP Cache је под контролом Google.

AMP се широко користи за новинске чланке, блогове и други садржај где је брзина учитавања критична на мобилним уређајима.

PredchádzajúceĎalej