Sobes.tech
Pomoc w rozmowie kwalifikacyjnej
Zasoby
Przygotowanie do rozmowy kwalifikacyjnej
Zasoby
Wyszukiwanie pracy
Zasoby
Prawo
Wróć do pytania
Middle

Czym są strony AMP?

sobes.tech AI

Odpowiedź od AI

AMP (Accelerated Mobile Pages) to otwarte ramy HTML stworzone przez Google do tworzenia szybkich i responsywnych stron internetowych, które dobrze wyświetlają się na urządzeniach mobilnych.

Podstawowe zasady AMP:

  • Ograniczony zestaw tagów HTML: Używa podzbioru HTML, co przyspiesza analizę i renderowanie strony.
  • Asynchroniciczne ładowanie zasobów: Skrypty, obrazy i inne zasoby są ładowane asynchronicznie, nie blokując renderowania głównej treści.
  • Priorytet treści: Optymalizacja skierowana jest na szybkie ładowanie widocznej treści.
  • Statyczne rozmiary elementów: Większość elementów ma z góry określone rozmiary, co zmniejsza "skoki" treści podczas ładowania.
  • Użycie AMP Cache: Zewnętrzna organizacja (np. Google) może buforować strony AMP i dostarczać je z własnego cache, zapewniając natychmiastowe ładowanie.

Kluczowe komponenty AMP:

  • AMP HTML: Ograniczony zestaw tagów HTML z dodatkiem własnych komponentów AMP.
  • AMP JS: Biblioteka JavaScript do zarządzania ładowaniem zasobów i interaktywnością.
  • AMP Cache: Sieć proxy do buforowania i dostarczania stron AMP.

Przykład użycia AMP:

<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Przykład strony 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>
      /* Twoje style CSS */
    </style>
  </head>
  <body>
    <h1>Cześć, AMP!</h1>
    <p>To szybka strona.</p>
    <amp-img src="/images/kitten.jpg" alt="Kotek" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Zalety AMP:

  • Szybkość ładowania: Strony ładują się bardzo szybko, szczególnie na urządzeniach mobilnych.
  • Lepsze SEO: Google preferuje strony AMP w wynikach wyszukiwania mobilnego.
  • Lepsze doświadczenie użytkownika: Szybkie ładowanie i płynne przewijanie.

Wady AMP:

  • Ograniczenia w projektowaniu i funkcjonalności: Nie wszystkie tagi HTML i funkcje JavaScript są dostępne.
  • Złożoność wdrożenia: Wymaga osobnego rozwoju lub dostosowania istniejącej treści.
  • Zależność od Google (w pewnym stopniu): AMP Cache jest kontrolowany przez Google.

AMP jest szeroko stosowany w artykułach informacyjnych, blogach i innych treściach, gdzie szybkość ładowania jest krytyczna na urządzeniach mobilnych.

PoprzedniaDalej