Оптимизация сайта на 1С-Битрикс под Google Page Speed

Здравствуйте уважаемые клиенты и посетители нашего сайта. Сегодня мы опубликовали обновление 1.0.2 для нашего готового решения prymery.auto, на примере которого углубились в оптимизацию сайта под требования google page speed. В интернете уже довольно много информации по данной теме, но мы пытаемся собрать информации на основе своего опыта и будем постоянно обновлять данный раздел, для предоставления самой актуальной информации для своих клиентов.

Начнем с того, что производительность и скорость загрузки - больная тема для большинства владельцев сайтов на 1С-Битрикс, кто-то покупал готовое решение, кто-то разрабатывал сайт с 0, но почти у всех одни проблемы, а последние лет 5 большую популярность набирает google page speed, которые показывает "слабые" места сайта в плане разработки.

Как говорят и сами представители компании, это не правила, которые должны быть обязательно выполнены на каждом сайте, а больше рекомендации, но с каждым годом на этот сервис обращает внимание все больше людей.

Заглушки для Google Page Speed

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

Оптимизация с помощью сторонних модулей

Для сайтов на 1С-Битрикс есть множество готовых модулей, которые предлагают автоматизировать процесс оптимизации сайта под Google Page Speed, некоторыми модулями мы пользовались лично на своих проектах и даже рекомендовали клиентам, но от простой установки результат будет минимальным, также требуется настройка сервера под данный модуль и конечно же, нужно понимать, что все проблемы модули не могут решить.

Оптимизация в ручном режиме

Т.к. мы занимаемся разработкой готовых решений, нам требовалось какое-то собственный механизм оптимизации сайтов, до оптимизации результаты были в красной/желтой зоне, примерно 30 баллов мобильная версия и 50 баллов десктопная версия.

1. Проверка хостинга/сервера на оптимальность

Первым делом проверяем на каком хостинге размещен сайт, подходит ли тариф, на котором размещен сайт для платформы 1С-Битрикс. Для Битрикса хостеры выделяет отдельные тарифы, т.к. платформа требует большей производительности.

Желательно для сайта взять тариф для платформы на 1С-Битрикс, но скажем сразу, что у нас есть собственные проекты, которые размещены на тарифах для обычных сайтов и на них получается достигать достойных результатов оценки по google page speed.

2. Проверяем платформу 1С-Битрикс

Первым делом проверяем сайт на ошибки, через "Проверку системы" в разделе Настройки -> Настройки продукта -> Инструменты -> Проверка системы

Если ошибок в предыдущем пункте не выявлено, то уделяем внимание на обновления платформы, если есть обновления и возможность (активность лицензии) обновиться, то нужно это сделать, предварительно создав резервную копию сайта, желательно, в облаке или на хостинге. Объясним, почему акцентируем внимание, в дальнейшем необходимо будет использовать конвертацию изображений в webp, это описывается в статье ниже, а для этого необходима будет библиотека GD и PHP 7.3. Обратим внимание, что на некоторые серверах, как пример, у Таймвеба, минимальная версия php ограничена на 7.2. (информация на 09.02.2021), поэтому данный вопрос с работой данной библиотеки и версией php можно уточнить в панели управления вашего хостинга.

Также у Битрикса есть инструменты для проверки и оптимизации БД, это хороший инструмент, но описывать его в рамках данной статьи мы не будем, вся информация о данном механизме есть в официальной документации.

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

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

Данная ошибка решается двумя действиями: а) В шаблоне сайта, в файле header.php размещаем загрузку шрифта, перед загрузкой стиля его подключения, обязательно с атрибутом preload

На скриншоте ниже приводим пример подключения шрифтов с атрибутом preload через ядро d7. Перед вызовом обязательно подключается use Bitrix\Main\Page\Asset;

