Дата публикации: 27/03/2019

Увеличение скорости загрузки сайта. Accelerated Mobile Pages (AMP)

Что такое Accelerated Mobile Pages, как с ними работать, как мы перевели сайт на AMP и что из этого получилось на практике.



Вступление

Пользователи любят, когда сайты загружаются быстро. 40% пользователей не дожидаются и уходят с сайта, если он загружается больше 3 секунд (по данным компании Akamai). Соответственно, поисковые системы тоже любят сайты, которые загружаются быстро. В феврале 2016 года компания Google сделала доступной для использования технологию, которая позволяет, по их словам, увеличить скорость загрузки сайта в 10 раз. Ее сразу подхватили такие гиганты, как Twitter, LinkedIn и Pinterest. Спустя 2 года более 25 млн сайтов использовали AMP. А у нас об этой технологии знают только адепты SEO и веб-разработки. В этой статье стараемся исправить эту ситуацию, разбираемся так ли все хорошо на самом деле и рассказываем, как применять Accelerated Mobile Pages на практике.

Что такое Accelerated Mobile Pages (AMP)

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

  • HTML - разметка страницы
  • CSS - внешний вид страницы
  • JS - поведение страницы

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

  • некоторые HTML-теги (например img) заменяются на AMP-HTML теги (например amp-img)
  • нельзя выносить код CSS в отдельные файлы, весь CSS прописывается в файле разметки страницы и не может превышать размер в 50 кбайт
  • на сайте применяется AMP JS-библиотека, нельзя использовать подключаемые js-библиотеки или свои js-скрипты
  • после индексации Google кэширует страницы сайта и воспроизводит со своих серверов (Google AMP Cache)

С учетом ограничений, изначально AMP страницы использовались для отображения простого контента - статьи, новости, страницы без сложных графических элементов. Однако с развитием технологии и в частности собственной JS библиотеки, стало возможным создавать более сложные и интересные решения. Как уместить весь CSS в 50 кбайт, какие мы можем использовать JS элементы (на самом деле все необходимые), как проверить валидность AMP? Расскажем далее.

Как уменьшить CSS?

Первый вопрос перед веб-мастером - как уместить весь CSS сайта в заданные рамки. Мы опишем ниже подход, который использовали сами. Он состоит из четырех частей:

  1. Комбинирование всех CSS файлов в один. Первым делом необходимо все css-библиотеки и собственные файлы скомпилировать в один файл. У нас эта функция выполнялась автоматически сборщиком файлов (мы используем webpack и laravel-mix), Вы можете воспользоваться любым офлайн или онлайн инструментом (например - shrinker.ch).
  2. Удаление из файлов неподдерживаемых директив (таких как !important). Полный список того, что нельзя использовать в CSS можно найти в официальной документации (тут). Их не так много, мы как правило просто удаляем все директивы поиском и заменой в текстовом редакторе.
  3. Минимизация файла. Это процесс, который убирает все пробелы и переносы строк, тем самым уменьшая суммарный вес. Мы используем для этих целей - cssminifier.com.
  4. Удаление неиспользуемого CSS. Для этого используется инстумент uncss-online.com. В одно окно копируется CSS, полученный на предыдущих стадиях. Во второе - HTML код страницы. Утилита убирает из CSS те стили, которые не применяются на странице и выдает вам результат, который можно использовать в AMP странице. Для каждой страницы нужно сформировать свой CSS.

Эти несложные шаги позволили нам адаптировать наши CSS стили под требования AMP. Вы без труда можете выполнить их самостоятельно.

Что делать с JavaScript?

Что из js-элементов нам может понадобиться на сайте? Давайте попробуем перечислить:

слайдер, всплывающие окна, боковая навигационная панель, анимация при скролле, выпадающие / раскрывающиеся списки

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

Кроме этого, был создан сайт ampbyexample.com, на котором Вы можете найти практические примеры применения этих элементов на практике.

Отдельно нужно сказать об аналитике - AMP “из коробки” позволяет интегрировать Google Analytics. Подключать другую аналитическую систему (например Яндекс.Метрика) мы не пробовали, но не исключаем и такую возможность.

Итоговый результат и влияние AMP на скорость загрузки

Что же получилось в итоге? Во-первых, представленный метод дал возможность пройти тест AMP на всех страницах и получить молнию в результатах поиска:

Во-вторых, мы увеличили показатели согласно Google Page Speed:

Что было:

Что стало:


Сайт действительно стал работать быстрее, в том числе по личным ощущениям. Вы можете самостоятельно проверить наш сайт, а также пройтись по страницам сайта и посмотреть на его скорость работы.

Влияние AMP на SEO

Ходит много слухов, что Google искусственно увеличивает ранжирование сайтов с AMP для популяризации технологии. Сложно судить об этом, но сайт точно получает дополнительные баллы за быструю загрузку. На данном этапе у нас пока недостаточно данных, чтобы дать подробный ответ. Мы следим за аналитикой и обязательно выпустим отдельную статью по этому поводу.

Заключение

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

Надеемся наш опыт поможет Вам ускорить ваши сайты и порадовать клиентов и пользователей качественным сервисом. Если у вас есть вопросы - мы будем рады на них ответить. Спасибо!

P.S. Если Вы хотите запустить AMP у себя на сайте, но не хотите делать это самостоятельно - наша команда будет рада предложить Вам свои услуги.

команда ilavista
ilavista

мы создаем эффективные сайты и веб-приложения для бизнеса

Анализируем бизнес клиента и в соответствии с этим создаем проекты с качественным дизайном и любым функционалом. Берем на себя маркетинг, SEO, социальные сети, контекстную рекламу, таргетинг. Закрываем все потребности бизнеса в интернете.

Подробнее о наших услугах