Your Company
Вкусный портал

Почему вы должны использовать AMP вместе с PWA (для SEO) - Craftworkz

  1. Объясняя AMP и PWA
  2. Вот почему вы не должны использовать его для всех проектов
  3. Объединение AMP с PWA
  4. Что с (SSR) серверным рендерингом AMP?
  5. Мое личное мнение
(Мое личное мнение о выборе для AMP)

AMP (Ускоренные мобильные страницы) - это новое ключевое слово в мире Front End вместе с PWA (Progressive Web Application). AMP был приобретен, а PWA создан Google. Тем не менее, они не хотят, чтобы AMP ассоциировался с компанией, потому что это проект с открытым исходным кодом. В этой статье я попытаюсь объяснить, почему я буду использовать AMP в сочетании с PWA почти для каждого приложения, которое я делаю с этого момента.

Объясняя AMP и PWA

Нет ничего более раздражающего, чем ждать 15 секунд на плохом 3G / WIFI, чтобы прочитать статью менее чем за 10 секунд, открытую из любой поисковой системы. Ускоренные мобильные страницы теперь уже не так мобильны , новые HTML-элементы в сочетании с JavaScript поддерживают другие классические HTML5-элементы, используемые для ускорения загрузки вашей страницы. Эти компоненты предварительно созданы для использования вместе с CDN AMP. Так это просто HTML? Да, это просто HTML, поэтому вы больше не можете использовать JavaScript! Это то же самое, что вернуться к основам: вам просто нужно сделать свои веб-приложения на HTML и CSS без JavaScript! Он поддерживается Google, но вы не можете использовать Angular, React или какой-либо другой модный фреймворк;).

В то время как Прогрессивное веб-приложение используется для обновления всего вашего веб-приложения с помощью автономного кэширования, push-уведомлений, параметров манифеста,… чтобы дать пользователю более естественное ощущение приложения. Он предназначен для участия без необходимости загрузки всего собственного приложения на телефон. Если вы сомневаетесь в том, чтобы сделать ваше приложение нативным или гибридным, используйте PWA! Это будущее нативных и гибридных приложений! Вернуться к AMP сейчас!

