Замедление работы или зависание браузера при просмотре сайта

08.05.2020

Проблемы с замедлением скорости работы сайта и замедленной реакцией интерфейса сайта на действия зачастую связаны с front-end т.е. версткой сайта, а именно с ресурсоемкими скриптами (JavaScript/jQuery) и/или структурой html (DOM).

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

Признаки: появление ошибки "страница не отвечает" или "страница замедляет браузер", долгое открытие страниц, отложенная реакция (или ее полное отстутствие) интерфейса сайта на действия (клики по кнопкам, заполнение форм и др.), долгое обновление страницы, долгое закрытие владки с сайтом.

Причины могут быть разными, поэтому для начала потребуется отключить JavaScript с помощью инструментов разработчика в браузере Google Chrome. Открыть инструмент разработчика в Google Chrome можно клавишами: CTRL+SHIFT+I (windows/linux) или CMND+SHIFT+I (mac).

Затем нужно открыть консоль команд сочетанием клавиш CTRL+SHIFT+P (windows/linux) или CMND+SHIFT+P (mac), вписать java и выбрать опцию "Debugger: Disable JavaScript":

После чего можно ввести в адресную строгу браузера url сайта и проверить будет ли замедление и/или "зависание" при просмотре сайта. Внешний вид сайта и работа элементов интерфейса будут изменены т.к. вы отключили javascript для проведения эсперимента. Цель проверки - убедиться, что браузер нагружается именно из-за javascript т.е. некорректного выполнения скриптов.

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

Если сайт продолжает работать медленно и нагружает браузер в вЫключенным javascript, то требутеся провести диагностику нагрузки на браузер.

Нужно проверить наличие ошибок скриптов во вкладке "Console".

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

Во вкладке "Performance" можно произвести замер нагрузок сайта на браузер в процессе загрузки и пользования сайтом. Для этого требуется нажать кнопку записи (record) и ввести в адресную строгу браузера url сайта.

Дождаться загрузки страницы, затем проскроллить страницу, сделать нексколько кликов по элементам интерфейса сайта (блоки, слайд-шоу, меню и др.). После нужно остановить запись и просмотреть отчет "Performance". В отчете будет находиться информация по разным типам нагрузок, которую можно использовать для анализа проблемных (нагружающих браузер) областей сайта.