Оптимизация javascript: 14 советов по оптимизации JavaScript-кода

Оптимизация JavaScript — особенности процесса, общие советы

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

Как оптимизировать JavaScript на сайте

Благодаря использованию JavaScript страницы сайта становятся более динамичными и функциональными. Однако, чем больше предусмотрено функционала и динамики в проекте, тем больше скриптов нужно написать и подключить к нему, что может создавать нагрузку. Хороший разработчик всегда ищет возможности оптимизации JS-скриптов на страницах своего проекта.

Оптимизации можно добиться разными способами — от прогонки скриптов через специальные сервисы, которые сокращают код, до изначального продумывания минимизации скриптов. Приведенные ниже советы можно использовать как по отдельности, так и группировать их между собой для достижения большей эффективности. Рекомендуется использовать хотя бы половину из них для заметной оптимизации JavaScript-кода на страницах проекта.

Объявляйте несколько переменных в одной строке

Многие разработчики задают каждую новую переменную на отдельной строке, при этом для задания новой переменной в таком случае приходится повторно прописывать ключевое слово, например, let. Задание новых переменных на новой строке с одной стороны делает код более читабельным для разработчиков, но с другой увеличивает количество символов и время обработки скрипта. Для небольшого проекта это совсем не заметно, а вот в более крупном уже может вызывать видимую просадку в скорости работы.

Пример укороченного написания переменных в JS

JavaScript позволяет писать несколько переменных в одну строку. Используйте эту возможность. Желать начать “правильно” писать переменные с самого начала работы над проектом. Так вы сэкономите и свое время на разработку, и сможете повысить производительность сайта. Конечно, все переменные не обязательно записывать в одну строку. Их можно разделить по категориям, например, в одной строке будут переменные отвечающие за один компонент, в другой за второй и так далее. Такой код и удобно читать разработчикам и нагрузки он создает чуть меньше.

Присваивайте значение нескольким переменным правильно

Этот совет вытекает из предыдущего. Многие, даже опытные разработчики, если и пишут название переменных в одну строку, то значение могут присвоить на разных, например, вот так:

let var1, var2, var3;
var1 = 1;
var2 = 2;
var3 = 3;

Так, конечно, немного лучше, чем задавать кажду переменную на отдельной строке, но это тоже не идеальная записи. Сократить ее можно с помощью массивов. Если прописывать переменные вместе со значениями в одну строку, то это тоже немного поможет в оптимизации JS-кода. Приведенный выше пример можно записать таким образом:

let [var1, var2, var3] = [1, 2, 3];

Похожим образом можно работать и с объектами, только вместо квадратных скобок использовать фигурные.

Пример укороченного написания объектов в JS

Использование альтернативных конструкций if-else

Оператор if и конструкции, с ним связанные часто используются для задания проверок и логических операций. В таких случаях их часто можно сократить, написав вместо ключевых слов только пару операторов. Также их использование позволяет записывать условия в одну-две строки, вместо сложных конструкций, которые используются при написании через стандартные if-else.

Например, вот таким образом можно задать проверку для переменной на Null и undefined всего в одну строку:

if (test1 !== null || test1 !== undefined || test1 !== »)

Однако и это не идеальный вариант — новые версии JavaScript автоматически проводят подобную проверку переменных перед выполнением той или иной функции, поэтому всю конструкцию можно было бы записать вот так:

if (test1)

В приведенном примере оператор if самостоятельно проведет проверку и приведет переменную к логическому значению.

Использовать логические операторы вместо if

Использование логических операторов || и && позволяет записывать код проверки того или иного логического условия гораздо короче. Порой большую конструкцию можно записать всего в одну строку, что в крупном объеме позволяет значительно оптимизировать код.

Использование логических операторов вместо if в JS

Также вместо стандартных проверок можно активно использовать тернарные операторы, что позволяет писать большие проверку в одну-две строки.

Укорочение цикла for

Стандартный вид цикла for имеет громоздкую структуру по умолчанию, которую тоже можно и нужно оптимизировать. Это стало сделать гораздо проще благодаря нововведениям в последних версиях JavaScript. Например можно использовать такую запись:

for (let i of testData)

Также в некоторых случаях вместо стандартного цикла for можно использовать функциональный метод forEach. Он тоже позволяет делать более короткую запись, плюс, его удобнее читать. Однако данный вариант записи все равно имеет некоторые ограничения. Например, перебор массива методом forEach нельзя прервать с помощью инструкции break.

Упрощайте математические операции

Для преобразования строк в числа можно использовать оператор сложения, как в этом примере:

let var1 = +’123′;
let var2 = +’12.3′;

Оптимизировать можно некоторые математические операции:

• ** — возведение числа в степень. Пример записи: 2**3 — возведение числа 2 в степень 3;
• ~~ — округление чисел. Примечательно, что округление происходит в этом случае в меньшую сторону, например, ~~1.9 будет 1, а не 2.

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

Также можно оптимизировать некоторые числа с большим количеством нулей на конце. Например, число 1000000 можно записать как 1e6.

Присваивание значений объектам

Можно отказаться от присваивания значений объектам, если имя свойства совпадает с именем переменной. Это позволяет избежать ненужных дублей, а также сократить время на написание кода.

Общие советы по оптимизации кода JavaScript

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

Продумывайте кэширующие механизмы

JS-скрипты часто могут использоваться для доступа к какому-то элементу сайта. Если разработчик изначально предусмотрит возможность сохранения данных сайта в кэше браузера пользователя, то получится меньше обращений, плюс, уменьшится и время на выполнение операций. Сделать кэширование можно двумя вариантами:

• JavaScript-API Cache — работает за счет API и связанных онлайн-сервисов, его легко настраивать, но есть некоторая зависимость проекта от работы сторонних сервисов, находящихся удаленно;
• HTTP-кэш — работает за счет использования только браузера пользователя, точнее его кэша. Настроить немного сложнее, зато этот метод является более надежным.

Очищайте код

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

Еще рекомендуется оптимизировать операции, которые пользуются спросом пользователей. Например, процесс регистрации можно упростить, когда вместо заполнения большой формы и ее проверки, пользователь может, например, авторизоваться через уже созданный аккаунт в какой-нибудь социальной сети. Таким образом получится “убить двух зайцев” — оптимизировать код и сделать сайт более дружелюбным для пользователей.

Также не забывайте следить за развитием технологий. Сам JavaScript время от времени совершенствуется, плюс, еще быстрее совершенствуются библиотеки для него и появляются новые. Через некоторое время вам может потребоваться доработать код для функционала сайта с использованием новых решений. Обычно они как раз направлены на оптимизацию. Правда, к новинкам нужно подходить выборочно, так как некоторые из них вместо желаемой оптимизации могут сделать код еще более тяжелым.

Предусмотрите отложенную загрузку для второстепенных скриптов

Вряд ли для корректной работы веб-страницы нужно сразу загружать сразу весь JavaScript-код. Продумайте отложенную загрузку скриптов. Они не должны загружаться со страницей вместе, а только в том случае, если пользователь совершит какое-то действие на странице, например, нажмет кнопку. Если бы скрипт загрузился вместе со страницей, а пользователь бы не нажал кнопку, то ничего бы не произошло, а страница грузилась бы немного дольше. Если же скрипт будет подгружаться только после действия пользователя на странице, то пользователю, возможно, придется подождать лишнюю секунду-другую, пока выполнится действие. Это все равно намного лучше, чем если бы ему пришлось ждать эти пару секунд, пока полностью загрузится страница.

Если подойти к отложенной загрузки контента на странице комплексно, то можно будет избежать загрузки и компилирования браузером большого объёма JS-кода в самом начале работы. Благодаря этому страницы сайта будут быстрее загружаться. Также Google и Яндекс отдают больший приоритет при ранжировании поисковой выдачи проектам с высоким уровнем оптимизации, даже обычный пользователь ее вряд ли заметит.

