Accelerated Mobile Pages (AMP) — технология, представленная корпорацией Google в 2015 году. Ее главной целью является ускорение загрузки сайтов на мобильных устройствах. В данной статье хотелось бы поделиться одним из способов внедрения технологии AMP страниц на примере сайта под управлением 1С-Битрикс.
Существует два способа реализации:
1. Если сайта у компании нет, его разработку на 1С-Битрикс можно сразу начать с применением всех рекомендаций и правил для AMP страниц. Но нужно быть готовым к тому, что данная технология накладывает значительные ограничения к некоторым нестандартным элементам сайта
2. Если сайт уже создан и давно работает можно либо создать отдельный шаблон, либо адаптировать существующий
В обоих случаях результатом выполненных работ будет сокращение количество отказов на сайте, благодаря увеличению скорости загрузки страниц на мобильных устройствах.
В случае работы с системой управления 1С-Битрикс есть ряд ограничений, с которыми сталкиваются разработчики.
Главной особенностью AMP страниц является запрет на подключение собственных скриптов и внешних файлов стилей. То есть от конструкции
$APPLICATION->ShowHead(false);
вам придется отказаться, так как она подключает скрипты и стили либо в шапке страницы, либо в конце шаблона. Основные скрипты с сайта ampproject должны подключаться в шапке напрямую, не средствами битрикса.
Ваши собственные стили должны загружаться на страницу напрямую, для этого удобно использовать следующую функцию, добавленную в файл /local/php_interface/init.php:
function BasIncludeFile($path)
{
if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path)) {
$test = str_replace("..", SITE_TEMPLATE_PATH, file_get_contents($_SERVER['DOCUMENT_ROOT'] . $path));
$test = str_replace(PHP_EOL, '', $test);
echo $test;
}
}
Как видно, дополнительно из файлов убираются переносы строк для экономии места. Использовать можно так:
<style amp-custom>
<?BasIncludeFile(SITE_TEMPLATE_PATH.'/build/css/style.min.css');?>
</style>
Далее главный вопрос, как сделать так, чтобы по адресу начинающемуся с /amp/ загружалась обычная страница, но уже собранная по стандартам AMP страниц. В .htaccess добавляем всего одну строку:
RewriteRule ^amp/(.*)$ /amp.php [L,NC]
Данное правило переадресовывает все запросы с нужным префиксом в адресе в файл amp.php, в котором мы можем сделать все необходимые приготовления. Если мы внедряем технологию на уже работающий сайт, будет удобно перед показом страницы пропускать контент через фильтры для замены всех тегов img на amp-img, iframe на amp-img и так далее.