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

*Некоторые примеры взяты из проекта Vue, но следующие советы можно использовать независимо от платформы.

1. Разделение кода

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

*Разделение кода может выполняться на уровне представления, маршрута или компонента.

2. Динамический импорт сторонних библиотек

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

3. Удалите ненужные сторонние библиотеки и замените их менее обременительными решениями.

Проанализируйте библиотеки, которыми вы пользуетесь. Проверьте их стоимость (можно воспользоваться замечательным сайтом bundlephobia.com) и подумайте, можно ли заменить их менее обременительным решением. Примером может служить удаление библиотеки vue-country-flag (размер в распакованном виде: 1,09 МБ) и замена ее значками svg, которые загружаются по запросу.

4. Импортируйте только необходимые части библиотек

Мы часто используем большие и тяжелые библиотеки, такие как lodash или moment.js в наших приложениях. Заманчиво импортировать всю библиотеку, потому что она понятна и импорт умещается только в одну строку кода.

import _ from ‘lodash’

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

К сожалению, у этого решения есть и недостатки. Для каждого метода мы должны импортировать определенную функцию из библиотеки. Итак, у нас есть другой вариант: мы можем использовать babel-plugin-lodash вместе с lodash-webpack-plugin для выбора только используемых функций. В этом случае мы можем импортировать полную библиотеку Lodash только один раз в начало файла, а об остальном позаботятся плагины во время сборки. К сожалению, как и в предыдущих случаях, у этого варианта есть и недостаток, а именно потенциальное увеличение времени сборки. Поэтому, если вы используете очень небольшое количество функций — вы должны импортировать их только одну за другой. Но если вы используете десятки функций, то используйте плагины Babel и WebPack. Благодаря этому решению мы будем загружать только те библиотечные функции, которые действительно используем.

5. Удалите ненужный CSS

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

*Дерево рендеринга очень похоже на дерево DOM, за исключением того, что оно также включает стили для каждого узла.

6. Сжимайте компоненты с помощью Gzip/Brotli

Gzip/Brotli сжимает ваши веб-страницы и таблицы стилей перед их отправкой в ​​браузер. Когда пользователь заходит на ваш сайт, на ваш сервер поступает вызов для доставки запрошенных файлов. Чем больше эти файлы, тем больше времени потребуется, чтобы они попали в ваш браузер.
Например, в Nuxt есть отличный модуль (nuxt-compress), который запускает сжатие Gzip и Brotli в процессе сборки. Если вы работаете с другой библиотекой, вы можете использовать сжатие-webpack-plugin.

7. Кэшируйте активы с помощью Service Worker

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

8. Предварительно загрузите важные пакеты

Как разработчики, мы должны знать, какие ресурсы наиболее важны для нашей страницы. Имея это в виду, мы можем заранее запросить критические ресурсы и ускорить процесс загрузки.
Самый простой способ реализовать предварительную загрузку — добавить тег link к head документа:

<link rel="preload" as="script" href="critical.js">

9. Уменьшите размер фотографий и значков

По данным HTTP Archive, по состоянию на ноябрь 2018 года изображения составляют в среднем 21 % от общего веса веб-страницы.
Вы должны использовать эти знания для оптимизации каждого изображения на своем веб-сайте. Это означает, что он должен иметь оптимальный размер, чтобы он не влиял на загрузку вашего сайта.

Как это сделать:

  • Уменьшите размер файла перед загрузкой
  • Используйте оптимизатор изображений
  • Разместите свои изображения на CDN
  • Добавить плагин отложенной загрузки

Оптимизация изображений определенно улучшит производительность вашего сайта, SEO и улучшит взаимодействие с пользователем.

10. Предварительное подключение к необходимым источникам

Использование ключевого слова preconnect дает сигнал браузеру установить ранние подключения к важным сторонним источникам. Установление соединения часто требует значительного времени в медленных сетях. Способ реализации предварительной загрузки заключается в добавлении тега link к head документа:

<link rel="preconnect" href="https://www.example.com">

Спасибо и надеюсь, что вы узнали что-то ценное из этого.

использованная литература