Обычно разработчики предусматривают механизм, когда сначала загружается сама страница и ее основной функционал, а только потом весь JavaScript-код без совершения каких-либо действий со стороны пользователя. В коде можно настроить время, через которое будут подгружаться скрипты при отложенной загрузке. Google рекомендует устанавливать задержку в 50 мс. За это время обычно основной контент страницы уже прогрузился, а пользователь пока не успел совершить никаких действий. Единственный возможный недостаток — некоторая анимация может подтормаживать, если она вынесена на главный загрузочный экран.

Устраните возможные утечки памяти

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

Проанализировать сайт на утечки памяти можно с помощью встроенного в браузер Google Chrome инструментария для разработчиков. Делается это во вкладке Perfomance. Таким образом разработчик получит информацию, где именно наблюдается утечка памяти и сможет предпринять действия для ее устранения. Очень желательно перед окончательным запуском проекта проверить его на возможные утечки памяти и все их устранить или хотя бы минимизировать.

Ограничьте использование глобальных переменных

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

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

Мониторьте производительность

Некоторые проблемы оптимизации можно обнаружить только после запуска сайта. Используйте для этих целей специализированные инструменты. Очень хорошо, если вы сможете наладить обратную связь с пользователями, чтобы они быстро сообщали об обнаруженных проблемах. Иногда недоработки в оптимизации скриптов видны только при определенной нагрузке на ресурс со стороны пользователей.

Мониторинг производительности JS

Однако для более корректного анализа производительности JS-скриптов на проекте рекомендуется пользоваться сторонние сервисы. Lighthouse и Google PageSpeed неплохо зарекомендовали себя. Они помогут понять, где есть просадки в производительности.

Заключение

В реальных проектах JavaScript-разработчик, да и бэкендер или фуллстак должны в обязательном порядке продумывать оптимизацию кода. Степень ресурсов, которые потребуется в нее вложить зависит от проекта. Если это небольшой проект, то вполне будет достаточно просто пользоваться правилами написания короткого JS-кода и сделать отложенную загрузку элементов. В более крупных проектах уже этого может быть недостаточно и потребуется полноценная техническая поддержка, которая будет искать учетки, устранять их, обновлять функционал в соответствии с последними техническими решениями библиотек JavaScript, да и самого языка программирования.

Оптимизация кода Javascript, советы от Google

Содержание:

1. Минимизация количества файлов JavaScript
2. Минимизация количества запросов к DNS-серверу
3. Оптимизация кода JavaScript
4. Отслеживание неиспользуемых JavaScript
5. Сжатие JavaScript
6. Контроль срока кэширования JavaScript
7. Заключение

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

Компания Google и ее разработчик Алан Кент сформулировали шесть советов, которые помогут оптимизировать работу JavaScript на вашем сайте, чтобы он начал работать быстрее.

Минимизация количества файлов JavaScript

Чем больше файлов JavaScript подключено на сайте, тем тяжелее он становится. Особенно это заметно, если использовать отдельный файл под каждый UI-компонент. Если сократить их количество, то браузеру придется выкачивать меньше данных при переходе на ваш сайт, и он будет загружаться быстрее.

Как обнаружить проблему? Можно использовать стандартный сервис Google PageSpeed Insights. Если с его помощью проведена диагностика сайта и в списке рекомендаций есть пункт «Постарайтесь снизить количество запросов и размеры передаваемых данных», то это стопроцентный признак перегруженности сайта файлами JavaScript. При клике на пункт рекомендации открывается статистика по количеству и типу ресурсов, которым требуются JavaScript.

Как исправить ситуацию? Проще всего объединить несколько маленьких файлов в один более крупный. По интернет-каналу быстрее передать один файл, чем несколько, даже если они равноценны по размеру. Если по каким-то причинам этот вариант нельзя использовать, можно подключить усовершенствованный сетевой протокол, HTTP2, который ускорит передачу мелких файлов.

Минимизация количества запросов к DNS-серверу

При первом визите пользователя на сайт, когда в кэше еще ничего нет, идет много запросов к DNS-серверу и файлам JavaScript. Это очень замедлит именно первую подгрузку сайта и испортит первое впечатление, даже если в будущем сайт из-за кэша будет грузиться заметно быстрее.

Чтобы диагностировать эту проблему, можно снова обратиться к Google PageSpeed Insights. В разделе «Сократите время выполнения кода JavaScript» он показывает URL, с которых идет загрузка файлов. Нужно уменьшить объем передаваемых данных и количество запросов. Рекомендуемое время выполнения кода – не более трех секунд.

Чтобы решить проблему, следует провести оптимизацию JavaScript: разместить на своем сайте копии файлов, которые загружаются с внешних источников. Таким образом, количество запросов к DNS-серверу снизится, поскольку все необходимое будет на сайте.

Читайте также:

Как проверить скорость загрузки страниц сайта?

Оптимизация кода JavaScript

Если какой-то из файлов JavaScript неэффективно работает, он тем самым увеличивает время выполнения запросов и замедляет загрузку сайта. С помощью Google PageSpeed Insights можно получить рекомендации сразу по четырем пунктам:

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

Для устранения этих проблем необходима оптимизация JS кода. Это может быть профилирование существующего кода или его полноценное переписывание.

Отслеживание неиспользуемых JavaScript

Наличие файлов JavaScript, которые не используются – это очень частая проблема. Фактически это означает, что браузер будет скачивать лишние файлы при каждой загрузке сайта, то есть тратить время впустую.

Диагностика Google PageSpeed Insights может сигнализировать об этой проблеме по трем пунктам:

• «Удалите неиспользуемый код JavaScript». Основной пункт по отслеживанию файлов, которые не нужны при загрузке страницы.
• «Минимизируйте работу в основном потоке». Это информация по времени загрузки, анализа и компиляции JavaScript.
• «Предотвратите чрезмерную нагрузку на сеть». Тут можно будет увидеть, какие блоки сайта требуют скачивания самых крупных файлов.

В качестве решения проблемы Алан Кент рекомендует классический подход tree-shaking («встряхивание дерева»). С его помощью можно оптимизировать базы библиотек, вычистив неиспользуемые файлы.

Сжатие JavaScript

Сжатие загружаемых файлов для уменьшения их веса – простой и рабочий способ ускорить открытие страниц. Браузеру, конечно, придется потратить немного времени на распаковку, но в результате все равно будет выигрыш по скорости загрузки сайта.

В отчете Google PageSpeed Insights есть пункт «Включите сжатие текста». Перечисленные в нем файлы предположительно дадут хороший прирост быстродействия, если их сжать. Большинство систем управления и браузеров имеют встроенный инструмент сжатия загрузок.

Контроль срока кэширования JavaScript

Хранение данных в кэше ускоряет повторные загрузки страниц, так как часть данных уже выгружена на машину пользователя. Однако нельзя кэшировать все подряд и на долгий срок: браузер проверяет ресурс на актуальность данных, поэтому масса файлов в кэше замедляют загрузку сайта, а не ускоряют. Эта проблема обычно решается установлением срока хранения файлов JavaScript в кэше.

Выберите в Google PageSpeed Insights пункт «Задайте правила эффективного использования кеша для статических объектов». Он содержит те файлы JavaScript, которые нужны постоянно и которые выгоднее хранить как можно дольше. Также Алан Кент рекомендует хранить наиболее часто используемые файлы в общедоступном хранилище. В таком случае при загрузке страницы сайта, использующей подобный файл, браузер сразу же обратится к загруженной ранее копии, что увеличит скорость загрузки.

Заключение

Оптимизация производительности JavaScript – это очень глубокая и сложная тема. Однако даже использование приведенных выше шести советов поможет значительно ускорить загрузку вашего сайта, произвести хорошее впечатление на пользователей и привлечь новых клиентов. Великолепный дизайн, активный маркетинг и усилия SEO-специалистов по продвижению вашего продукта не сработают, если сайт кажется потенциальным пользователям медленным и неоптимизированным, поскольку именно сайт – первое, что они видят.

Производительность JavaScript — Изучите веб-разработку

• Предыдущий
• Обзор: Производительность
• Следующий

В то время как изображения и видео составляют более 70% байтов, загружаемых для среднего веб-сайта, байт за байтом, JavaScript оказывает большее негативное влияние на производительность. В этой статье рассматриваются проблемы с производительностью, вызванные скриптами, а также советы и рекомендации по оптимизации JavaScript для веб-производительности.

