Расширения

Обзор JAmp. AMP-страницы в Joomla 3

  • Тип – плагин Joomla 3 для создания AMP-страниц.

 

 

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

Технология Google AMP

AMP (от англ. accelerated mobile pages) – технология ускоренных мобильных страниц за счёт применения быстро визуализируемого статического содержимого. В общем можно сказать что AMP состоит из трёх частей:

  1. AMP HTML – HTML разметка с некоторыми ограничениями для повышения надёжности работы и некоторыми расширениями для создания содержимого, выходящего за пределы базовой разметки HTML. То есть, на AMP-страницах можно применять не все HTML-теги и атрибуты. Это увеличивает скорость отрисовки страниц, но при этом ограничивает возможности представления контента.
  2. Библиотека AMP JS – обеспечивает быструю визуализацию страниц AMP HTML.
  3. Кэш Google AMP – используется для предоставления страниц AMP HTML. То есть, ускоряет доставку содержимого страниц на устройства пользователей за счёт Google CDN (сеть доставки контента).

Подробнее можно прочесть на официальном сайте технологии.

Другими словами, AMP – это технология создания облегчённых страниц сайта для максимально быстрого их отображения на мобильных устройствах. Облегчение достигается за счёт ограничений на использования HTML, CSS и JS.

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

  1. Выделение в результатах поисковой выдачи Google для мобильных устройств. К обычному снипету добавлены картинки страниц и иконка AMP, а также они выводятся в отдельном блоке. Это хорошо для SEO.
  2. Увеличение скорости загрузки страниц. Это хорошо для SEO и опыта взаимодействия пользователя с сайтом (UX).
  3. Код, разрешаемый для использования на AMP-страницах, минимизирует вероятность различий в отображении на разных устройствах и браузерах. Скажем, повышается кроссбраузерность страниц.

Недостатки AMP.

  1. Ограниченность в применении HTML, CSS и JS.
  2. Необходимы дополнительные расширения для реализации этой технологии.
  3. Поддерживается не всеми поисковыми системами.

Примечания.

  1. На 20.03.2017 в русскоязычной поисковой выдаче Google я не смог найти пример отображения AMP-страниц. Пока только в англоязычном сегменте.
  2. Если Google не найдёт достаточное число AMP-страниц, релевантных введённому запросу, то такие карточки показаны не будут.

Каким сайтам нужен AMP?

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

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

Поддержка.

По состоянию на май 2016 AMP поддерживается такими браузерами: Chrome, Firefox, Edge, Safari и Opera. Плюс, такие мобильные браузеры, как «стандартный» браузер в Android 4.0, Chrome 28 и более новой версии.

Проверяя свой сайт Didzhej.kh.ua, где протестировал AMP, я не заметил проблем на таких браузерах:

  • Штатный браузер Android 2.2.2 (смартфон, HTC Desire A8181).
  • Штатный браузер Android 4.1.1 (планшет, WEXLER.TAB 7iD).
  • Google Chrome 57.0.2987.110 (ПК, Windows 10 х64).
  • Internet Explorer 11.953.14393.0 (ПК, Windows 10 х64).
  • Microsoft Edge 38.14393.0.0 (ПК, Windows 10 х64).
  • Mozilla Firefox 52.0.1 (32-бит) (ПК, Windows 10 х64).
  • Opera 43.0.2442.1144 (PGO) (ПК, Windows 10 х64).
  • Яндекс.Браузер 17.3.1.840 (ПК, Windows 10 х64).

Справочная информация.

Опыт с Joomla AMP

Внедрил AMP на одном из своих проектов Didzhej.kh.ua. К URL-адресам страниц нужно добавить «/amp» (без кавычек). Вот несколько примеров:

  • http://didzhej.kh.ua/skolko-stoit-didzhej/amp
  • http://didzhej.kh.ua/otzyvy/amp
  • http://didzhej.kh.ua/dopolnitelnye-uslugi/amp
  • http://didzhej.kh.ua/obratnaya-svyaz/amp

Тестировал в Joomla 3.6.5, JAmp 1.4.2. Основной шаблон сайта – RSBrixton 1.0.20 (с изменённой таблицей стилей).

