в

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

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


трафик на сайт

7 мин 299

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

Как работает разработка AMP

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

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

Как это смотрится на техническом уровне:

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

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

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 тыщ за месяц и в курсе я выложил всю технологию как созодать такие веб-сайты. Подробнее читайте по ссылке.

  • Увеличение производительности и посещаемости. Было выявлено, что 50% юзеров отрешаются от взаимодействия с контентом веб-сайта, если его загрузка занимает наиболее 3-х секунд. веб-сайты, от которых нередко отрешаются гости, теряют позиции в выдаче. Скорость загрузки веб-сайта употребляется Гугл при расчете индекса mobile-first, а означает отражается на ранжировании. веб-сайты и маркетинговые объявления, размещенные в AMP формате, загружаются фактически одномоментно.
  • Увеличение трафика благодаря попадания в карусель выдачи Google. Карусель отображается перед главный выдачей поиска, что обеспечит доп переходы на ваш веб-сайт.

 

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

Как смотрится карусель amp Гугл

Недочеты внедрения технологии:

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

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

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

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

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

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

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 подготовили бесплатные и платные плагины для внедрения на веб-сайт АМП Google технологии. Необходимо отметить, что некие платформа требуют наличия валидной разметки Schema.org для каждой странички веб-сайта.

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

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

Заключение

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

Заказать сайт

Источник


трафик на сайт

Автор

Пошаговая SEO оптимизация WordPress

Пошаговая SEO оптимизация WordPress – что сделать перед продвижением

Как заработать в интернете 2022: 3 способа на $2500 в месяц без вложений

Как заработать в интернете 2022: 3 способа на $2500 в месяц без вложений