Предпосылки:	Базовая компьютерная грамотность, установленное базовое программное обеспечение и базовые знания клиентские веб-технологии.
Цель:	Чтобы узнать о влиянии JavaScript на оптимизацию производительности, см. и как размер файла JavaScript не единственное влияние на веб- производительность.

Как и в случае с изображениями и видео, лучший способ повысить производительность — исключить то, что на самом деле не нужно. Но не все загруженные байты имеют одинаковое влияние. Байты JavaScript должны быть загружены, проанализированы и выполнены. JavaScript влияет на скорость загрузки. Мы рассмотрим советы и приемы, чтобы свести к минимуму это влияние на загрузку.

Но JavaScript также может потреблять основной поток, ЦП и батарею. Это может заставить пользовательский интерфейс чувствовать себя невосприимчивым или дерганым. Мы также представим концепции для обработки этого.

Веб-приложения содержат большое количество JavaScript. Многие приложения создаются с использованием фреймворка JavaScript или нескольких, с несколькими дополнительными зависимостями. Часто добавляются сторонние скрипты и API, включая A/B-тестирование, отслеживание пикселей и такие функции, как карты и функции поддержки. Весь этот JavaScript должен быть загружен. В конце концов.

Оптимизация производительности должна включать:

• Уменьшение объема необходимого JavaScript.
  Некоторые функции, требующие сложного JavaScript, можно реализовать с помощью нескольких строк JavaScript. Требование библиотеки для других функций может улучшить опыт разработчиков, но нужен ли только JavaScript? Есть ли более легкий вес или самодельные решения? Некоторые функции могут быть ненужными, и хотя они могут добавить изюминку, стоит ли их стоимость с точки зрения производительности?
• Удалить неиспользуемый код.
• Разделите JavaScript на файлы меньшего размера. Разделите код JavaScript на критические и некритические части. Сборщики модулей, такие как webpack, поддерживают разделение кода.
• Оптимизируйте эти файлы меньшего размера. Минификация уменьшает количество символов в вашем файле, тем самым уменьшая количество байтов или вес вашего JavaScript. Gzip-сжатие еще больше сжимает файл, и его следует использовать, даже если вы не минимизируете. Brotli похож на Gzip, в целом превосходя сжатие Gzip.

Веб-приложения содержат большое количество JavaScript. Многие приложения создаются с использованием фреймворка JavaScript или нескольких, с несколькими дополнительными зависимостями. Часто добавляются сторонние скрипты и API, включая A/B-тестирование, отслеживание пикселей и такие функции, как карты и функции поддержки.

Хотя оптимизация медиафайлов и сценариев значительно улучшит производительность веб-сайтов, все, что касается веб-страниц, влияет на производительность. В следующей статье мы рассмотрим некоторые функции HTML, которые могут повлиять на производительность, в том числе некоторые атрибуты, специально созданные для повышения производительности.

• Предыдущий
• Обзор: Производительность
• Следующий

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 26 февраля 2023 г. участниками MDN.

6 советов по оптимизации JavaScript от Google

В новом видео от Google защитник разработчиков Алан Кент рассказывает о шести способах оптимизации JavaScript для повышения производительности вашего веб-сайта.

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

1. Избегайте распространения файлов JavaScript

Избегайте увеличения количества файлов JavaScript на вашем сайте.

Количество файлов JavaScript может стать чрезмерным, если вы не будете осторожны, особенно если каждый компонент пользовательского интерфейса находится в отдельном файле.

Уменьшение количества файлов JavaScript, загружаемых браузером, может повысить производительность веб-сайта.

Как определить

В разделе Возможности отчета PageSpeed ​​Insights перечислены рекомендации, относящиеся к вашему сайту.

Ищите рекомендацию поддерживать низкое количество запросов и небольшие размеры передачи .

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

Как исправить

Эту проблему можно решить несколькими способами. Один из вариантов, который рекомендует Google, — это объединить файлы меньшего размера вместе, чтобы загрузить один файл большего размера.

Еще одно исправление — поддержка HTTP2 на вашем сайте, так как это может повысить производительность без объединения файлов.

2. Избегайте чрезмерного количества запросов DNS

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

Как обнаружить

PageSpeed ​​Insights может показать вам список доменных имен, используемых в URL-адресах в таких разделах, как сократить время выполнения JavaScript .

Вкладка сети в инструментах разработчика Chrome — это еще один способ увидеть все упомянутые доменные имена.

Как исправить

Чтобы уменьшить количество запросов DNS, Google предлагает вам рассмотреть возможность размещения копии файлов JavaScript с внешними ссылками на вашем собственном сайте.

3. Исключить неэффективный JavaScript

Уменьшите или исключите неэффективный JavaScript, так как он может замедлять работу веб-страниц и ухудшать работу пользователей.

Как обнаружить

Найдите в отчете Google PageSpeed ​​Insights следующие возможности:

• Сокращение времени выполнения JavaScript.
• Устранение ресурсов, блокирующих рендеринг : Сюда входит JavaScript, который может выполняться до того, как страница сможет рендериться, что заставляет пользователя дольше ждать, чтобы увидеть какой-либо контент.
• Document.write : при неправильном использовании это может привести к значительным проблемам с производительностью страницы, поскольку оно блокирует выполнение других операций.
• Не использует пассивных слушателей : Пассивный слушатель — это подсказка браузеру о том, что код JavaScript не будет вызывать функцию, предотвращающую прокрутку, позволяя браузеру прокручивать страницу даже во время выполнения JavaScript.

Как исправить

Устранение неэффективного JavaScript — более широкая тема, которая выходит за рамки видео Google.

Решения обычно включают в себя другой способ написания кода JavaScript. Методы включают профилирование существующего кода и написание собственных уменьшенных версий более мощных компонентов.

4. Удалите неиспользуемый JavaScript

Неиспользуемый JavaScript также неэффективен, но Google говорит, что эта проблема достаточно распространена, чтобы вызывать ее самостоятельно.

Повторное использование кода на разных сайтах может привести к включению ненужного JavaScript.

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

Как обнаружить

Найдите следующие возможности в отчете Google PageSpeed ​​Insights:

• Уменьшите неиспользуемый JavaScript : Это показывает вам JavaScript, который не был выполнен как часть загрузки страницы.
• Избегайте огромных сетевых нагрузок : Это определяет области для улучшения, вызывая загрузку больших библиотек.
• Минимизировать работу основного потока : Включает время, затраченное на синтаксический анализ, компиляцию и выполнение JavaScript.

Как исправить

Google рекомендует метод, называемый встряхиванием дерева, который можно использовать для идентификации кода JavaScript, который никогда не вызывается и который можно безопасно удалить.

5. Сжатие файлов JavaScript

Убедитесь, что ваши файлы JavaScript сжаты при загрузке. В то время как веб-браузеру приходится тратить больше процессорного времени на распаковку содержимого файла, Google говорит, что сжатие — это общая победа.

Как обнаружить

В отчете PageSpeed ​​Insights есть раздел, посвященный файлам JavaScript, сжатие которых может принести пользу.

При нажатии Включить сжатие текста вы увидите, какие файлы рекомендуется сжимать.

Как исправить

Большинство веб-браузеров или систем управления контентом имеют встроенную поддержку сжатия загружаемых файлов, если они правильно настроены.

6. Установите подходящие сроки кэширования для кода JavaScript

Убедитесь, что ваши файлы JavaScript возвращаются с соответствующими заголовками срока действия кэша.

Это помогает браузерам избежать накладных расходов на проверку того, не устарели ли файлы JavaScript в его кеше, что повышает производительность.

Как обнаружить

На вкладке Сеть в Инструменты разработчика Chrome вы можете проверить заголовки ответа HTTP на наличие загружаемых файлов JavaScript. Ищите заголовки, такие как Cache Control .

В PageSpeed ​​Insights найдите возможность под названием Подавать статические ресурсы с помощью эффективной политики кэширования . Нажав на нее, вы увидите список ресурсов, включая файлы JavaScript, которые могут извлечь выгоду из правильно установленных заголовков кеша.