Sobes.tech
Интервиев Хелп
Ресурси
Припрема за интервју
Ресурси
Тражење посла
Ресурси
Правна
Назад на питања
Middle

Šta su AMP stranice?

sobes.tech АИ

Одговор од АИ

AMP (Accelerated Mobile Pages) је HTML оквир са отвореним кодом који је креирао Google за креирање брзих и одзивних веб страница које се добро приказују на мобилним уређајима.

Основни принципи AMP:

  • Ограничен скуп HTML тагова: Користи подскуп HTML-а, што убрзава парсирање и приказ странице.
  • Асинхроно учитавање ресурса: Скриптови, слике и други ресурси се учитавају асинхроно, без блокирања приказа главног садржаја.
  • Приоритет садржаја: Оптимизација је усмерена ка брзом учитавању видљивог садржаја.
  • Статичке величине елемената: Већина елемената има предефинисане величине, што смањује "скокове" садржаја приликом учитавања.
  • Користи AMP Cache: Трећа страна (нпр. Google) може кеширати AMP странице и достављати их из своје кеш меморије, што обезбеђује тренутно учитавање.

Кључне компоненте AMP:

  • AMP HTML: Ограничен скуп HTML тагова са додацима за AMP компоненте.
  • AMP JS: JavaScript библиотека за управљање учитавањем ресурса и интерактивношћу.
  • AMP Cache: Прокси мрежа за кеширање и достављање AMP страница.

Пример употребе AMP:

<!doctype html>
<html amp lang="sr">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Пример 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>
      /* Ваши 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 се широко користи за новинске чланке, блогове и други садржај где је брзина учитавања критична на мобилним уређајима.

ПретходноСледеће