Проверка скорости загрузки сайта в Google Page Speed и оптимизация

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

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

Кейс: оптимизация под Google Page Speed

Мы расскажем о своем опыте работы с PageSpeed Insights и покажем наглядный кейс, как мы тестировали и оптимизировали сайт нашего клиента. Дадим инструкцию для профессионалов.

В качестве “испытуемого” мы взяли сайт нашего клиента - интернет-магазин на системе управления CMS Bitrix. При первоначальной проверки скорости загрузки сайта (адрес которого мы вынуждены скрыть) до начала работ PageSpeed давал оценку в 71 балл для компьютеров и 50 баллов для мобильных устройств.

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

Оптимизация изображений в Google Page Speed

Для прохождения аудита “Настройте эффективную кодировку изображений” мы установили бесплатное решение для оптимизации картинок “Оптимизация картинок - автоматически и без сторонних сервисов” от Dev2Fun.

Примечание: данный модуль актуально использовать, если на хостинге есть серверный модуль для оптимизации картинок

У некоторых хостинг-провайдеров нет модулей для оптимизации картинок средствами сервера, поэтому в таких случаях стоит использовать другой модуль с маркетплейса “Универсальный оптимизатор картинок” от ИП Платонов Н.В. Данный модуль может обжимать изображения сторонним сервером, но важно в настройках нe включать webp, так как возможны проблемы в браузере Safari с вводом текста в input полях.

Настройки модуля:

В настройках качества картинок можно смело выставлять для jpeg 95%, progressive, а для png 2 уровень сжатия. (80% и 3 уровень тоже допустим, но меньше не стоит). Желательно ставить перекодирование только при ресайзе, чтобы оригинальные фото всегда оставались исходного качества.

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

1. копируем папку с images с другим именем (например image_original);
2. заходим в консоли в папку с images;
3. find . -type f -iname "*.png" -exec optipng -strip all -o3 {} \; -exec chmod 644 {} \;
4. find . -type f -iname "*.jpg" -exec jpegoptim --strip-all --all-progressive -pm80 {} \; -exec chmod 644 {}

Кеширование статических объектов

Для прохождения аудита “Задайте правила эффективного использования кеша для статических объектов” нужно на сервере установить время модификации для разных типов файлов nginx.

Пример для bitrix vm:

Примечание: данный метод не подходит для shared хостингов.

Также добавить блок на всякий в .htaccess:

Примечание: в большинстве случаев переопределение не сработает, так как на Shared хостингах эти значения, как правило, нельзя переопределить.

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

Сжатие текста

Для прохождения данного аудита “Включите сжатие текста” нужно добавить сжатие svg в nginx

1. /etc/nginx/mime.types добавить, если нет:image/svg+xml svg svgz;
2. /etc/nginx/nginx.conf добавить в конец строки:gzip_types image/svg+xml
3. Перечитать конфиги: service nginx reload

Важно: не забудьте удалить модуль компрессии из модулей Битрикса (на сервере он обычно всегда стоит по умолчанию)

Уменьшение размера кода css и javascript

На этом шаге мы пройдем сразу четыре аудита:

• Уменьшите размер кода CSS,
• Уменьшите размер кода JavaScript,
• Используйте предварительное подключение к необходимым доменам,
• Настройте предварительную загрузку ключевых запросов

1. Минимизируем css используя yuicompressor (обратить внимание на calc с “+” , его необходимо заменить на “- -”);
2. Хотя бы для главной страницы желательно подключать инлайново critical css (для первого экрана), а также если требуется разделять css главной страницы и внутренних;
3. Сжимаем js, используя yuicompressor либо uglify;
4. Желательно использовать prefetch, preload, dns-prefetch и тд. для ресурсов сайта, например, для шрифтов.

Настройка показа всего текста во время загрузки шрифтов

Для прохождения данного аудита “Настройте показ всего текста во время загрузки веб-шрифтов” в css для этого блока указываем:

Удаляем лишний css код

Для прохождения данного аудита “Удалите неиспользуемый код CSS”нужно хотя бы для главной страницы выделить только тот css, который используется там, и разделять подключение css для главной и внутренних страниц (в идеале для каждого индивидуального шаблона страницы подключать свой css).

Результаты оптимизации Google Page Speed