Были найдены следующие проблемы\особенности.

  1. Нет поддержки стандартной мультиязычности Joomla.
  2. Ссылка на основную версию сайта, внизу страницы. Пока она отображается только на английском.
  3. Для перевода на разные языки надписи об авторских правах в нижней части страниц пришлось воспользоваться переопределением констант в менеджере языков Joomla. Немного подробнее об этом можно прочесть тут.
  4. Значения тега описания AMP-страницы «meta itemprop=description content=», к сожалению, не подтягивается из тега мета-описания обычной страницы «meta name=description content=».
  5. При проверке, как мои AMP-страницы могут отображаться в результатах поисковой выдачи, выявил, что рекомендованные размеры изображений для Изображение логотипа издателя (600х60 пикселей) и Изображение страницы по умолчанию (696 пикселей по ширине) некорректно отображаются. Что немного странно, так как эти размеры заявлены в документации Google. Опытном путём подобрал такие размеры: Изображение логотипа издателя (160х16 пикселей) и Изображение страницы по умолчанию (232х130 пикселей). Возможно, ситуация связана с тем, что проверка была не в «живой» поисковой выдаче, а в «тестовой». Тестировал в сервисе проверки AMP-страниц Google. На странице с результатами проверки есть ссылка «Просмотреть в поиске».Для главной страницы сайта Didzhej.kh.ua используется стиль шаблона без отображения области контента. Там только модули. Так вот для этой страницы JAmp не создал AMP-версию. Если пользователь, находящийся на AMP-странице, нажмёт в меню на пункт «Главная», то он перейдёт на обычную версию страницы (но, естественно, с адаптивным дизайном).
  6. Форма, позволяющая отправить вопрос, размещённая на разных страницах сайта, не отображается. Она сделана при помощи компонента RSForm Pro. Также не отображается форма на странице контактов, которая сделана при помощи стандартного компонента контактов Joomla (com_contact). Возможно, если бы сайт работал на протоколе HTTPS, то с формами можно было бы что-то придумать (требования технологии AMP).
  7. На странице контактов, которая сделана при помощи стандартного компонента контактов Joomla (com_contact), вместо адреса электронной почты (в контентной части страницы) отображается надпись: «Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.». Как альтернативу, я добавил адрес и телефон на каждую страницу в верхнюю и нижнюю её часть (отобразил там модули).
  8. Иконки адреса, телефонов и так далее, на странице контактов, стали отображаться в виде «стандартных», а не красивых из шаблона.
  9. Шаблон сайта с анимацией и иконками был заменён на более «аскетичный».

Проблемы №1-4 связаны с самим плагином JAmp. О них я написал разработчику. Думаю, что в новых версиях это будет исправлено. 24.03.2017 уже был  доступен для загрузки JAmp 1.4.3. Возможно, в нём была исправлена часть проблем.

Все остальные проблемы\особенности связаны непосредственно с ограничениями самой технологии AMP.

Приведу пример теста скорости разных версий одной и той же страницы сайта.

  1. «Не AMP». Обычная страница сайта – http://didzhej.kh.ua/skolko-stoit-didzhej.
  2. «AMP». AMP-страница сайта, подгружаемая с хостинга сайта – http://didzhej.kh.ua/skolko-stoit-didzhej/amp.
  3. «Google AMP». AMP-страница сайта, подгружаемая с серверов кэша Google AMP – https://cdn.ampproject.org/c/didzhej.kh.ua/skolko-stoit-didzhej/amp.

 

Страница\Тест

Не AMP

AMP

Google AMP

Webpagetest.org

Время первого байта (FBT) – A

Keep-alive – C

Сжатие пакетов – A

Сжатие изображений – C

Кэширование статического контента – С

Эффект от CDN – Нет

Первый просмотр – 8,089 с.

Повторный просмотр – 3,485 с.

Время первого байта (FBT) – A

Keep-alive – A

Сжатие пакетов – A

Сжатие изображений – A

 Кэширование статического контента – F

Эффект от CDN – Нет

Первый просмотр – 2,473 с.

Повторный просмотр –  1,968 с.

Время первого байта (FBT) – D

Keep-alive – A

Сжатие пакетов – A

Сжатие изображений – A

 Кэширование статического контента – F

Эффект от – Да

Первый просмотр – 2,233 с.

Повторный просмотр – 2,184 с.

Google PageSpeed Tools