(Источник: https://www.ampproject.org/ )

После того, как я следил за командой AMP более года, я должен был увидеть AMP-роуд-шоу в Лондоне. У меня на уме были два вопроса, и я отчаянно пытался их задать. Утром я увидел основные доклады различных сторонников разработчиков, а затем вопросы и ответы с некоторыми опытными разработчиками ирландских и британских издателей. Слыша, как они говорят о своих веб-приложениях, возникают вопросы, почему AMP был настолько особенным для них. Они стремились рассказать всем о коэффициентах конверсии, которые они получили благодаря использованию этой функции: время загрузки первой страницы сократилось, пользователи остались дольше. Чем больше они говорили о снижении загрузки первой страницы, тем больше у меня не было причины, по которой вам следует использовать AMP для загрузки первой страницы, а (возможно), а не второй или третьей!

Существует также причина, по которой они пригласили на сцену более одного издателя. Это потому, что статьи этих издателей попадают в Топ-карусель новостей Google. Эта карусель отображается, когда вы вводите ключевые слова новостной статьи в панель поиска Google. Разработчики этих статей объединяют AMP с функцией schema.org, которая приводит к выделенному элементу в карусели Топ новостей Google вместе с логотипом AMP справа от заголовка. Все эти статьи с логотипом AMP предварительно выбираются Google AMP Cache так что они супер быстрые. Страница предварительно кэшируется еще до того, как она показывается пользователю. Наряду со стабильной высотой страницы во время загрузки пользователь получает соответствующий вид в мгновение ока. Таким образом, загрузка страницы происходит быстро, и вы попали в топ рейтинга Google, отлично!

Google Top Desktop (слева) и мобильные устройства (справа) The Verge статья schema.org из поиска по самой большой батарее

Вот почему вы не должны использовать его для всех проектов

Один из моих вопросов был, был ли AMP полезен для создания самых быстрых целевых страниц в Интернете. Ответ - да, это полезно ... но есть некоторые ограничения. Во время этого мероприятия было много вопросов от аудитории о том, как использовать AMP для своего сайта. Команда AMP обслужила их честными ответами. «Должен ли я использовать AMP для своего сайта электронной коммерции?» Да! «А как насчет SEO?» Организована ли ваша страница с помощью Angular или React? Да! Тогда вы, возможно, не должны использовать AMP. Если это не так, это хорошо по причинам SEO! Но почему издатели используют это? Издатели на сцене не сказали об этом вслух, но они поддерживали два асинхронных веб-сайта: AMP-версию и не-AMP-версию своего веб-сайта. AMP-версия показывается прямо из поиска Google. Google предварительно выбирает AMP-сайты, поэтому ваш сайт (на мобильном телефоне) не отображается с ваших серверов. Это показано с их серверов, и URL будет выглядеть так: www.google.com/amp/www.your-website.com. Это не то, что вы хотите для вашего рейтинга Google! Итак, есть два сценария:

  • Возможно, у вас есть один веб-сайт, работающий только на AMP. Не нужно предпринимать какие-либо действия, просто разместите канонический URL-адрес , чтобы Google выбрал этот.
  • Вы также можете иметь второй веб-сайт с тем же контентом, работающим на страницах, отличных от AMP (для целей JavaScripts). Затем вы должны сообщить странице AMP, что канонический URL - это адрес без AMP, и наоборот. Поисковая система не будет индексировать версию AMP, но если вы используете ShadowDOM, она будет индексировать содержимое не-AMP-версии вашего сайта. Когда пользователь возвращается или делится URL-адресом, а не URL-адресом от Google, они запускаются из кэшированного (возможно, PWA) веб-приложения и кэшированного содержимого. Чрезвычайно важно установить канонический URL для правильного контента, чтобы Google мог получить его правильно.
  1. Это только HTML и CSS. Так что это быстро!
  2. Команда AMP имеет множество готовых компонентов, готовых к использованию. Не беспокойтесь, вы все равно можете сделать свой контент динамическим и получить JSON с помощью amp-state.
  3. Вы можете сделать это интерактивным на событиях щелчка, с amp-bind.
  4. Вы можете использовать POST-вызовы с помощью amp-form. После этого вы можете получить ваш контент, используя amp-live-list.
  5. Вы можете отслеживать каждый щелчок мыши с помощью amp-analytics.
  6. Вы даже можете создавать супер плавные анимации с помощью amp-animation.

Для некоторых разработчиков этого недостаточно. Они не могут выполнять сложные математические функции или объединять данные двух вызовов в одного наблюдателя. Но, в конце концов, вы должны подумать о пользователе, и он должен вернуться на вашу страницу! Поверьте, AMP делает разработку чище и проще!

Объединение AMP с PWA

Когда вы думаете о создании AMP-версии вашего сайта, вам не нужно использовать PWA для быстрой загрузки. Но если вы хотите использовать встроенные функции приложения, такие как автономное кэширование, push-уведомления,… вы можете добавить определенные элементы из Контрольный список PWA ,

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

Что с (SSR) серверным рендерингом AMP?

Команда AMP работала над усилитель-издатель-образец , но они прервали его, потому что он все еще использовал JavaScript (React). На роудшоу они пообещали, что приедут с (лучшим) решением для рендеринга на стороне сервера. Но для больших приложений просто не рекомендуется использовать AMP. Есть много возможностей ускорить загрузку вашей страницы без AMP.

Мое личное мнение

Я много писал об издателях, но вы можете использовать AMP для каждого веб-приложения. Это делает ваш сайт быстрым, и это то, чего мы все хотим. Я советую вам использовать AMP как можно больше для B2C, потому что это увеличивает коэффициент конверсии. С некоторым UX вы можете удовлетворить множество людей, приходящих из поисковой системы Google или с хостинга Cloudflare *. Но не используйте его для каждого веб-приложения. По моему мнению, это зависит от того, для кого вы его строите, для B2B или B2C. Если вы можете использовать его, не стесняйтесь взглянуть на AMP проекты вместе с PWA, чтобы поднять свой UX на новый уровень!

* Я ничего не писал о хостинге Cloudflare, он использует те же принципы, что и Google AMP Cache. Их CDN будет загружать ваш сайт быстрее из кэша, так же как и из поисковой системы. Узнайте больше о Cloudflare на https://amp.cloudflare.com/ ,

Так это просто HTML?
«Должен ли я использовать AMP для своего сайта электронной коммерции?
«А как насчет SEO?
» Организована ли ваша страница с помощью Angular или React?
Но почему издатели используют это?
Что с (SSR) серверным рендерингом AMP?

Новости

Подготовка к новогоднему корпоративу
Разумеется, вечеринки для сотрудников организовываются не только на Новый год, но они требуют меньше времени на подготовку и проходят не столь помпезно. Для того, чтобы устроить достойную новогоднюю вечеринку

Alcazar - официальный сайт концертного агента. Заказать выступление группу Alcazar на праздник, свадьбу, корпоратив в ProConcert.
Добро пожаловать на страницу шведской музыкальной группы. Группа «Alcazar»  - это шикарная творческая идея продюсера Александра Барда. В 1998 году музыкант решил создать новый интересный проект,

Организация и проведение корпоративных мероприятий и праздников в СПБ – event-агентство REMAR Group
Корпоративные праздники – это важный элемент налаживания взаимоотношений между сотрудниками фирмы, представителями различных отделений компании. Проведение подобных мероприятий подразумевает легкую, приятную,

Проведение юбилея - проведение юбилея 40-45 лет | Организация праздников и корпоративных мероприятий от «ClubTrade»
Близится очередная круглая дата? Предлагаем Вам отметить юбилей с нашей помощью. Специалисты « Clubtrade » подберут ведущего для Вашего праздника – интеллигентного мужчину или интересную даму в возрасте

Что надеть на новогодний корпоратив 2018


Саксофонист на свадьбу и праздник в Москве! Заказать саксофониста!
Сделать свадьбу или праздник романтичным, чувственным и совершенным Вам поможет красивое звучание саксофона. Саксофонист на встречу гостей или росписи, банкета — это одно из тех изысканных, музыкальных

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

Добро пожаловать в питерский Форт Боярд!
Помните программу Форт Боярд, которую 15 лет тому назад с нетерпением ждала большая часть телезрителей РФ? Сегодня ее трудно назвать особенно популярной, но соревнования, проводимые среди участников, не

Аренда кальяна на дом
Ваш отдых - наша работа!   О нас      Здравствуйте дорогие друзья! Организация ООО «Есть Кальян» Екатеринбург рады предложить вам следующие виды услуг относительно вашего отдыха. Отличным дополнением

Заказать выступление Дмитрия Нагиева на свадьбу, корпоратив или день рождения, юбилей. Узнать цену выступления Дмитрия Нагиева
Хотите, чтобы ваш праздник был ярким, незабываемым и очень интересным? Для этого достаточно воспользоваться работой профессионального артиста, желательно того, кого знает вся страна. Сейчас у каждого человека

Реклама

Календарь

Реклама

Copyright © 2016 www.j-operamini.b5bedf3d7