Оптимизация сайта на 1C-Bitrix под Google PageSpeed Insights

Оптимизация сайта на 1C-Bitrix под Google PageSpeed Insights

В последнее время, очень сильно обострился вопрос в среде web - разработки, относительно требований\рекомендаций компании Google - pagespeed insights.

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

Результат в красной зоне - все плохо, желтой - сносно, зеленой - все практически или идеально. 

Для примера мы возьмем сайт http://demo.alfa1c.ru/ изначально он находится в красной зоне и имеет 26 / 100 для мобильных устройств и 71 / 100 для десктопов.

Screenshot of PageSpeed Insights (6).jpg

Попробуем разобраться в чем же дело.

В данный момент, вся оптимизация разделена на 6 больших блоков:

  1. Данные наблюдений
  2. Origin Summary
  3. Имитация загрузки страницы
  4. Оптимизация
  5. Диагностика
  6. Успешные аудиты
Большая часть блоков носит информационный характер, для того, чтобы специалист получил максимум данных, по состоянию проекта.

Нас интересует блоки 4 и 5.

Блок оптимизация отвечает за оптимизацию контентной части веб - страницы. Ключевыми пунктами здесь являются:

  1. Устраните ресурсы, блокирующие отображение
  2. Настройте подходящий размер изображений
  3. Уменьшите размер кода CSS
  4. Уменьшите размер кода JavaScript
  5. Короткое время ответа сервера (время до получения первого байта)
  6. Предотвращение чрезмерной нагрузки на сеть
Что же мы можем сделать для улучшения / устранения ошибок в данном блоке? Разберемся по порядку:

Проблема №1

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

Данная проблема решается путем переноса наших js - скриптов вниз страницы, после загрузки основного контента. В 1С - Битрикс это делается установкой галочки в настройках главного модуля 1С - Битрикс:

Screenshot of Настройки модуля - Современная Одежда+ (1).jpg

Переместить весь Javascript в конец страницы.

Так же необходимо между тегами <head></head> оставить css стили, необходимые для корректного отображения шапки сайта. В таком случае данный пункт будет засчитан. CSS код необходимо размещать в <style></style> т.к. подключение файла стилей google считает задержкой загрузки.


Проблема №2,3,4 и 6

Настройте подходящий размер изображений,
Уменьшите размер кода CSS
Уменьшите размер кода JavaScript
Предотвращение чрезмерной нагрузки на сеть,


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

На вес страницы главным образом влияют 3 составляющие:

  1. Изображения
  2. CSS - файлы
  3. JS - файлы

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

  1. Adobe Photoshop
  2. Онлайн сервисы
  3. Приложения для сервера
Когда картинок не много, можно справиться с помощью редактора, того же Adobe Photoshop или онлайн сервиса, но на многих сайтах количество изображений достигает нескольких сотен тысяч! И это превращается в проблему.
Вот тут то и вступает в дело пакетный конвертер.  Для системы управления сайтом 1С - Битрикс мы разработали модуль, который значительно упрощает этот процесс, достаточно установить его из маркетплейс, настроить необходимое качество сжатия (потренироваться можно на тестовых картинках) и запустить, за час модуль обрабатывает примерно 10 000 изображений - это объем небольшого интернет магазина. Модуль можно оставить работать на сутки и в таком случае изображения даже на очень крупном сайте успеют обработаться. Установить модуль можно по ссылке. После того как размер изображений уменьшится, вес страницы так станет меньше, следовательно соответствие критериям станет лучше.

Сюда же относится и уменьшение размеров js и css.

Для решения данного вопроса необходимо установить галки в настройках главного модуля 1С - Битрикс:

  • Объединять CSS файлы
  • Подключать минифицированные версии CSS и JS файлов
  • Объединять JS файлы
  • Создавать сжатую копию объединенных CSS и JS файлов
  • Создавать сжатую копию объединенных CSS и JS файлов
Screenshot of Настройки модуля - Современная Одежда+ (2).jpg

Решение во многом не идеальное, т.к. минификатор в Битрикс работает довольно посредственно и большинство сторонних сервисов производят сжатие гораздо лучше. По этой причине, наиболее эффективно будет сжать файлы сторонними минификаторами, добавить в название .min чтобы получилось к примеру jquery.slider.min.js и положить рядом с основным несжатым файлом jquery.slider.js, в таком случае CMS автоматически подхватит минифицированный файл.

