Блог

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

Посетители «голосуют ногами» — если страница долго не открывается, просто уходят. Почему сайт покидает тот или иной посетитель понять сложно — то ли не туда кликнул, то ли не нашёл ничего полезного, то ли не дождался загрузки картинки товара.

Объективную картину можно получить перезагрузив страницу сочетанием клавиш Ctrl+F5 — тогда браузер забудет про кэш и сайт загрузится примерно как у типичного посетителя.

Лучший подход — обратиться к бенчмаркам, типа Google Page Speed Insights или GTMetrix.

Наш заказчик узнал о медленной загрузке по отзывам, когда знакомые и подрядчики начали говорить, что сайт «тормозит». Изначально сайт был создан в конструкторе, затем перенесён на CMS Wordpress, потом — на Битрикс; «утащил» за собой недостатки всех систем и попал к нам в таком виде на оптимизацию.

Что было сделано

Оптимизация сервера

Слова «переход на PHP 7, настройка HTTP2 через ALPN, переустановка ОС, Vestacp, настройка параметров nginx, apache, php, MySQL, SSL» наверняка не скажут читателю ничего, но после совершения перечисленных манипуляций средства проверки отчитываются о производительности в два раза выше эталона:

Панель производительности Битрикс

Например, переход со старого PHP 5.4 на новый PHP 7 довольно прост, чаще всего не вызывает никаких ошибок, а ускоряет формирование кода страницы в среднем в два раза.

«Протокол http2 через ALPN» станет понятнее, если знать, что по обычному http браузер ради каждой картинки, каждого нового файла или скрипта открывает с сервером новое соединение. По http2 такого не происходит — большинство «кусочков» сайта скачиваются друг за другом через одно соединение.

Проверить: https://page-speed.ru/tests/http2/

SSL — это «зелёный замочек» в браузере слева от адреса сайта. Обязателен для сайтов, принимающих онлайн-оплату картой, используется поисковыми системами для ранжирования — при прочих равных выше в поиске будет сайт с SSL. Скоро эта настройка станет обязательной для любого сайта.

Сайты с SSL и без

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

Ошибки во внутренней настройке Битрикс. До и после оптимизации.

Чтобы проверить, сколько ошибок содержится на вашем сайте, зайдите в административную часть и найдите панель монитора производительности. Прямая ссылка на панель:
ваш_сайт/bitrix/admin/perfmon_panel.php

Оптимизация сайта

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

Сжатие картинок

«Тяжёлые» картинки замедляют скорость загрузки и занимают место в оперативной памяти посетителя. Их объём можно уменьшить в десятки и сотни раз не теряя в качестве:

Правая верхняя занимает 107 килобайт. Далее против часовой стрелки 67 кб, 44 кб и наконец правая нижняя — 36 килобайт. Отличия сложно заметить без увеличения, тем более их не заметит типичный посетитель сайта.

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

Участки крупной фотографии шириной 1920 пикселей со сжатием и без.

Ресайз картинок

Размер экрана среднестатистического посетителя очень редко превышает 1920 на 1080 пикселей:

Статистика разрешений экрана посетителей

На сайте не следует публиковать картинки шире 1920 пикселей. Если картинка обычно занимает четверть экрана, нужно масштабировать её до 480 пикселей, если треть — до 640 и т. д. и в таком виде опубликовать на сайте. Некоторые CMS позволяют загрузить разные изображения для десктопов и мобильных.

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

Например, CMS этого интернет-магазина из одной картинки товара заранее готовит три — разного размера, чтобы не нагружать браузер лишней работой по масштабированию:

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

Блокирующие скрипты

Скрипты делают сайт «отзывчивым»: добавляют анимацию, эффекты при наведении на элементы, помогают в сборе статистики посещений. На основе javascript сделаны многие галереи картинок, виджеты онлайн-записи, «ловцы лидов», «сайтофоны» и онлайн-чаты.

Инструкции типичного онлайн чата, по нашему опыту, могут занимать от 300 килобайт до 10 мегабайт (!). Если такой скрипт стоит в середине кода сайта, всё что находится ниже не загрузится, пока не скачаются эти 10 мегабайт. Если скриптов несколько — браузер будет скачивать их последовательно один за другим и не сможет показать остальное содержимое страницы.

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

Сокращение кода

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

Минификация кода

Казалось бы, главная страница google содержит всего лишь картинку, поле для запроса и несколько кнопок, но всё это отображается на экране и работает благодаря 330 строкам инструкций объемом 347 кб, конечно миницированных.
Посмотреть их можно, введя в адресной строке:
view-source:https://www.google.ru/

Итоги оптимизации

Показатели по Google Page Speed Insights вышли в «зелёную зону»:

Page Speed Insights до и после

Скорость загрузки сайта в Москве увеличилась:

Скорость загрузки сайта по регионам по данным панели производительности Битрикс

Сайт должен загружаться быстро, потому что:

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