Курс по Wordpress

AMP — технология для быстрой загрузки сайта

что такое amp google Продвижение

Технология с открытым исходным кодом, получившая название Accelerated Mobile Pages (AMP), что в переводе означает «ускоренные мобильные страницы», призвана улучшить опыт взаимодействия с вебом. С ней становится возможным создание страниц, которые загружаются практически мгновенно. Учитывая что сегодня более 50% переходов из поиска приходится на мобильный трафик, эта технология скорее всего будет и дальше развиваться и внедряться на сайты. Технология разработана независимыми разработчиками и Google активно ее продвигает. К настоящему моменту внедрили AMP более чем на 1,5 миллиарда страниц.

Как работает технология AMP

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

AMP формат трансформирует стандартную веб страницу, урезая ее функционал до базового контента, в результате чего существенно увеличивается скорость загрузки такой страницы на мобильных устройствах.

Как это выглядит технически:

В создании AMP страниц участвуют 3 компонента:

  1. Google AMP HTML — HTML с некоторыми ограничениями по тегам в целях повышения производительности и дополнениями в виде AMP HTML компонентов. Все стили размещаются в теге <style amp-custom>. Отдельные параметры элементов — ширина, высота, адаптивность — прописываются в атрибутах.
  2. AMP JS библиотека для обеспечения быстрой загрузки контента. Именно она делает возможным использование кастомных тегов. Основным вкладом библиотеки в оптимизацию скорости загрузки является организация асинхронного поступления ресурсов из внешних источников, за счет чего элементы не препятствуют рендерингу друг друга. Библиотека также применяет «песочницу» для iframe, блокирует медленные CSS селекторы, выполняет предварительный расчет размеров каждого элемента на странице.
  3. AMP CACHE для предоставления кэшированных копий. Кэшируя АМП страницы, Google берет на себя функции CDN. Кэшированные копии загружаются мгновенно даже при небольшой скорости мобильного интернета. Все документы, файлы JS и картинки поставляются из одного источника, который использует HTTP 2.0 для большей эффективности. CACHE имеет встроенную систему валидации, проверяющую правильность работы страницы и ее независимость от внешних источников.

amp2

Для того, чтобы поисковые системы и другие платформы распознавали ускоренные страницы, применяются канонические ссылки. В html код AMP страницы, точнее в блок head, добавляется элемент link с атрибутом rel=»canonical» и ссылкой на полноценную версию контента. Если страница существует только в версии АМП, в link используется рекурсивная ссылка. Для страницы стандартного формата предназначен элемент link с атрибутом rel=»amphtml» и ссылкой на AMP версию. Благодаря подобным отметкам поисковики также не считают ускоренные версии дублями основных.

Пользователь может попасть на страницу с AMP несколькими способами:

  1. По ссылкам из поисковой выдачи. Пользователи имеют возможность просматривать кэшированный контент, источником которого является сервер Гугла, не покидая SERP.
  2. С помощью автоматической переадресации при переходе с мобильных устройств, которую настраивает владелец сайта, редактируя файл .htaccess. В этом случае загрузка контента производится с сервера, на котором расположен сайт.
  3. Добавив /amp/ в конце адресной строки браузера. Если сайт поддерживает AMP формат, ускоренные версии контента будут показаны даже при запросе со стационарного компьютера.

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

Чем АМП страницы могут помочь проекту:

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс "Идеальный сайт на Wordpress" и "Лендинг в Elementor", где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый - 2020 года. Берите пока свежий. Подробнее читайте по ссылке.
  • Повышение производительности и посещаемости. Было выявлено, что 50% пользователей отказываются от взаимодействия с контентом сайта, если его загрузка занимает более трех секунд. Сайты, от которых часто отказываются посетители, теряют позиции в выдаче. Скорость загрузки сайта используется Google при расчете индекса mobile-first, а значит отражается на ранжировании. Сайты и рекламные объявления, опубликованные в AMP формате, загружаются практически мгновенно.
  • Повышение трафика благодаря попадания в карусель выдачи Гугл. Карусель отображается перед основной выдачей поиска, что обеспечит дополнительные переходы на ваш сайт.

 

как выглядит карусель amp Google

Как выглядит карусель amp Google