Если же вам какой- либо Js код наоборот, не требуется переносить в конец страницы, к примеру google - метрику, то в теге script необходимо указать <script data-skip-moving="true"> - в этом случае скрипт останется на своем месте. 

Проблема №5

Короткое время ответа сервера (время до получения первого байта)

В целом выполнение данного пункта - весьма масштабная задача, т.к. на время отклика влияет множество факторов, но главным образом - это скорость работы с БД, мощность сервера на котором расположен сайт и скорость работы PHP. Но если же на это нет ресурсов или вам плевать на то как быстро работает ваш сайт, есть простой способ обойти данный пункт, в Битрикс достаточно воспользоваться технологией "Композитный сайт". По факту, система отдаст статику до выполнения запросов и выполнения скриптов php, что означает фактически - мгновенный ответ. На данный момент данная технология бесплатна, никаких стикеров и.т.д. Потребуется лишь небольшая докрутка компонентов, если сайт имеет нестандартный функционал к примеру.

Но все же, правильнее провести комплексную работу над улучшением отклика, оптимизировать код и запросы к БД, возможно докупить серверные мощности. Ну а композитный сайт уже внедрить как дополнительный бонус.

Теперь поговорим о  блоке диагностика.

Ключевыми пунктами здесь являются:

  1. Сократите размер структуры DOM
  2. Задайте правила эффективного использования кеша для статических объектов
  3. Сократите глубину вложенности критических запросов

Проблема №1

Сократите размер структуры DOM

Данный пункт говорит о том, что страница не должна иметь сложную структуру DOM в плане вложенности, рекомендуемый уровень - 32, т.к. чем больше вложенность, тем дольше будут происходить вычисления стилей и отработка селекторов в js. Решить данную проблему можно лишь переверсткой отдельных блоков и их более простое и открытое структурирование.

Проблема №2

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

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

Необходимо использовать mod_expires.c

Чтобы задать время кеширования необходимо в .htaccess в корне сайта разместить следующий код:

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/jpeg "access plus 3 day"
  ExpiresByType image/gif "access plus 3 day"
  ExpiresByType image/png "access plus 3 day"
  ExpiresByType text/css "access plus 3 day"
  ExpiresByType application/javascript "access plus 3 day" 
</IfModule> 

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

Так же вы можете уже сейчас задуматься о переводе сайта на Http/2.

Проблема №3

Сократите глубину вложенности критических запросов

Если вы по какой - то причине не желаете объединять js - скрипты в один минифицированный файл, вы неизбежно столкнетесь  с данной проблемой.

В таком случае, вам необходимо определить js и css файлы, которые необходимы вам в первую очередь, для генерации страницы и добавить в ссылку следующий параметр  link rel="preload", чтобы они были вида:

  • <link rel="preload" href="style.css" as="style">
  • <link rel="preload" href="main.js" as="script">

и тогда данные файлы загрузятся в первую очередь. Сюда же можно указать параметр "as", который при загрузке явно укажет на тип загружаемого контента, что поможет эффективнее его сжать. К слову в битрикс мы не нашли способа добавить параметры в метод Asset::getInstance()->addJs, вероятно остается использование Asset::getInstance()->addString.

После выполнения данных рекомендаций, сайт окажется в зеленой зоне в GPSI и его ранжирование вырастет.

Screenshot of PageSpeed Insights (7).jpg

Возврат к списку

Новогодний бизнес-марафон!

Скидки на «1С-Битрикс: Управление сайтом»

В декабре запустить новый сайт можно не только быстро и легко, но и выгодно. Вы получите весь комплекс инструментов для управления сайтом, маркетингом и продажами — со скидкой 21%.

Скидки на продление лицензии

Даже если вы давно не продлевали лицензию вашего «1С-Битрикс: Управления сайтом», сейчас вы можете продлиться со скидкой 63%.

При покупке любой редакции 1С- Битрикс, Вы получите наш модуль совершенно БЕСПЛАТНО!

Свяжитесь с нами: optiimg@mail.ru

Закрыть