Lighthouse - это инструмент с открытым исходным кодом, который позволяет нам измерять производительность в Интернете с помощью двух основных компонентов:
- Оценка от 0 до 100 в зависимости от веб-эффективности вашей страницы.
- Отчет с практическими советами по повышению эффективности вашей страницы.
Я собираюсь продемонстрировать, как я получил 100% баллов в Lighthouse с моим приложением React, созданным с помощью Webpack 4.
Прежде чем мы углубимся в эту тему, давайте кратко поговорим о том, почему так важна производительность в Интернете. Согласно отчету Akamai за 2017 год,
Задержка скорости загрузки сайта в 0,1 секунды может привести к падению продаж на 7%.
Если у вас есть бизнес электронной коммерции, приносящий 100 долларов в день, вы потеряете 7 долларов дохода от продаж. Это цена плохой работы в Интернете. Это много. 💰
Я уверен, что с Lighthouse вы сможете улучшить интерфейсное приложение и сделать его удобнее для пользователей. Вы готовы? Давайте перейдем к теме!
Что вам понадобится:
- Установите Lighthouse здесь
- Приложение, созданное с помощью Webpack 4
Когда я запустил аудит Lighthouse в своем приложении, я получил 0%. Но разочаровываться рано. 😀
Это изображение выше - отчет Lighthouse. Здесь вы можете увидеть несколько полезных показателей. Давайте пройдемся по одному.
- First Contentful Paint: время, необходимое для рендеринга любого бита первого текста или изображения.
- Первая значимая отрисовка: время, необходимое для отрисовки полного текста или изображения.
- Индекс скорости: количество времени, которое потребовалось для рендеринга последнего текста или изображения, в секундах.
- Time to Interactive: время, необходимое для того, чтобы страница стала полностью интерактивной.
Оптимизация №1: используйте производственный режим
В Webpack 4 есть два режима: режим разработки и рабочий режим. Самая большая разница в том, что рабочий режим поставляется с плагином сжатия по умолчанию, который минимизирует размер вашего bundle.js. Размер файла bundle.js - один из наиболее важных факторов, влияющих на время загрузки. Вы можете просто запустить следующий код в терминале.
webpack -p
При сжатии по умолчанию вы заметите, что показатель Индекс скорости уменьшился с 23,4 до 3,7 с. Размер моего пакета уменьшился с 4100 КБ до 415 КБ, и я получил оценку 77%!
Оптимизация №2: используйте плагин сжатия
Gzip - это мощный инструмент сжатия, широко используемый в Интернете. Он еще раз сжимает ваш bundle.js с помощью собственного алгоритма. Вы можете установить плагин Gzip, сделав это.
npm install --save-dev compression-webpack-plugin
После установки вам необходимо потребовать такой плагин в вашем файле webpack.config.js:
Размер моего bundle.js уменьшился до 116 КБ с 415 КБ. Мой показатель Индекс скорости уменьшился почти на 1 секунду! 😉
Но знаете, что еще круче? Бротли. Это еще один инструмент сжатия, разработанный Google . Он лучше всего работает с любыми текстовыми файлами, такими как HTML, CSS и JS. Он также поддерживается всеми современными браузерами. Вы можете установить Brotli так:
npm install --save-dev brotli-webpack-plugin
Brotli сократил мой файл bundle.js до 94 КБ, что на 25% меньше, чем раньше, и я получил дополнительные 4%. Одна вещь, с которой вам нужно быть осторожным с Brotli, - это то, что он не поддерживает HTTP по соображениям безопасности. Вам необходимо убедиться, что ваши файлы, сжатые Brotli, передаются по HTTPS.
Оптимизация №3: используйте webpack-bundle-analyzer
Теперь, когда мы знаем, что размер имеет значение, я хотел точно проанализировать, что находится внутри моего bundle.js. Webpack-bundle-analyzer - это инструмент для визуализации содержимого. Если вы запустите этот инструмент, вы увидите интерактивную древовидную карту, показывающую размеры различных компонентов внутри вашего приложения. Область представляет ее относительный размер по сравнению с другими. Если он занимает больше места, это означает, что он относительно больше, чем другие.
Когда я впервые увидел карту, я был удивлен огромным размером Moment.js, который представляет собой библиотеку JS для управления датами. Он занимал больше половины размера. Я вынул его. Я заменил все объекты даты на new Date (), который является собственным объектом JS. После рефакторинга древовидная карта выглядела намного чище.
Если хотите установить, то выполните так:
npm install --save-dev webpack-bundle-analyzer
И снова поместите его в свой webpack.config.js
Из приведенного ниже результата вы заметите, что после удаления ненужных библиотек наблюдается значительное улучшение в целом. Поэтому, когда важна производительность, я бы рекомендовал вам не слишком полагаться на библиотеки. Если вы можете провести рефакторинг с помощью нативных методов, тогда вперед.
Как вы можете видеть на гистограмме ниже, мой файл bundle.js теперь имеет размер 44 КБ, который раньше составлял 414 КБ.
Оптимизация # 4: разделение кода
Что такое разделение кода? Это метод, который разбивает ваш bundle.js на отдельные файлы, так что основной фрагмент вашего bundle.js может отображаться быстрее за счет меньшего размера. Остальные фрагменты будут отображаться, когда это необходимо.
Возможно, вам потребуется установить @ babel / plugin-syntax-dynamic-import, который позволяет нам динамически использовать ES6 import ().
npm install --save-dev @babel/plugin-syntax-dynamic-import
В приведенном ниже фрагменте показано базовое разделение кода. Посмотрите в строке 10, как я использую ES6 import (). Я вызываю функцию только при нажатии кнопки. Поэтому, если пользователь заходит на ваш веб-сайт, и он никогда не нажимает кнопку, то любые компоненты, добавленные к компоненту Page2, никогда не будут переданы по сети. Таким образом, вы можете разделить один пакет, который пользователи видят сразу, и другой пакет, который пользователи могут увидеть, когда условие выполнено.
Оценка ++;
Оптимизация № 5: Оптимизация изображения
Оптимизация изображения имеет решающее значение с точки зрения скорости загрузки. Вот мои предложения:
- Измените размер ваших изображений
- Сжимайте файлы изображений с помощью инструментов
- Рассмотрите возможность использования формата webp для Chrome
Измените исходные изображения до фактического размера, который видят пользователи. В моем случае у меня было 3 фотографии размером 1280 x 725, но размер, который видят пользователи, был 280 x 140. Я обрезал с помощью Windows Paint.
Если ваши фотографии имеют формат jpg или png, то я рекомендую вам взглянуть на этот веб-сайт. Здесь вы можете сжать до 90% без заметной потери качества.
Наконец, я хочу представить формат webp. Это современный формат, обеспечивающий более сильное сжатие изображений. Это тот конвертер, который я использовал.
Оптимизация №6: предварительное подключение
Предварительное подключение - это метод, который выполняет поиск DNS заранее, так что к тому времени, когда вы сделаете запрос на свой сервер, ваш браузер уже знает, где сделать запрос. Ознакомьтесь с документацией здесь.
Реализовать предварительное подключение очень просто. В теге ‹head› вам просто нужно вставить приведенный ниже фрагмент кода, заменив атрибут href.
<link rel="preconnect" href="PUT YOUR SERVER NAME">
Оптимизация № 7: Кешируйте все
Наконец-то 100%. 😍
Все, что я сделал, это кеширование. Итак, что такое кеширование? Кеширование относится к поведению веб-браузеров, которые хранят статические ресурсы во временном хранилище. Это экономит много времени и ресурсов. Вот справочник, чтобы вы могли копнуть глубже.
Резюме
Наконец, , мы сделали это! Мы уменьшили размер моего bundle.js с 4100 КБ до 40 + 4 КБ! Мой Индекс скорости также снизился с 23,4 до 1,5 с! Как видите, Lighthouse - это невероятный инструмент, который помогает нам оптимизировать производительность нашего приложения и значительно повысить удобство работы наших пользователей. Надеюсь, вам понравилась моя статья. Если вам понравилось, пожалуйста, хлопните мне в ладоши!
Удачного кодирования! 💻
Будущие улучшения
Думаю, может быть:
- Рефакторинг с помощью Next.js, который позволяет нам создавать приложение для рендеринга на стороне сервера.
- Сравнительный анализ серверов и баз данных при высоком трафике.
Ресурсы
Https://developers.google.com/web/tools/lighthouse/
https://www.akamai.com/uk/en/about/news/press/2017-press/akamai-releases -spring-2017-state-of-online-retail-performance-report.jsp
https://reactjs.org/docs/code-splitting.html
https: // webpack .js.org / guides / code-splitting
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import