Недостатки внедрения технологии:

  • Функциональность ускоренных версий сильно ограничена по сравнению с исходниками. По умолчанию в АМП версии не используются такие элементы, как: меню, сайдбар, предложения похожего контента, формы для добавления комментариев. Если какой-то из этих элементов жизненно важен для сайта, его придется добавлять самостоятельно или специальным плагином.
  • Яндекс Метрика и Google Analitics не получат сведения о посещении страниц AMP, если к стандартному коду отслеживания не добавить дополнительный. Это можно сделать, применив плагин, или вручную.
  • Дизайн версий в формате АМП существенно проигрывает оформлению обычных страниц. Если с мобильного устройства сайт не покажется пользователю привлекательным, это оттолкнет от посещения и десктопной версии.
  • В ускоренном формате не поддерживаются виджеты соцсетей.
  • При попадании АМП страниц в карусель Google может снизиться их посещаемость, так как пользователи будут просматривать кэшированную копию непосредственно в SERP.

Какие типы сайтов выиграют от применения AMP

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

  1. Новостные порталы
  2. Интернет-проекты, основанные на формате публикаций: блоги, «отзовики», сайты с рецензиями
  3. eCommerce

Для контентных проектов это выгодно тем, что их страницы попадут в блок «карусель», который Google выводит в самом верху поисковой выдачи, ускоренные версии могут способствовать повышению трафика сайта. Пользователь, которому понравился кэшированный контент, с большой вероятностью выполнит переход на сайт.

Зачем интернет-магазинам использовать ускоренные версии? В Google считают, что скорость загрузки сайта и конверсия прямо пропорциональны.

AMP - технология для быстрой загрузки сайта

Как использовать ускоренные мобильные страницы на сайте

Существует 2 варианта: Использовать готовый шаблон с функцией AMP и прикрутить функцию с помощью плагина

Подборка готовых шаблонов с AMP:

Шаблоны Magento — один из лидеров категории eCommerce для создания интернет-магазинов:

1. Magetique — самая популярная многоцелевая тема Magento 2 с 5-ю демо внутри: Запчасти, Мебель, Нижнее белье, Велосипеды и комплектующие, Медицинское оборудование.

AMP - технология для быстрой загрузки сайта

2. Fashions/ash — интернет-магазин модной одежды. Выполнен в стиле минимализм.

minimalism shop

3. Mobillaso — интернет-магазин электроники

estore theme

4. Illin.co — инструменты

repare magento

5. Jewelrix — продажа ювелирных украшений

AMP - технология для быстрой загрузки сайта

6. f2 — модный бутик

шаблон сайта онлайн магазина

Шаблоны WordPress — идеальный вариант для блога и новостного сайта:

1. Jannah — шаблон для новостника

вордпресс тема с амп

3. Soledad — шаблон для личного блога. 2000+ демо главной страницы. Точно найдете вариант для себя.

AMP - технология для быстрой загрузки сайта

Готовые плагины для CMS:

Самые популярные CMS подготовили бесплатные и платные плагины для внедрения на сайт АМП Гугл технологии. Стоит отметить, что некоторые платформа требуют наличия валидной разметки Schema.org для каждой страницы сайта.
  1. У WordPress для создания ускоренных страниц служит плагин AMP. После установки требуется его активация и добавление редиректов в .htacess. Плагин не обладает инструментами для дополнительной настройки оформления и функционала страниц, поэтому многие используют его совместно с надстройкой AMP for WP.
  2. В Drupal поддержка технологии АМП возможна благодаря AMP модулю, теме и HTML библиотеке. Ускоренные страницы становятся доступны при добавлении в url GET запроса «?amp» .
  3. Для создания ускоренных версий на Joomla существует бесплатное расширение wbAMP в формате Community Edition, за полную версию которого нужно платить. Возможностей бесплатной версии достаточно, чтобы настроить базовый внешний вид сайта.

Подборка по теме: 20 крутых адаптивных шаблонов для сайта →

Заключение

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

Заказать сайт
Поделитесь в соцсетях? Благодарю ✌
Илья Чигарев

Привет. Меня зовут Илья и я автор блога. Люблю путешествия, веб-дизайн и компьютерные игры. Всегда рад новым знакомствам. Веду блог, где рассказываю все секреты и фишки, которые мне принесли результат в онлайн маркетинге.

Оцените автора
( 1 оценка, среднее 5 из 5 )
Добавить комментарий

Отправляя данную форму вы соглашаетесь с политикой конфиденциальности сайта

Получите крутые бонусы бесплатно!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: