Как увеличить скорость сайта, сокращая выполнение кода JavaScript

Медленные сайты, а в понимании современного интернет-пользователя, медленно — это всё, что загружается более 3 секунд, откровенно раздражают. И чем дольше на экране будет белый лист — тем больше шансов, что человек так и не дождётся предлагаемого ему контента. Поскольку поисковые системы настроены таким образом, чтобы максимально угодить пользователю — медленные сайты они даже не предлагают для просмотра. Нет, если в интернет-магазине продаются космические шатлы, то по запросу Google его покажет, так как у такого ресурса попросту нет конкурентов. Но, на практике, уникальный продукт встречается крайне редко. Поэтому, борьба за рынок и своё место на нём — высока. Следовательно, чем ниже страница находится в ранжировании поискового запроса, тем меньше её конверсия. А задача любого бизнеса — зарабатывать деньги.

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

Одним из эффективных инструментов тестирования, который позволяет определить скорость сайтов, является PageSpeed Insights. Это инструмент от Google и на основании его показателей, поисковая система решает нравится ей страница, или нет. Чем больше претензий, тем хуже сайт по мнению поисковика. Помимо оценки, сервис выдаёт рекомендации, исправление которых позволит улучшить характеристики. В перечне проведённых аудитов можно найти пункт: «Время выполнения кода JavaScript». Рядом с ним всегда отображается время, которое требуется для выполнения команды.

Как измерить время выполнения JavaScript

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

Можно произвести замеры не в миллисекундах, а в микросекундах. Это даст более точное понимание. Эффективно настроить метки пользовательского времени, чтобы выявить на каких этапах и почему его затрачивается больше. Для этого стоит воспользоваться инструментом User Timing API. Подробнее нём и его работе вы можете прочитать в нашей статье.

Как проводится проверка на время выполнения кода JavaScript в PageSpeed Insights

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

Анализатор имитирует загрузку страницы из произвольной географической точки. В случае с PageSpeed Insights, выбирается ближайший сервер от места загрузки. Для того, чтобы веб-разработчик или владелец сайта мог определить наиболее значимые факторы, которые оказывают воздействие на затрачиваемое время, информация выводится в виде детализированной таблицы. Lighthouse показывает сколько конкретно миллисекунд потребовалось на выполнение, оценку и анализ каждого файла JavaScript, который загружается страницей.

Если на загрузку JS требуется более 2 секунд, Маяк выдаёт предупреждение, отмечая время красным. Буквально оно значит — это непорядок и надо срочно что-то далать, чтобы исправить ситуацию. Если JavaScript не загрузился за 3,5 секунд — аудит считается не удавшимся. Работать со столь медленной страницей сервис отказывается.

Причины длительной загрузки JavaScript

JavaScript не прошедший процесс оптимизации или требующий длительной обработки замедляет работу страницы. Это происходит по целому ряду факторов:

Вес сетевой нагрузки. Чем больше байтов требуется обработать, тем дольше происходит загрузка.
Необходимость обработать и скомпилировать элементы. JavaScript анализируется и компилируется в основном потоке. Когда основной поток занят, страница не может реагировать на действия пользователя.
Время выполнения. Процесс выполнения JavaScript также происходит в основном потоке. Следовательно, если код обширный, не все его элементы требуются пользователю здесь и сейчас. Часть из них будет необходима позже. Но, все они влияют на время взаимодействия со страницей. Из-за этого у юзера появляется ощущение, что страница «тормозит».
Перегруженная память. JavaScript может содержать всевозможные ссылки. И чем их больше, тем сильнее они засоряют память. От этого страницы могут выглядеть громоздкими и медленными. Это может стать причиной полного зависания страницы.

Причины по которым JavaScript может загружаться дольше, чем того хотелось бы — выявлены. И их требует устранить.

Как сократить время выполнения JavaScript

Существует целый ряд рекомендаций, как сократить время выполнения JavaScript. Первая и главная — его следует прописывать внизу страницы. И вот почему. Выполнение скриптов происходит именно в той последовательности, в которой они прописаны. Как только синтаксический анализатор встретит в дереве DOM код JavaScript, он приостановит выполнение DOM и займётся им. При этом, у системы не будет полного набора компонентов, которые требуются для выполнения задачи. Соответственно — выполнить задачу невозможно, пока всё не будет проанализировано и обработано. Только после завершения работы над JavaScript, механизм вернётся к созданию модели DOM. И на это может уйти много времени.

Также в списке рекомендаций: