AMP версия сайта. Основы
Технология AMP (Accelerated Mobile Pages), разработанная Google, становится все более популярной. Мгновенное открытие страниц - это то, о чем мечтают пользователи и пытаются добиться разработчики. Наращивание мощностей серверов, переход на SPA (Single Page Applications), оптимизация языков программирования и фреймворков - все эти процессы преследуют глобально одну цель - ускорение. Скорость - одна из самых важных составляющих современного интернета.
Многое зависит от умения конкретных разработчиков сайта. Но технология AMP предоставляет возможность добиться отличных результатов практически на любом сайте. В этой серии статей мы вместе, шаг за шагом, будем разбираться с этой технологией. Узнаем, что такое AMP-страницы, зачем и кому они нужны, как реализовать AMP на своем сайте, какие возникнут при этом подводные камни.
В этот раз тестового проекта не будет. Мы создадим AMP-версию сайта для этого же блога - webdevkin.ru. Думаю, будет много интересного. Приступим.
Что такое AMP-страницы.
По-умному: вот ссылка на википедию (англ.).
По-простому: страницы особого типа, имеющие ряд особенностей:
1. пользуются повышенной лояльностью гугла в плане ранжирования.
2. в поисковой выдаче открываются практически мгновенно.
3. отличаются унифицированным дизайном, адаптированным специально под мобильные устройства.
Как это выглядит.
Вы наверняка видели AMP-страницы, если хоть раз заходили в гугл с телефона. Если не обращали внимания раньше, то наберите любой запрос в гугле прямо сейчас и присмотритесь к выдаче. Покажу на примере. В момент написания статьи прошло всего несколько часов после боя Мэйвезера с Макгрегором, и интернет до сих пор не может успокоиться. Загуглим "Мэйвезер Макгрегор" и в верхней части выдачи увидим такую картину.
В этом слайдере находится набор страниц с разных сайтов, в которых виден сайт-источник, картинка-превью, заголовок и дата новости. Обратите внимание на значок AMP в левом нижнем углу каждой новости. Но открываются они не на странице Вашего сайта, а в Google AMP Viewer-e. Вот так это выглядит.
Набор точек в верхней части экрана намекает, что это слайдер. Легкое движение пальца откроет AMP-страницу уже с другого сайта. Мгновенно. Ощущение, что мы листаем страницы в электронной книге. Вы не сможете добиться той же скорости, если будете открывать обычную, сколько угодно облегченную страницу с Вашего сайта.
За счет чего достигается такая скорость?
Первое. За счет кэширования на стороне гугла. При обходе Вашего сайта гугл ищет AMP-версии страниц и кэширует их у себя.
И второе. За счет строгого ограничения функционала AMP-страниц. Вы не сможете вломить десяток js-скриптов вроде jQuery и навесить кучу любимых плагинов-каруселей. Гугл четко регламентирует, что можно делать, а что нельзя. Это позволяет активно применять, например, lazy load и прочие штуки для максимально быстрой загрузки страниц.
Кому пригодятся AMP-страницы?
В первую очередь новостным сайтам, онлайн-газетам и блогам. С другой стороны, никто не запрещает создать AMP-версию, например, страниц продуктов в интернет-магазине. Не обязательно полностью реализовывать функционал магазина с каталогом, корзиной и прочим - достаточно создать страницу-приманку с общим описанием товара, которая приведет заинтересовавшегося пользователя уже на основной сайт.
Поэтому, если рассматривать AMP-страницы как дополнительное средство средство привлечь внимание, то AMP-версия будет полезна любому сайту.
Плюсы AMP-страниц для пользователей
1. Скорость открытия. Уже мало кто согласен ждать 4-5 секунд загрузки страницы
2. Симпатичное представление в поисковой выдаче
3. Более-менее универсальный дизайн, который не бесит, если только специально не постараться
Плюсы для владельцев сайтов
1. Благосклонность гугла к таким страницам
2. Как следствие, дополнительный трафик на сайт
Плюсы для разработчиков
1. Возможность изучить новую трендовую технологию
2. Разработка AMP-версий сайта пока еще ценится достаточно высоко, что особенно порадует фрилансеров
Оффтоп. Сколько стоит разработка AMP?
Недолгий поиск по сайтам фрилансеров выявил любопытные цифры.
От 30 тысяч рублей до 2,5 тысяч у.е. - во столько оценивают заказчики разработку AMP-версий сайта.
Возможно, у Вас другие сведения - будет интересно почитать в комментариях.
AMP-страницы с технической точки зрения
Они очень похожи на обычные html-страницы.
Первый взгляд на код не увидит ничего особо нового.
Но присмотревшись, Вы заметите несколько интересных вещей, вот некоторые из них
— привычные html-теги имеют префикс amp, например, amp-img
— нет подключенных привычных библиотек, jQuery, плагины-слайдеры и прочее
— css-стили прописаны прямо в коде страницы в специальном теге
— но при этом нет инлайн-стилей, вся верстка на классах
— но при этом у каждой картинки указываются размеры
— и еще множество мелких и на первый взгляд непонятных отличий
Во всем этом мы разберемся в следующих статьях.
Возможности AMP, что доступно
Может сложиться впечатление, что AMP-страницы это набор текстов и картинок, но это не так. Доступны видео, аудио, плагины соц. сетей (инстаграм, фейсбук, твиттер), рекламные блоки, аналитика, формы заказа и многое другое. Что-то из этого поддерживается штатно, что-то - с помощью внешних библиотек. Но не любых, а одобренных гуглом.
Конечно, этого не хватит для воплощения всех фантазий, которые придут в голову Вам и Вашим клиентам. Но AMP-страницы совсем не про это.
А про же все-таки AMP-страницы?
AMP-версия сайта - это не замена основной версии. И даже не замена мобильной версии. Это просто еще один способ отображения сайта на мобильных устройствах.
Способ, активно продвигаемый гуглом. А как мы знаем, что любит гугл, в конце концов придется полюбить и всем остальным. Поэтому хочется Вам этого или нет, когда-нибудь разработка AMP-версии станет такой же привычной необходимостью, как и адаптивная верстка, которая еще несколько лет назад казалась уделом упоротых хипстеров.
Пока еще засилья AMP не наблюдается. Но когда оно настанет, лучше быть к этому готовым.
Контент для AMP, где его брать?
Подозреваю, что для большинства сайтов это станет самой сложной проблемой при внедрении AMP. В идеале, контент для таких страниц должен быть ровно такой же, как и на основной версии сайта. Мы же не пишем в мобильных версиях что-то специфичное. Это тот же контент, только с другой подачей.
К этому нужно стремиться и в нашем случае. Другое дело, что не всегда существующий контент "ляжет" на AMP-версию. Например, у меня в блоге есть куски кода, комментарии, виджеты-опросы - не факт, что получится все воспроизвести в том же виде. Но если существующий контент не подходит, можно под AMP-версию подготовить урезанную версию основной страницы, а в конце сделать ссылку на нее. То есть завлечь посетителей посредством AMP, если человек заинтересуется, то перейдет уже на основной сайт.
Зачем тебе AMP в блоге?
Новый проект, новый материал для статей, новый интересный опыт. Признаться, я не рассчитываю, что внедрение AMP на webdevkin.ru приведет к какому-то качественному скачку вперед. Тем более, что с мобильников заходят всего 10% посетителей.
Тем не менее, какой-то профит для раскручивания блога все равно будет, так как гугл благодушно относится к этой теме. И конечно же, я не хочу изменять своему правилу: демонстрировать не просто куски кода, а то, как он реально работает. Если раньше я создавал под такие цели отдельный проект, вроде тестового интернет-магазина, то сейчас есть смысл экспериментировать прямо на живом сайте. И у читателей будет больше доверия к материалу статей, когда эксперименты проводятся не на кошках.
Каков план?
Создать AMP-версию сайта webdevkin.ru, при этом подробно описывая этот процесс на страницах блога. Сначала мы подготовим базовую страницу-контейнер с примитивным текстом и картинками. Потом узнаем, как рассказать о ней гуглу. Дальше постепенно начнем заполнять ее различными компонентами, узнаем их тонкости и особенности.
Подробности в следующих статьях.