JavaScript является одним из основных факторов, увеличивающих время загрузки веб-сайта. Вот как вы можете ускорить загрузку JavaScript.
На многих современных веб-сайтах много JavaScript. На самом деле, согласно HTTP Archive, средняя страница рабочего стола содержала более 500 килобайт JavaScript. Проблема в том, что JavaScript требует времени как для загрузки, так и для анализа, из-за чего веб-сайты загружаются намного медленнее и, следовательно, влияют на удержание, поскольку пользователи уходят, если веб-сайт загружается слишком долго. К счастью, есть простые способы уменьшить количество JavaScript, загружаемого на ваш веб-сайт, и ускорить загрузку JavaScript, который мы рассмотрим сегодня.
Как ускорить загрузку JavaScript
1. Ленивая загрузка
Не весь JavaScript требует мгновенной загрузки, когда пользователь впервые посещает веб-сайт. Например, у вас может быть приглашение для регистрации по электронной почте внизу страницы. Если пользователь не прокрутит туда, нет необходимости загружать.
Из-за этого многие веб-разработчики используют технику, называемую отложенной загрузкой. Вместо того, чтобы загружать весь JavaScript сразу, ленивая загрузка разгружает часть JavaScript. Существует несколько различных форм ленивой загрузки.
Например, для элементов, которые не должны быть активны немедленно, но должны быть активны достаточно быстро, вы можете подождать, пока страница не станет бездействующей, используя requestIdleCallback().
Или, как мы уже говорили, если внизу страницы есть интерактивный элемент, вы можете подождать, пока пользователь прокрутит вниз до этого элемента, используя intersectionObserver.
Теперь остается вопрос: как вы на самом деле загружаете код позже? Один из лучших способов сделать это — динамический import(), который является частью Модулей ECMAScript (ESM). Динамический импорт помогает загрузить сценарий в любое время, запустив функцию import(). Например, это загрузит скрипт, когда браузер будет бездействовать:
Другой вариант — просто использовать атрибут async или defer в сценариях. Этот метод гораздо менее гибкий, но это простой способ заставить сценарий ждать, пока DOM не будет собран.
2. Минификация
Минификация — это простой способ значительно повысить производительность. Обычно это делается с помощью автоматизированных майнеров типа Terser или ESBuild. Эти инструменты существенно сокращают ваш код, удаляя пробелы, длинные имена переменных и другие вещи, которые полезны при разработке, но увеличивают размер сценария в рабочей среде. Например, предположим, что я минимизировал этот код с помощью Terser:
Результат будет:
Это сокращение на 67 байт, с 203 до 136 байт! Это немного не будет иметь заметного значения, но для более крупных скриптов минификация может оказать значительное влияние.
3. Комплектация
Размер сценария — не единственное, что имеет значение. Счетчик запросов тоже имеет значение, так как каждый запрос добавляет накладные расходы. По сути, вы хотите свести количество сценариев к минимуму. Тем не менее, разделение кода обычно является практикой кода для поддержания чистоты кода. К счастью, для решения этой проблемы, как и у минификаторов, есть автоматизированные инструменты. Они называются бандлерами. Сборщики анализируют ваш код, смотрят, какие скрипты импортируют друг друга, и выясняют, как их объединить. Самые известные сборщики — Webpack, Rollup и Vite.
Еще одним преимуществом использования сборщиков является то, что большинство сборщиков также функционируют как инструменты сборки, упрощая такие вещи, как минимизация и компиляция TypeScript. Подробнее о сборщиках читайте в моей статье о них.
4. Разделение кода
Вы можете быть удивлены, что это сразу после связывания. «Я связываю свой код только для того, чтобы разделить его обратно?» Не обязательно. На самом деле это особенность бандлеров. Хотя сокращение количества запросов — это здорово, вы не хотите, чтобы пользователю приходилось загружать весь код на вашем веб-сайте сразу. Вы можете решить эту проблему, создав новый полный пакет для каждой страницы, но это сведет на нет некоторые преимущества кэширования (о которых мы поговорим позже).
Чтобы решить эту проблему, у нас есть разделение кода. Разделение кода сочетает в себе преимущества объединения и отложенной загрузки, гарантируя, что ненужный код для страницы не будет загружен. Сборщики выполняют разделение кода, анализируя карту импорта и выясняя, какие скрипты должны быть в их собственном пакете. Большинство сборщиков делают это автоматически, хотя может быть полезно написать код, который легче анализировать (например, используя статический импорт, где это возможно).
5. Сотрясение дерева
Еще одна распространенная черта сборщиков — встряхивание дерева. Вы можете импортировать часть библиотеки, но остальное вам не понадобится. Однако, если вы сделаете это без встряхивания дерева, конечные пользователи в конечном итоге загрузят всю библиотеку, что может добавить много JavaScript. Встряхивание дерева решает эту проблему; Сборщики, поддерживающие встряхивание дерева, автоматически удаляют неиспользуемые части библиотек, значительно сокращая объем импортируемого кода.
Например, взгляните на Lodash (если быть точным, lodash-es), большую служебную библиотеку JavaScript. Весь модуль минимизирован почти на 100 килобайт, но если бы вы просто использовали функцию intersect(), вы бы импортировали только 2,7 килобайта кода. Теперь, в случае Lodash, есть пакеты, которые содержат только отдельные функции, но их использование может быть более раздражающим, если вы используете много функций, а многие библиотеки этого не делают.
6. Модули ECMAScript
Для работы многих ранее упомянутых функций модули ECMAScript (ESM) очень полезны или даже необходимы. ESM — это спецификация модуля, разработанная для стандартизации обмена кодом между разными файлами. До ESM существовали противоречивые стандарты, такие как CommonJS и UMD, которые даже изначально не поддерживались браузерами. ESM объединил эти стандарты и предложил синтаксис, который помог с такими функциями, как встряхивание дерева (обратите внимание, как я сказал использовать lodash вместо стандартного lodash в предыдущем). Кроме того, поскольку ESM изначально поддерживается в браузерах, вам не нужен тяжелый полифилл, чтобы использовать ESM.
7. CDN
Размещать статические файлы на собственном сервере бессмысленно. Использование полного сервера для реальных вычислений на стороне сервера увеличивает ваши затраты, сложность разработки и время загрузки веб-сайта. Вместо этого CDN являются лучшим решением. CDN (сеть доставки контента) — это сеть серверов, предназначенная для быстрого и дешевого обслуживания статических файлов. Вместо того, чтобы обслуживать только один сервер, вы можете обслуживать файлы с десятков или сотен серверов (в зависимости от CDN), что снижает задержку, поскольку серверы находятся ближе к пользователям.
Кроме того, CDN часто настраивают для вас такие вещи, как кэширование и сжатие, что позволяет сэкономить время. Некоторыми популярными примерами CDN являются Cloudflare CDN и Amazon CloudFront.
8. Кэширование
Несмотря на то, что первая загрузка имеет важное значение, вам также необходимо подумать о производительности для повторных посетителей вашего сайта. Одним из способов значительно ускорить повторные посещения является кэширование. Кэширование браузера работает путем сохранения копии ресурсов веб-сайта и использования этой копии вместо ее повторной загрузки. Это означает, что повторные посещения кажутся почти мгновенными.
Чтобы настроить кеширование, вам нужно установить заголовок Cache-Control в ответе для ресурса, который вы кешируете. Если вы используете CDN, это, вероятно, автоматически настроено для вас. Если нет, настроить достаточно просто.
9. Сжатие
Я уверен, что вы сталкивались с .zip или .tag.gz файлами. Возможно, вы также знаете, что наряду с преобразованием каталога в файл они также уменьшают размер файлов. Уменьшение размера выполняется с помощью сжатия. Сжатие работает, запуская алгоритм, чтобы найти способы сделать файл меньше, уменьшая повторяющиеся операторы и выполняя некоторые другие действия в зависимости от используемого алгоритма. Существует множество популярных алгоритмов сжатия, таких как deflate, lz4, Brotli и Zstandard. Сжатие, которое используют файлы zip и gzip, называется deflate.
Реализовать сжатие может быть немного сложно, но есть простые способы сделать это. Самый простой способ — использовать CDN, который автоматически сжимает файлы, как мы говорили в № 7. Еще один простой способ реализовать сжатие — запустить файловый сервер, поддерживающий сжатие.
Однако, если вы не можете сделать ни того, ни другого, есть и другие решения. У многих инструментов/сборщиков сборки есть плагины, которые автоматически генерируют сжатые формы файлов, которые вы можете использовать, чтобы браузер автоматически распаковывал их. Браузер сообщает вам, какие алгоритмы сжатия он поддерживает, используя заголовок Accept-Encoding, а ваш сервер сообщает браузеру, какой алгоритм сжатия используется в ответе, используя заголовок Content-Encoding.
Для получения дополнительной информации ознакомьтесь со статьей MDN о HTTP-сжатии.
10. Маяк и автоматизированный аудит производительности
Маяк — это инструмент, который помогает вам автоматически проверять эффективность вашего веб-сайта, а также несколько других категорий, таких как SEO и доступность. Это может быть чрезвычайно полезно для поиска проблем с производительностью и обеспечения простого пути их решения. Если у вас Chrome или другой браузер на основе Chromium, Lighthouse должен быть доступен по умолчанию. Если вы используете другой браузер, вы можете скачать расширение или использовать PageSpeed Insights. PageSpeed Insights также предлагает данные от реальных пользователей, которые могут быть полезны, если вы хотите увидеть, что на самом деле испытывают пользователи.
Заключение
С помощью этих советов вы должны добиться значительного прироста производительности на своем веб-сайте, что приведет к большему удержанию и конверсии. Спасибо за прочтение!
Первоначально опубликовано на https://byteofdev.com 18 августа 2022 г.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
