Услуги
  • Проектирование и разработка сайтов
    • Разработка корпоративных сайтов
    • Индивидуальная разработка сайтов
    • Разработка интернет-магазинов
    • Лендинги и продающие страницы
    • Разработка сайтов на Tilda
    • Разработка сайтов на 1С-Битрикс
  • Реклама и продвижение
    • Настройка контекстной рекламы
    • SEO-продвижение
    • Медийная реклама
    • SMM-продвижение
    • Сквозная аналитика
    • Контент-маркетинг
    • Разработка баннеров
    • Аудит рекламных кампаний
    • Настройка таргетированной рекламы
    • Настройка E-mail рассылки
    • Яндекс.Дзен
    • Настройка рекламы в Яндекс.Директ
    • Настройка рекламы в Google Adwords
  • Сопровождение и развитие сайтов
    • Поддержка и улучшение сайта
    • Администрирование и мониторинг сайтов 24/7
  • Автоматизация продаж
    • Автоматизация бизнеса с помощью Битрикс24
    • Разработка чат-ботов
Компания
  • О Компании
  • Клиенты
  • Отзывы
  • Вакансии
Проекты
Магазин готовых сайтов
Отзывы
Клиенты
Блог
Контакты
Оставить заявку
Личный кабинет
+7 (495) 104-47-86
Заказать звонок
sale@4rome.ru
115054, Россия, Москва, Озерковская набережная, дом 50, стр. 1

249032, Россия, Обнинск, ул. Курчатова, д. 29, офис 303
  • Вконтакте
Веб-студия и интернет-агентство
Стратегия — Разработка — Продвижение
+7 (495) 104-47-86
Заказать звонок
Услуги
  • Проектирование и разработка сайтов
    • Разработка корпоративных сайтов
    • Индивидуальная разработка сайтов
    • Разработка интернет-магазинов
    • Лендинги и продающие страницы
  • Реклама и продвижение
    • Настройка контекстной рекламы
    • SEO-продвижение
    • Медийная реклама
    • SMM-продвижение
    • Сквозная аналитика
    • Контент-маркетинг
    • Разработка баннеров
    • Аудит рекламных кампаний
    • Настройка таргетированной рекламы
    • Настройка E-mail рассылки
    • Яндекс.Дзен
  • Сопровождение и развитие сайтов
    • Поддержка и улучшение сайта
    • Администрирование и мониторинг сайтов 24/7
  • Автоматизация продаж
    • Автоматизация бизнеса с помощью Битрикс24
    • Разработка чат-ботов
  • Магазин готовых сайтов
Кейсы
  • Интернет-магазины
  • Корпоративные сайты
  • Лендинги
  • Реклама и продвижение
Компания
  • О Компании
  • Клиенты
  • Отзывы
  • Вакансии
  • Вопрос-ответ
