+7 (925) 507-98-19
к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»
Сайт социальной сети «Одноклассники» относится к самым посещаемым в России. Как и многие высоконагруженные проекты, в ОК уделяется серьёзное внимание к скорости загрузки и работы сайта.
Тем не менее, многие пользователи испытывают проблемы с быстродействием сайта ok.ru. Посмотрим, с чем это может быть связано.
Первое, что нужно сделать – загрузить сайт с очищенным кэшем и проанализировать процесс загрузки.
Первый подозреваемый в тормозах: сервер, а точнее время получения HTML-документа.
Проверим этот вариант. Открываем средства разработчика в браузере (Developer Tools - F12) закладку Doc. При отсутствии ограничений сети загрузка занимает меньше 200 мс, что вполне укладывается в нормы. Размер документа великоват – более 300 кб (70 кб в сжатом виде), при передаче используется сжатие gzip. В целом, ситуация с документом нормальная, но лучше оптимизировать размер документа и использовать более эффективное сжатие (brotli).
Также обратим внимание на протокол HTTPS: используется HTTP/1.1, поддержки HTTP/2 нет. В качестве шифра используется AES-128-GCM, что с точки зрения скорости оптимально для современных компьютеров (с аппаратной поддержкой AES), но может быть тяжело для мобильных устройств (лучше использовать CHA-CHA20, он работает быстрее). Итак, в серверной части серьёзных проблем не обнаружено, посмотрим на клиентскую оптимизацию.
Включаем закладку JS и видим более 50 ресурсов JS общим объёмом около 500 кб в сжатом виде. Однако, обращаем внимание на приоритет загрузки (столбец Priority) – только 3 ресурса имеют High в приоритете. Их суммарный размер не превышает 20 кб (в сжатом виде), что не должно вызывать проблем как с точки зрения загрузки по сети, так и по нагрузке на CPU.
Посмотрев заголовки JS-ресурса узнаём, что используется сжатие brotli – самый эффективный способ на сегодня. Кроме того, корректно установлены кеширующие заголовки (на год).
Однако, критичные JS-ресурсы раздаются с отдельного хоста (st.mycdn.me). Это значит, что для их загрузки нужно сначала получить DNS-ответ от сервера для этого хоста, пройти процедуру TCP и TLS handshake, что вносит дополнительные задержки для начальной загрузки страницы.
Краткий итог: JS не является основной причиной торможения сайта, но может использовать большие ресурсы CPU после начальной загрузки страницы.
Далее мы анализируем CSS-ресурсы страницы. Они также оптимизированы с точки зрения заголовков, сжатия и минификации.
Проблема выражается в размере и количестве запросов: это пять ресурсов, размер: 184 кб в сжатом виде. Все эти файлы стилей критичны для начала рендеринга страницы. Также эти ресурсы размещены на отдельном хосте st.mycdn.me, поэтому подвержены проблеме установления соединений, которая описана выше.
Скорее всего, далеко не все стили нужны для рендеринга основной части страницы, и некоторые части CSS можно было оставить в пост-загрузке.
Таким образом, CSS становится самым медленным элементом при начальной отрисовке страницы.
Для завершения тестирования Одноклассников, мы построили профиль загрузки в закладке Performance. При ограничении сети до уровня 4G и замедления CPU в 2 раза получили следующие значения затрат времени:
Как видно из приведённых цифр, нагрузка на процессор достаточно велика. Это значит, что для слабых устройств (или загруженных другой работой) сайт будет серьёзно тормозить.
Что касается сетевых параметров, общий объём страницы составляет более 3 мб, что может создавать проблемы на медленных соединениях. При этом критическая часть (для начального рендеринга) составляет около 300 кб, что приемлемо.
В качестве рекомендаций по ускорению можно указать следующие:
За профессиональным ускорением сайтов обращайтесь к нам.
