Google AMP | Вступление

Опубликовано: 12 Апреля, 2022

Введение. Google AMP - это HTML-фреймворк с открытым исходным кодом, где AMP является аббревиатурой от Accelerated Mobile Pages. Он был создан Google, а сейчас разрабатывается проектом с открытым исходным кодом AMP. Он оптимизирован для мобильных веб-страниц и предназначен для ускорения загрузки веб-страниц.

Чтобы использовать Google AMP, вы должны иметь предварительные знания HTML, CSS и JavaScript. Рекомендуется изучить темы, упомянутые ранее, прежде чем начинать изучать Google AMP.

Официальный веб-сайт: https://amp.dev/

Официальная кодовая площадка: https://playground.amp.dev/

Зачем использовать AMP?

Что ж, любой пользователь вашего веб-сайта хотел бы, чтобы веб-сайт загружался быстро, а с другой стороны, чтобы веб-сайт управлял трафиком веб-сайта, Google AMP решает обе проблемы. Он запрограммирован таким образом, что не только загружает веб-сайт с высокой скоростью, но и управляет его трафиком.

Преимущества Google AMP:

  • Страницы Google AMP легкие и загружаются быстрее.
  • Google отдает приоритет страницам AMP в поиске Google, таким образом привлекая больше пользователей. Они перечислены в формате карусели вверху страницы.
  • Страницы Google AMP адаптивны и адаптируются к браузеру, что делает их удобными для мобильных устройств.

Недостатки Google AMP: как мы все знаем, ничто не является чисто преимуществами, и то же самое касается Google AMP. Они обладают следующими недостатками -

  • Издатель должен поддерживать две версии для своих страниц - amp и non-amp, что может увеличить объем хранилища.
  • Пользователь должен приложить дополнительные усилия для преобразования страниц без усилителя в amp. Поскольку amp не поддерживает пользовательский JavaScript или загрузку внешнего JavaScript.

Basic Program: To write a program in AMP you must use <html amp> or <html > tag in your code instead of <html> tag as when the browser reads this it understands that the following is an AMP code.

HTML

<!-- Doctype declaration is required. -->
<!DOCTYPE html>
  
<!-- This tells everyone that this is an 
    AMP file, `<html amp>` works too. -->
<html amp>
  
<head>
    <!-- The charset definition must be the first 
       child of the `<head>` tag. -->
    <meta charset="utf-8">
    <title> Hello World</title>
    <!-- The AMP runtime must be loaded as the
       second child of the `<head>` tag.-->
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
      
    <!-- AMP HTML files require a canonical 
        link pointing to the regular HTML. 
        If no HTML version exists, it 
        should point to itself -->
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/introduction/hello_world/index.html">
      
    <!-- AMP HTML files require a viewport 
        declaration. It"s recommended to 
        include initial-scale=1. -->
    <meta name="viewport" content=
        "width=device-width,minimum-scale=1,
        initial-scale=1">
      
    <!-- CSS must be embedded inline. -->
    <style amp-custom>
        h1 {
            color: forestgreen;
        }
    </style>
  
    <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
            }
        }
  
        @-o-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>
</head>
  
<body>
    <h1>Hello World!</h1>
</body>
  
</html>

Выход:

Этот вывод предназначен для iPhone 6/7/8.

РЕКОМЕНДУЕМЫЕ СТАТЬИ