Блог
Отзывы
Клиенты
Контакты
    Услуги
    • Проектирование и разработка сайтов
      • Разработка корпоративных сайтов
      • Индивидуальная разработка сайтов
      • Разработка интернет-магазинов
      • Лендинги и продающие страницы
    • Реклама и продвижение
      • Настройка контекстной рекламы
      • SEO-продвижение
      • Медийная реклама
      • SMM-продвижение
      • Сквозная аналитика
      • Контент-маркетинг
      • Разработка баннеров
      • Аудит рекламных кампаний
      • Настройка таргетированной рекламы
      • Настройка E-mail рассылки
      • Яндекс.Дзен
    • Сопровождение и развитие сайтов
      • Поддержка и улучшение сайта
      • Администрирование и мониторинг сайтов 24/7
    • Автоматизация продаж
      • Автоматизация бизнеса с помощью Битрикс24
      • Разработка чат-ботов
    • Магазин готовых сайтов
    Кейсы
    • Интернет-магазины
    • Корпоративные сайты
    • Лендинги
    • Реклама и продвижение
    Компания
    • О Компании
    • Клиенты
    • Отзывы
    • Вакансии
    • Вопрос-ответ
    Блог
    Отзывы
    Клиенты
    Контакты
      • Услуги
        • Назад
        • Услуги
        • Проектирование и разработка сайтов
          • Назад
          • Проектирование и разработка сайтов
          • Разработка корпоративных сайтов
          • Индивидуальная разработка сайтов
          • Разработка интернет-магазинов
          • Лендинги и продающие страницы
        • Реклама и продвижение
          • Назад
          • Реклама и продвижение
          • Настройка контекстной рекламы
          • SEO-продвижение
          • Медийная реклама
          • SMM-продвижение
          • Сквозная аналитика
          • Контент-маркетинг
          • Разработка баннеров
          • Аудит рекламных кампаний
          • Настройка таргетированной рекламы
          • Настройка E-mail рассылки
          • Яндекс.Дзен
        • Сопровождение и развитие сайтов
          • Назад
          • Сопровождение и развитие сайтов
          • Поддержка и улучшение сайта
          • Администрирование и мониторинг сайтов 24/7
        • Автоматизация продаж
          • Назад
          • Автоматизация продаж
          • Автоматизация бизнеса с помощью Битрикс24
          • Разработка чат-ботов
      • Кейсы
        • Назад
        • Кейсы
        • Интернет-магазины
        • Корпоративные сайты
        • Лендинги
        • Реклама и продвижение
      • Компания
        • Назад
        • Компания
        • О Компании
        • Клиенты
        • Отзывы
        • Вакансии
        • Вопрос-ответ
      • Блог
      • Отзывы
      • Клиенты
      • Вопрос-ответ
      • Контакты
      • Магазин готовых сайтов
      Заказать звонок
      • +7 (495) 104-47-86
      sale@4rome.ru
      115054, Россия, Москва, Озерковская набережная, дом 50, стр. 1

      249032, Россия, Обнинск, ул. Курчатова, д. 29, офис 303
      • Вконтакте
      • Главная
      • Блог
      • Google Accelerated Mobile Pages

      Google Accelerated Mobile Pages

      Google Accelerated Mobile Pages
      13 Марта 2016


      До сих пор мобильный серфинг ощущается как что-то медленное, неуклюжее и неприятное. Сфера разработки мобильных сайтов растет и расширяется, поэтому появилась потребность в разработке формата страниц, который будет быстро загружаться, приносить прибыль владельцам и не будет тормозить работу мобильных устройств. Такой формат был анонсирован компанией Google в октябре 2015 года, он называется Google Accelerated Mobile Pages или Google AMP.

      Сайт проекта: www.ampproject.org

      Технология Google AMP призвана решить следующие задачи:

      • Облегчить мобильные страницы, сделать их общедоступными
      • Сделать их разработку более простой
      • Устранить различия между мобильными сайтами разного уровня
      • Разрешить проблемы монетизации сайтов из-за низкой скорости их загрузки

      В этой статье мы кратко опишем суть AMP технологии и рассмотрим ее подробнее с технической точки зрения.

      Как это работает



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

      Google Accelerated Mobile Pages

      Подробнее о технологии

      Google AMP — набор следующих технологий и инструментов: AMP HTML, AMP JS и Google AMP Cache.

      AMP HTML — это обычный HTML, содержащий в себе ряд ограничений для обеспечения адекватной производительности. Также AMP HTML включает в себя набор расширений для создания сложных компонентов страницы.

      AMP JS — JavaScript библиотека для обеспечения высокой производительности и скорости рендеринга. Стандартные веб-страницы содержат много JS-скриптов, которые замедляют загрузку. В AM-страницах используется только библиотека AMP, что делает страницу гораздо легче:

      1. Она берет на себя все заботы по быстрой отрисовке страницы и загрузке ресурсов. Все ресурсы становятся асинхронными и подгружаются по мере надобности. Если на странице 10 картинок, то загрузятся только те, которые влезают в первый экран, остальные — по мере прокрутки страницы.
      2. Имеется встроенный валидатор: если у вас есть страница в формате AMP, добавьте к ее адресу "#development=1" и запустится проверка страницы на соответствие спецификации AMP. Ошибки валидации можно увидеть, к примеру, открыв консоль DevTools в браузере Chrome. Подробнее о валидации страниц.

      Дополнительно могут подключаться модули для отображения настраиваемых компонентов вроде слайдеров, мобильного меню или виджетов twitter, facebook и instagram. Они написаны с акцентом на высокую производительность, поэтому их нужно использовать.

      Google AMP Cache — распределенная CDN для доставки AMP страниц. Она валидирует страницы и кеширует все ресурсы на них, чтобы потом быстро отдавать их клиентам. В кеш попадают только валидные страницы, не пренебрегайте валидацией.

      Разметка страницы

      Так выглядит разметка стандартной страницы AMP:

      <!doctype html>
      <html amp> (1)
      <head>
         <meta charset="utf-8">
         <link rel="canonical" href="hello-world.html">
         <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> (2)
         <style amp-boilerplate> (3)
      	/* стили страницы */
         </style> 
         <!-- библиотека скриптов AMP -->
         <script async src="https://cdn.ampproject.org/v0.js"></script> (4)
       </head>
       <body>
          Hello World!
      </body>
      </html>


      На что обратить внимание:

      1. Объявление AMP страницы — тег. Вместо amp можно использовать эмодзи-значок молнии
      2. Тег meta с объявлением "viewport" нужен для нормального отображения сайта на мобильных
      3. Тег style c атрибутом amp-boilerplate — все стили на странице должны быть объявлены именно в таком виде. Это делается для уменьшения количества запросов на странице — все стили здесь загружаются быстро.
      4. JS-библиотека AMP для подключения компонентов

      В процессе разработки страниц AMP советуем почаще заглядывать в консоль devTools — так меньше вероятность допустить ошибку и получить невалидный документ.

      Изображения

      В качестве примера использования AMP-тегов рассмотрим синтаксис вставки изображений:

      <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800">


      Важные моменты
      :

      1. Название тега меняется по сравнению с обычным HTML
      2. Тег не одиночный, его нужно закрывать
      3. Обязательно наличие атрибутов "width" и "height" (по стандартам w3c еще и "alt"). Так картинка заранее резервирует место на странице, поэтому после ее загрузки не происходит перерисовка страницы, она не дергается из-за появившейся картинки

      Остальные теги работают похожим образом, можно почитать о них в документации: www.ampproject.org/docs/reference/amp-ad.html

      Пример из жизни

      В качестве практической задачи мы в студии решили поэкспериментировать с нашим блогом. Теперь любая статья из нашего блога имеет AMP-аналог.

      Что нужно было сделать:

      1. Создать AMP-версию каждой страницы блога по адресу blog/название_страницы_блога/amp.
        Для удобства мы сделали один общий шаблон для каждой AMP-страницы
      2. Связать обе версии страниц при помощи специальных тегов link (о них дальше)
      3. Поправить ошибки валидации

      Шаблоны AMP

      Новый вид страниц AMP получился очень легким, одноколоночным, удобным для чтения:

      Пример статьи

      В будущем Google будет сам узнавать, есть ли у страницы amp-версия и предлагать ее пользователям мобильных устройств.

      Связь страниц

      Две версии страницы связаны друг с другом. На AMP-версии страницы ставится ссылка со специальным атрибутом rel на основную версию:

      <link rel="canonical" href="http://www.4rome.ru/blog/id32/" />


      На основной версии ставится ссылка на AMP-версию, rel атрибут уже другой:

      <link rel="amphtml" href="http://www.4rome.ru/blog/id32/amp/" />

      Исправление ошибок валидации

      Это большая задача — нужно отлаживать AMP версии страниц, методично исправляя все ошибки и несоответствия стандарту AMP.

      Важные моменты, с которыми я столкнулся:

      1. Для всех изображений нужно обязательно проставить "width" и "height"
      2. Для адаптивных изображений нужно проставить layout="responsive"
      3. Инлайн-стили через атрибут style запрещены, их нужно выносить вверх страницы или подключать отдельными файлами.

      Заключение

      Google AMP — отличный инструмент для облегчения страниц и выдачи только полезного контента на мобильных устройствах. Возможно, это еще один серьезный аргумент в конкурентной борьбе за пользователей мобильных интернет-магазинов и различных сервисов. В любом случае, попробовать и оценить Google AMP точно стоит. Ждём развития событий!

      Подписаться на
      рассылку

      Будьте в курсе последних новостей отрасли

      Подписаться
      (4) Hello World! \r\n\r\n\r\nНа что обратить внимание: \r\n- Объявление AMP страницы — тег. Вместо \r\namp можно использовать эмодзи-значок молнии \r\n- Тег meta с объявлением \"viewport\" нужен для \r\nнормального отображения сайта на мобильных \r\n- Тег style c атрибутом amp-boilerplate — все \r\nстили на странице должны быть объявлены именно в таком виде. Это делается для уменьшения количества запросов на странице — все стили здесь загружаются быстро. \r\n- JS-библиотека AMP для подключения компонентов \r\n\r\nВ процессе разработки страниц AMP советуем \r\nпочаще заглядывать в консоль devTools — так меньше вероятность допустить ошибку и получить невалидный документ. Изображения \r\n\r\nВ качестве примера использования AMP-тегов \r\nрассмотрим синтаксис вставки изображений: \r\n\r\n \r\n\r\n\r\nВажные моменты: \r\n- Название тега меняется по сравнению \r\nс обычным HTML \r\n- Тег не одиночный, его нужно закрывать \r\n- Обязательно наличие атрибутов \"width\" и \"height\" \r\n(по стандартам w3c еще и \"alt\"). Так картинка заранее резервирует место на странице, поэтому после ее загрузки не происходит перерисовка страницы, она не дергается из-за появившейся картинки \r\n\r\nОстальные теги работают похожим образом, \r\nможно почитать о них в документации: www.ampproject.org/docs/reference/amp-ad.html [ https://www.ampproject.org/docs/reference/amp-ad.html ] Пример из жизни \r\n\r\nВ качестве практической задачи мы в студии \r\nрешили поэкспериментировать с нашим блогом. Теперь любая статья из нашего блога имеет AMP-аналог. \r\n\r\nЧто нужно было сделать: \r\n- Создать AMP-версию каждой страницы блога \r\nпо адресу blog/название_страницы_блога/amp. \r\nДля удобства мы сделали один общий шаблон \r\nдля каждой AMP-страницы \r\n- Связать обе версии страниц при помощи \r\nспециальных тегов link (о них дальше) \r\n- Поправить ошибки валидации Шаблоны AMP \r\n\r\nНовый вид страниц AMP получился очень легким, \r\nодноколоночным, удобным для чтения: [ /im/stat_amp.png ] \r\n\r\nВ будущем Google будет сам узнавать, есть ли \r\nу страницы amp-версия и предлагать ее пользователям мобильных устройств. Связь страниц \r\n\r\nДве версии страницы связаны друг с другом. \r\nНа AMP-версии страницы ставится ссылка со специальным атрибутом rel на основную версию: \r\n\r\n \r\n\r\n\r\nНа основной версии ставится ссылка на AMP-версию, \r\nrel атрибут уже другой: \r\n\r\n \r\nИсправление ошибок валидации \r\n\r\nЭто большая задача — нужно отлаживать \r\nAMP версии страниц, методично исправляя все ошибки и несоответствия стандарту AMP. \r\n\r\nВажные моменты, с которыми я столкнулся: \r\n- Для всех изображений нужно обязательно \r\nпроставить \"width\" и \"height\" \r\n- Для адаптивных изображений нужно проставить \r\nlayout=\"responsive\" \r\n- Инлайн-стили через атрибут style запрещены, \r\nих нужно выносить вверх страницы или подключать отдельными файлами. Заключение \r\n\r\nGoogle AMP — отличный инструмент для облегчения \r\nстраниц и выдачи только полезного контента на мобильных устройствах. Возможно, это еще один серьезный аргумент в конкурентной борьбе за пользователей мобильных интернет-магазинов и различных сервисов. В любом случае, попробовать и оценить Google AMP точно стоит. Ждём развития событий!", "author": [ {"@type":"Person", "name":"Четвертый Рим"} ], "publisher": { "@type": "Organization", "name": "Компания Четвёртый Рим", "logo": { "@type": "ImageObject", "url": "https://4rome.ru/logo.png" } }, "url": "https://4rome.ru/blog/amp-google/" } ] }
      Все публикации

      Читать ещё

      Подписаться на рассылку
      Скрытые резервы роста продаж в секторе B2B
      Скрытые резервы роста продаж в секторе B2B
      21 Апреля 2022
      Почему интернет-магазин не продает и как с этим бороться. 5 способов повышения прибыли
      Почему интернет-магазин не продает и как с этим бороться. 5 способов повышения прибыли
      15 Марта 2022
      Почему конкуренты растут, а вы — нет:  16 причин
      Почему конкуренты растут, а вы — нет: 16 причин
      3 Февраля 2022
      Загрузить еще
      Назад к списку
      Услуги
      Кейсы
      Компания
      Блог
      Отзывы
      Клиенты
      Вопрос-ответ
      Контакты
      Магазин готовых сайтов
      Вакансии
      • Вконтакте
      +7 (495) 104-47-86
      Заказать звонок
      sale@4rome.ru
      115054, Россия, Москва, Озерковская набережная, дом 50, стр. 1

      249032, Россия, Обнинск, ул. Курчатова, д. 29, офис 303
      Подписка на рассылку
      Политика конфиденциальности
      © 2022 «Четвёртый Рим».
      Студия дизайна и интернет-агентство.
      Заказать звонок
      Написать сообщение
      Заполнить бриф