Ускорение интернет-магазина – это нудная и кропотливая работа. Здесь нет волшебной таблетки – внедрить что-то такое, что даст существенный прирост в скорости загрузки страниц магазина (при условии, что у вас нет грубых технических ошибок). Скорее придется работать с большим количеством настроек и производить их тюнинг, что будет давать прирост в несколько процентов. Но вкупе это даст синергетический эффект и время загрузки страниц уменьшится, а впечатление от работы сайта улучшится.
Для ускорения интернет-магазина необходимо оптимизировать работу:
- сервера;
- клиентской (браузерной) части.
Ускорение работы сервера
Основная метрика, показывающая скорость работы сервера – TTFB (time to first byte) – время до получения первого байта веб-страницы от сервера после отправки запроса. Чем быстрее этот показатель, тем эффективнее работает сервер.
Для ускорения метрики TTFB проводят оптимизацию:
- Nginx, Apache;
- операционной системы (как правило, Linux);
- железо;
- СУБД;
- программного кода.
Настройка NGINX
Тюнинг Nginx включает в себя установку оптимальных настроек для работы интернет-магазина. Например, для 1С Битрикс разработчики рекомендует выставлять следующие настройки в конфигурационном файле nginx.
Nginx+PHP-FPM
Технология Nginx+PHP-FPM дает преимущество в скорости обработки запросов пользователей и экономит оперативную память, что сказывается на цене оборудования или хостинга.
При одинаковом количестве установленных рабочих процессов Nginx будет быстрее Apache, т.к. Nginx работает в качестве прокси-сервера и входящие динамические запросы будет отдавать PHP-FPM, а в это время сам обрабатывать запросы со статикой (отдавать файлы с диска). Nginx работает как конвейер и перекидывает запросы между пользователями и PHP, а также разделяет работу со статикой и динамикой. Apache же будет для статики и динамики занимать рабочий процесс.
HTTP/2
HTTP/2 – новая версия HTTP 1.1, направленного на ускорение передачи данных. Протокол является бинарным и разбивает данные на части и транспортирует их между клиентом и сервером. Преимущества протокола:
- позволяет отправлять данные клиенту, которые не были запрошены клиентом, но которые могут понадобятся на следующем шаге. Это позволяет ускорить загрузку контента;
- несколько запросов могут быть отправлены через одно TCP-соединение, а ответы получены в любом порядке, когда как в прошлой версии протокола для каждого запроса приходилось устанавливать TCP-соединение;
- сжатие HTTP-заголовков;
- приоритизация запросов, основывающаяся на весе или зависимостях.
Сжатие Gzip и Brotli
Чтобы уменьшить вес файлов и увеличить скорость передачи данных по сети используют сжатие gzip и brotli.
Brotli 10-20% эффективнее сжимает, чем gzip, но работает только с HTTPS. Актуальную версию brotli можно скачать на github.
Операционная система
Большинство веб-серверов работают на операционной системе Linux. Linux развивается быстрее любой другой операционной системы: регулярно появляются новые версии ядра, драйверы к сетевым устройствам и новые алгоритмы работы с сетью, которые направлены на ускорение работы и безопасность. Поэтому важно своевременно обновлять ядро операционной системы, не забывая предварительно создавать бэкапы.
Обновление софта и библиотек
Важно обновлять криптографическую библиотеку OpenSSL, которая используется в HTTPS.
TCP/IP
TCP Congestion Avoidance Algorithm – алгоритм, обеспечивающий наиболее быструю передачу данных между 2-мя узлами и контролирующий нагрузку в сетях TCP.
Когда мы передаем данные у нас существуют ограничения на скорость потоков для того, чтобы не переполнилась сеть пакетами и не произошел коллапс сети – congestion control.
Тюнинг tcp_congestion_control дает прирост пропускной способности сети.
Чтобы ускорить загрузку контента для клиентов с плохими сетями используйте режим BBR.
Чтобы посмотреть настройку tcp_congestion_control на Linux-сервере, выполните команда
1 | sysctl -a | grep congestion |
По умолчанию — net.ipv4.tcp_congestion_control = cubic
qdisc – сетовой объект по управлению очередями.
Чтобы посмотреть настройку qdisc, введите команду в терминале
1 | sysctl -a | grep qdisc |
По умолчанию — net.core.default_qdisc = pfifo_fast
Чтобы включить BBR (для Ubuntu включать на ядре не ниже 4.9) введите команду:
1 | sysctl –w net.ipv4.tcp_congestion_control=bbr |
Обработчик очередей для пакетов, который включает в себя механизмы, с которыми работает BBR поменять на значение «fq»
1 | sysctl –w net.core.default_qdisc=fq |
Лимиты на открытые файлы
В Linux устанавливаются жесткие ограничения на количество открываемых файлов для каждого процесса и пользователя. Лимиты устанавливаются для ограничения использования оперативной памяти. Операционной системе требуется память для управления каждым открытым файлом.
СУБД
Для ускорения СУБД работают над скоростью чтения и записи в нее, оптимизируют SQL-запросы и схему БД (например, вносят дополнительные индексы и колонки).
Железо
Предпочтение отдавать процессорам с меньшим количеством ядер и большей частотой (например, процессорам Intel 8 или 9 серии, AMD Ryzen), выбирать жесткие диски NVMe SSD, и иметь оперативную память от 16 GB.
Ускорение на стороне клиента (браузера)
Для ускорения на стороне клиента оптимизируют:
- JavaScript код;
- CSS;
- картинки;
- шрифты;
- видео и звук.
JS и CSS
Оптимизация JS сводится к минификации и объединении кода, сжатии, деления на основной и выполнение которого можно отложить, чистке неиспользуемого кода.
JS коварен тем, что на его интерпретацию браузером тратятся ресурсы: память, процессорное время и т.д. Задержки при рендеренге страниц могут возникать в результате задержек выполнения JS, поэтому по возможности его нужно откладывать.
Если работоспособность страницы серьезно зависит от JS, то его поделить на важный и второстепенный. Самые важные загружать в первую очередь, а некритичный откладывать.
Если JS подключить с атрибутом async, то страница будет загружаться не дожидаясь выполнения скрипта, тем самым ускорим загрузку страницы.
А атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
CSS (таблицы стилей) аналогично блокирует рендеринг страниц.
Таблицы стилей – средство оформления сайтов, которые могут достигать больших объемов ввиду использования фреймворков, раздувающих размер кода. Т.к. это текстовые данные, то необходимо передавать в сжатом виде (gzip и brotli).
Таблицы стилей загружаются с высоким приоритетом. В некоторых случаях возможно перенос CSS вниз страницы или производить динамическую подгрузку. Но это нужно делать с умом, т.к. убивается возможность кеширования (т.к. HTML страница динамическая).
Для оптимизации важно понимать откуда пришел код, какого он размера, правильно ли он сжат, кешируется ли этот запрос, в какой части ватерфола находится загрузка эти таблицы стилей.
Использовать preload, prefetch, preconnect. Общая идея этих тегов – сказать браузеру какие ресурсы нам понадобятся и мы должны их заранее получить.
Когда делаем preload нужно понимать действительно ли важно чтобы этот ресурс приезжал быстрее остальных и какого он размера (например, важнее чтобы в первую очередь приехал CSS, а потом уже шрифты и картинки).
Prefetch – загрузить тогда, когда будут ресурсы, на следующем шаге. Т.е. мы понижаем приоритет загрузки на первом шаге загрузки страницы.
Preconnect – создает соединение, не загружая никаких ресурсов. Делаем соединение (например, подключаемся к внешним доменам) на ранней стадии загрузки, а ресурсы приезжают позже. Например, когда нужно как можно быстрее вывести виджет.
Для ускорения загрузки имеет смысл собирать таблицы стилей в бандл.
В некоторых случаях добавление JS и CSS кода прямо в HTML может ускорить загрузку.
Шрифты
Скорость загрузки шрифтов прямо пропорциональна размеру подключаемых шрифтов. Если основной шрифт сайта подключаемый, то важно быстро его подгружать для максимально быстрого появления контента в окне браузера.
Для ускорения загрузки шрифтов нужно:
- выбирать максимально компактные;
- оптимизировать состав;
- дать максимальный приоритет тем шрифтам, которые влияют на отрисовку контента на первоначальном этапе загрузки страницы (использовать preload при подключении);
- использовать font-display – позволяет управлять рендерингом шрифтов и за счет этого ускорять отрисовку страницы. Бывает auto, block, swap, fallback (отрисовка запасных шрифтов, когда не успели придти подключаемые), optional. Подробнее об этом читайте у гугл.
- смотреть за плагинами, которые тоже приносят шрифты извне.
Актуальный формат, поддерживаемый браузерами – woff2. Использует максимально эффективное сжатие brotli и его не нужно дополнительно ужимать.
Картинки
Для быстрой загрузки страницы следите за размером картинок. Они должны быть оптимизированы: выбран правильный формат, сжат, размеры соответствовать отображаемым в верстке сайта. Изменение размера – изменение в пикселях, сжатие – рекомпрессия jpeg с другими параметрами.
Используйте современные форматы изображений для браузеров:
- Webp (поддерживают не все браузеры);
- SVG.
Применяйте кодеки для сжатия существующих картинок:
Если картинки находятся ниже 1-го экрана, то их обязательно нужно делать lazy-load (ленивая загрузка. Чтобы сделать lazy-load средствами браузера, читайте здесь.
Но также lazy-load делается при помощи JS. Обязательно использовать на сайтах с большим количеством тяжелых картинок, находящихся ниже 1 экрана. С другой стороны, вместо того, чтобы делать ленивую загрузку картинок, лучше повысить приоритет того, что нам нужно в первую очередь и оно будет загружаться быстрее.
Минификация кода
Все файлы, которые содержат текст: js, css, html, svg необходимо оптимизировать – убирать пробелы, отступы, переносы. Все эти элементы раздувают вес и, вследствие чего, увеличивается время обработки пакетов, когда они прилетают в браузер. Следовательно, увеличивается время отображения документа.
Если разбираться глубоко, то становится понятно, что на самом деле при минификации мы экономим не только на весе документа, но и далее ресурсы устройств. Особенно объем передаваемого трафика становится актуальным при передаче в мобильные устройства в мобильной сети: загрузили меньше данных, сэкономили на передаче по сети, в оперативной памяти устройства данные занимают меньше места и их распаковка происходит быстрее, быстрее отрабатывает парсер браузера потому что нет пробелов и отступов. Экономия не только на передачу меньшего веса по сети, но и далее, вплоть до отрисовки страниц.
Разобрались, что заниматься минифицированием нужно. Встает вопрос как. Лучше всего автоматизировать этот процесс. Посмотрите есть ли в вашей CMS такие функции либо воспользуйтесь сторонними фреймворками, бандлерами.
В ситуациях, когда файлов немного воспользуйтесь сервисами:
CSS — https://csscompressor.com/ — с возможностью выставлять разную степень компрессии.
JS, CSS, HTML — http://minifycode.com/ — как проводить компрессию, так и приводить в человоекочитаемый вид.
Svg — https://jakearchibald.github.io/svgomg/
В документе HTML вперемежку вставляют JS, CSS. Чтобы не нарушить их работу делать это нужно аккуратно. Например, для минификации HTML-кода в 1С Битрикс добавляют в init.php следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 | AddEventHandler("main", "OnEndBufferContent", "ChangeMyContent"); function ChangeMyContent(&$content) { global $USER; if(!$USER->IsAdmin()) { $content = sanitize_output($content); } } function sanitize_output($buffer) { return preg_replace('~>\s*\n\s*<~', '><', $buffer); } |