Для мобильных – 79

Для компьютеров – 92

Для мобильных – 88

Для компьютеров – 94

Для мобильных – 90

Для компьютеров – 96

GTmetrix

PageSpeed Score – 93%

YSlow Score – 79%

Полное время загрузки – 5,1 с.

PageSpeed Score –97%

YSlow Score – 89%

Полное время загрузки – 3,4 с.

PageSpeed Score –98%

YSlow Score – 95%

Полное время загрузки – 2,8 с.

Pingdom Website Speed Test

Оценка производительности – 73

Время загрузки – 0,838 с.

Быстрее чем 92% протестированных сайтов

Оценка производительности – 84

Время загрузки – 0,576 с.

Быстрее чем 96% протестированных сайтов

Оценка производительности – 87

Время загрузки – 0,132 с.

Быстрее чем 100% протестированных сайтов

 

В статье «Оптимизация Joomla по рекомендациям Page Speed Insights» приведён ряд советов для реализации рекомендаций Google по ускорению сайта. Причём, конкретно для Joomla. А в статье «Обзор JCH Optimize Pro 6. Ускорение Joomla» Вы новый тест (13.12.2020) разных инструментов оптимизации скорости.

Приведу пару сводных графиков по количественным показателям сайта из таблицы выше.

Google AMP
Google AMP
Технология Google AMP
Технология Google AMP

Как видите, почти во всех «тестирующих системах» и почти по всем показателям, AMP-страницы превосходят обычные страницы. По степени оптимизации примерно на 10%. А по скорости загрузки, в среднем, они на 30% быстрее.

Учитывая, что это единичный случай, делать выводы о всей технологии некорректно, но примерное впечатление составить можно.

Настройки тестов:

  • Webpagetest.org. Местоположение тестового сервера – Варшава (Польша). Браузер – Chrome.
  • Pingdom Website Speed Test. Местоположение тестового сервера – Стокгольм (Швейцария).

Внизу страницы Вы сможете найти отчёты о тестировании разных страниц в GTmetrix.

Тестируемый сайт расположен на общем хостинге компании «Хостинг Украина». Тарифный план «Мастер SSD» (ниже указана конфигурация аккаунта именно для конкретного сайта):

  • SSD диски.
  • PHP 5.6.
  • PHP memory_limit 256 Мб.
  • HTTP/2.
  • Общий IP-адрес.
  • Кэширование статических файлов (AVI, BMP, PNG, CSS, DOC, GIF, HTM, HTML, ICO, JPEG, JPG, JS, MP3, SWF, TXT, XLS, ZIP, WML, WMLC, WMLS, WMLSC, WBMP, FLA, FLV, XML, MPG, MPEG, PDF, WOFF, EOT, OTF, SVG, TTF, WOFF2, DOCX, XLSX, PPT, PPTX, WEBP, MP4).
  • OPcache 64 Мб.

Средствами панели управления хостингом были активированы такие настройки оптимизации:

  • Объединять все скрипты JavaScript в один файл.
  • Объединять все стили CSS в один файл.
  • Переместить стили CSS перед JavaScript скриптами.
  • Предварительный резолвинг DNS.
  • Минимизировать JavaScript.
  • Минимизировать CSS.
  • Оптимизировать CSS в атрибутах style.
  • Отложенная загрузка изображений.
  • Объединять пробелы.
  • Переместить CSS в head.
  • Удалять лишние кавычки.
  • Переместить небольшие внешние CSS в HTML.
  • Переместить небольшие внешние JavaScript в HTML.
  • Оптимизировать URL в атрибутах href и src.
  • Согласовать META теги с HTTP заголовками.
  • Расширить кеширование изображений.
  • Расширить кеширование JavaScript.
  • Расширить кеширование CSS.

Сам тестовый сайт тоже оптимизирован:

  • Отключены лишние расширения.
  • Сжаты изображения при помощи FileOptimizer64.
  • Компонент кэширования JotCache. Кэширование в файл.

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

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

На этом сайте есть контакты и информация обо мне. На нём Вы найдёте примеры моих работ, а также перечень и цены предоставляемых услуг.

 

Полезные ссылки:

Скачать файл Описание
zip Отчёты Webpagetest.org Более подробные отчёты по скорости загрузки сайта