+7 (925) 507-98-19
к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»
Казалось бы сегодня при современных скоростях компьютеров, мобильных устройств и Интернета сайты давно должны летать. Однако, открываем очередной сайт и он безбожно тормозит. Причин такой ситуации может быть множество. В этой статье мы покажем простой и понятный алгоритм для выявления источника проблем, а также посмотрим на методы их решения.
Самое простое, это посмотреть, нет ли проблемы на нашей стороне (нашего провайдера). Выяснить это просто: загрузить какие-нибудь заведомо быстрые сайты (yandex.ru, mail.ru и т. д.) Если проблема повторяется, стоит искать причину на стороне своего устройства (компьютера, планшета, смартфона) или канала в Интернет (локальная сеть, роутер и сеть провайдера).
Изолировать проблему до устройства или канала. Для этого нужно сравнить работу сайтов на разных устройствах. Если проблема в интернет-канале, этот вопрос можно уже решать с поддержкой провайдера. Предварительно полезно перезагрузить роутер, для исключения временных проблем.
На этом шаге диагностику торможения сайта можно закончить: либо проблема на вашей стороне, либо проблемы у сайта.
Однако, если вы как-то можете повлиять на работу сайта или просто неравнодушны к качеству его работы (например, вам нужно срочно что-то сделать с его помощью), то можно перейти к следующим шагам по диагностике проблемы.
На этом этапе мы уже исключили фактор медленного интернет-канала или устройства и решили, что проблема со скоростью находится на стороне сайта. Есть также третий вариант – проблема находится между клиентом и сервером в глобальной сети, но диагностика таких проблем гораздо сложнее и выходит за рамки этой статьи (кроме того, такие случаи достаточно редки).
Сайт может тормозить по двум направлениям: время ответа сервера (серверная производительность) и время работы и загрузки клиентской части (клиентская производительность).
Быстро оценить скорость загрузки сайта можно с использованием нашего сервиса: Ускорениесайта.рф. С его помощью вы получите достаточно подробный отчет по скорости сайта со всеми нужными метриками.
С серверной производительностью все обычно просто. Для показа страницы в браузере мы должны загрузить HTML-документ, пока он не будет получен (хотя бы его часть), страница отобразиться не может (это обязательное, но не достаточное условие).
Если вы используете отчет Ускорениесайта.рф, то время ответа сервера будет в метрике «Время до первого байта (TTFB)».
Чтобы увидеть время ответа сервера, нужно воспользоваться панелью Developer Tools (Средства/инструменты разработчика), которая обычно открывается кнопкой F12. Далее открываем вкладку Network (Сеть) и смотрим первый запрос, который возвращает HTML-документ. Также можно воспользоваться фильтром и выбрать Doc или HTML раздел. Смотрим, сколько времени ушло на этот запрос: если это больше 1 секунды, значит есть проблема со временем ответа сервера (торможение будет заметно на глаз).
Иногда сайты разрабатывают по технологии SPA (single page application) и мы не будем видеть запросов с типом HTML или Doc. В таком случае нужно посмотреть на закладку XHR, там будут AJAX-запросы, которые заменяют запросы HTML-документов.
Если время запроса к HTML-документу значительно меньше времени загрузки страницы, значит проблема не в сервере (или не только в нём).
Если проблемный сайт чужой и вы не имеете возможности воздействовать на его функционирование – обращайтесь в поддержку сайта (если она существует). Опишите проблему, скажите, когда она возникает, почему вы считаете, что проблема в сервере сайта. Если заявка письменная, можете приложить скриншот из Developer Tools, где видно время работы сервера.
А если это ваш сайт и вы отвечаете за его работу (или ваш бизнес зависит от сайта), стоит подробно разобраться с причинами. Вариантов здесь может быть несколько: время ответа постоянно большое (даже без нагрузки) или растёт при возрастании нагрузки. В первом случае ресурсов сервера хронически не хватает для работы сайта. Решений несколько: оптимизировать код сайта или увеличивать ресурсы хостинга (более мощный сервер).
Если сайт «проседает» под нагрузкой, можно попробовать сгладить эффект внедрением кэширования. Оптимизация кода и увеличение ресурсов также остаются актуальными.
Расходовать ресурсы сервера может как база данных, так и сервер приложений. В некоторых случаях сайт может обращаться к удалённым сервисам, которые вносят серьёзные задержки.
Решить проблемы с серверным торможением можно только с привлечением технических специалистов (разработчиков и системных администраторов).
На данном этапе мы исключили многие причины медленной работы сайтов. Остаётся клиентская часть веб-приложения. В последнее время всё больше нагрузки приходится именно на работу в браузере. Достаточно сказать, что средний размер веб-страницы в 2016 году превысил 2 мегабайта, в том числе за счет увеличения javascript-кода.
Если вы используете отчет Ускорениесайта.рф, размеры страницы будут указаны в метриках «Размер страницы и всех подключенных ресурсов», «Размер CSS-ресурсов», «Размер JS-ресурсов», «Размер подключаемых шрифтов».
Как определить причину торможения на клиентской стороне? Во-первых, нужно посмотреть на характер прогресса загрузки сайта: скачкообразная (долго видим белый экран, потом сразу почти готовая страница) или постепенная (часть страницы отрисовывается быстро, дальше долго подгружаются картинки, шрифты и другие элементы).
Скачкообразная загрузка скорее всего означает наличие тяжелых ресурсов, блокирующих рендеринг страницы. Это могут быть CSS-файлы, JS-скрипты, подгружаемые шрифты. Посмотреть объём и время загрузки этих ресурсов можно в тех же средствах разработчика с закладками фильтра: CSS, JS, Font (Шрифты). По размеру норма для этих разделов до 100-200 кб. Если вы наблюдаете значения, приближающиеся к мегабайту, торможение сайта гарантировано.
Постепенная загрузка свидетельствует о большом размере некритичных ресурсов: картинки, видео, другой контент. Объем картинок можно оценить на закладке Image (Изображения) и Media (Медиа).
Для решения проблем большого объема клиентской части есть несколько подходов: удаление лишних частей, сжатие ресурсов, изменение порядка загрузки ресурсов (в том числе отложенная загрузка). В зависимости от вида ресурса, тормозящего сайт (CSS, JS, шрифты, картинки) применяются один или сразу несколько действий.
Наконец, самый сложный (и, возможно, редкий) случай – торможение сайта обусловлено большой нагрузкой сайта на CPU. Определить его можно по следующим симптомам: большая загрузка CPU при работе с сайтом, рывки при прокрутке страницы, ступенчатая анимация элементов.
Наиболее часто такая ситуация встречается на мобильных устройствах, однако может проявляться и на мощных компьютерах.
Для решения такой проблемы требуется анализ причин высокой нагрузки на CPU и оптимизация медленных мест в JS-коде. В некоторых случаях виновны внешние виджеты (чаты, сервисы обратного звонка). Иногда нагрузка на CPU может быть вызвана большим количеством элементов на странице или большим объёмом изображений. В этом случае нужно оптимизировать структуру вёрстки.
Используя алгоритм, показанный в данной статье можно достаточно точно диагностировать проблемы с тормозящими сайтами и понимать, что предпринять. Конечно, жизнь намного разнообразнее и алгоритм сознательно упрощен, многие подробности темы опущены.
Для владельцев сайтов сегодня это особенно важно, так как время загрузки сайта напрямую влияет на показатели доверия, конверсии и вовлечённости. Тормозящий сайт всегда крадёт деньги у бизнеса.
Если вам не удаётся провести диагностику скорости сайта самостоятельно, можете обратиться к нам за аудитом скорости.
А в случае, если вы уже знаете о проблемах своего сайта и хотите их исправить, заказывайте у нас профессиональное ускорение сайта.