Asset::getInstance()->addString('<link rel="preload" as="font" href="'.SITE_TEMPLATE_PATH . '/assets/fonts/Montserrat-Bold.woff" type="font/woff" crossorigin="anonymous">');
    Asset::getInstance()->addString('<link rel="preload" as="font" href="'.SITE_TEMPLATE_PATH . '/assets/fonts/Montserrat-Medium.woff" type="font/woff" crossorigin="anonymous">');
    Asset::getInstance()->addString('<link rel="preload" as="font" href="'.SITE_TEMPLATE_PATH . '/assets/fonts/Montserrat-Regular.woff" type="font/woff" crossorigin="anonymous">');
    Asset::getInstance()->addString('<link rel="preload" as="font" href="'.SITE_TEMPLATE_PATH . '/assets/fonts/Montserrat-SemiBold.woff" type="font/woff" crossorigin="anonymous">');

После настройки предварительной загрузки шрифтов, остается только прописать font-display: swap; в подключение шрифта через @font-face, пример на скриншоте ниже.

@font-face {
	font-family: 'Montserrat-Bold';
	src: url('../fonts/Montserrat-Bold.eot');
	src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/Montserrat-Bold.woff') format('woff'),
	     url('../fonts/Montserrat-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    font-display: swap;
}

После данных манипуляций, должны увидеть данный пункт в разделе "Успешные аудиты" на странице с оценкой google page speed.

4. Задайте правила эффективного использования кеша для статических объектов

Данная ошибка решается проще всего (если у вас на хостинг Таймвеб). Проверяли на разных хостингах и серверах, в основном решается установкой следующих правил кеширования в файле .htaccess

 ExpiresActive On
 #кэшировать флэш и изображения на одну неделю
 ExpiresByType image/x-icon "access plus 30 days"
 ExpiresByType image/jpeg "access plus 30 days"
 ExpiresByType image/png "access plus 30 days"
 ExpiresByType image/webp "access plus 30 days"
 ExpiresByType image/gif "access plus 30 days"
 ExpiresByType application/x-shockwave-flash "access plus 30 days"
 #кэшировать css, javascript и текстовые файлы на одну неделю
 ExpiresByType text/css "access plus 7 days"
 ExpiresByType text/javascript "access plus 7 days"
 ExpiresByType application/javascript "access plus 7 days"
 ExpiresByType application/x-javascript "access plus 7 days"
 #кэшировать html и htm файлы на один день
 ExpiresByType text/html "access plus 1 day"
 #кэшировать xml файлы на десять минут
 ExpiresByType application/xhtml+xml "access plus 10 minutes"

Если же у вас хостинг Таймвеб, то вам ничего не остается, как переехать на vds данного хостинга, либо поменять хостинг или просто пропустить данную ошибку.

5. Устраните ресурсы, блокирующие отображение

Данная ошибка чаще всего заключается в том, что на сайте есть подгрузка скриптов или стилей со сторонних сайтов. Вы увидите данный пункт, если у вас установлена Яндекс.Метрика или онлайн-консультант, например, Jivosite. В этом нет ничего плохого, что вы используете данные сервисы, и подгружаются они чаще всего асинхронно, но Google снимает за это баллы. Общались с технической поддержкой Jivosite, на предмет того, можно ли вынести скрипт их онлайн чата к себе на сервер, чтобы он мог закешироваться, но тут существует такая проблема, что код скрипта может обновляться и тогда уже необходимо реализовывать какой-то механизм, которые бы регулярно обновлял скрипт того или иного виджета у вас на сервере. Эта методика имеет право на жизнь, но она очень затратна в плане время, поэтому желательно минимизировать количество сторонных виджетов и скриптов или подключать их только на нужных страницах.

6. Настройте подходящий размер изображений

Если вы видите данную ошибку на своем сайте, то скорей всего вы загружаете изображения гораздо большего размера, чем используется на сайте. Идеально загружать изображения нужного размера и перед этим оптимизировать через сервис iloveimg или аналогичные сервисы, мы рекомендуем своим клиентам использовать данный сервис, т.к. изображения оптимизируется практически без потери качества и сервис не требует дополнительных настроек, сможет разобраться любой человек.

Также вопрос с подходящим размером изображений может решаться на этапе вывода изображений в публичную часть, например, используя функции обрезки, пример функции на сайте 1С-Битрикс.

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

Функция ResizeImgGet вызывается в файле result_modifier.php в шаблоне компонента, пример вызова функции ниже

$Resize = CFile::ResizeImageGet($arItem['PREVIEW_PICTURE'], array('width'=>350, 'height'=>230), BX_RESIZE_IMAGE_EXACT, true); 
$arResult['ITEMS'][$key]['PREVIEW_PICTURE']['SRC'] = $Resize['src'];

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

7. Используйте современные форматы изображений

Данный пункт означает, что вы на своем проекте используете изображения формата png/jpg и другие, а google требует форматы webp, svg, самые распространенные.

Решить данный вопрос можно несколькими способами, как вариант быстрого решения - установка готового модуля, который будет в момент запроса формировать изображения формата webp и отображать их, при этом аналогично обычным изображениям будет создаваться кеш. Еще один из возможных вариантов - изначальная загрузка изображений в формате webp, но сразу получаем проблему в том, что 1С-Битрикс не позволяет загружать изображения в формате webp в поля "картинка для анонса" и "детальная картинка", поэтому использовать данный способ есть смысл, только если какие-то изображения подключены в шаблоне (коде), либо же используются свойства инфоблоков или пользовательские поля.

Обращаем внимание, что вставлять изображения в формате webp лучше всего через следующую конструкцию

<picture>
<source srcset="<?= $arItem['PREVIEW_PICTURE']['WEBP_SRC'] ?>" type="image/webp">
<img src="<?= $arItem['PREVIEW_PICTURE']['SRC'] ?>" alt="<?= $arItem['NAME'] ?>">
</picture>

Данная конструкция позволит на современных устройствах и в современных браузерах использовать формат webp, а если он не поддерживается, то использовать стандартное изображение img

И третий способ реализации конвертации изображений в webp на 1С-Битрикс, подключение стороннего класса. Пример класса доступен по ссылке, данный класс необходимо разместить в init.php или подключить отдельно через конструкцию

CModule::AddAutoloadClasses("", array(
    '\Bas\Pict' => '/local/php_interface/user_class/classPict.php',
));

А дальше уже в файлах result_modifier.php использовать данный класс для формирования изображений в формате webp.

use \Bas\Pict;
$arResult['DETAIL_PICTURE'] = Pict::getWebp($arResult['DETAIL_PICTURE']);

8. Отложенная загрузка изображений

Конструкцию из 7 пункта лучше всего сразу использовать с дополнительным классом, и data атрибутами, которые позволяет реализовать отложенную загрузку изображений на сайт и ускорить загрузку сайта.

<picture>
<source data-srcset="<?= $arItem['PREVIEW_PICTURE']['WEBP_SRC'] ?>" class="lazyloaded" type="image/webp">
<img data-src="<?= $arItem['PREVIEW_PICTURE']['SRC'] ?>" alt="<?= $arItem['NAME'] ?>" class="lazyloaded">
</picture>

Объясняем, на данный класс lazyloaded будет подвязываться цикл each, которые в свою очередь будет пробегать по всем блокам и подменять дата атрибуты на атрибуты ссылки.

После вставки данной конструкции в js сайта необходимо разместить следующую конструкцию.

$('.lazyloaded').each(function(){
        $(this).addClass('init');
        $(this).attr('src',$(this).attr('data-src'));
        $(this).attr('srcset',$(this).attr('data-srcset'));
    });

Это и есть цикл each, который будет производить подмену дата атрибутов и осу

9. Сокращение размера структуры DOM

Если у вас возникает данная ошибка, то значит, что google page speed рекомендуем вам уменьшить количество кода на проверяемой странице, если у вас реализован вывод с базы данных (из инфоблоков), то лучше всего уменьшить количество отображаемых элементов на странице.

10. Сократите общее количество узлов DOM

Данная ошибка показывает проблему превышения максимальной глубины вложенности элементов. Самостоятельно решить данную без знания html верстки и без дополнительных доработок практически невозможно. Дать какие-то рекомендации уже работающим проектам практически невозможно.

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