Типа ты делаешь 20% работы и получаешь 80% пользы(ну, может быть)

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

Вот уже очень хорошее руководство по различным аспектам веб-перфоманса. Но, возможно, это более короткое руководство, которое, надеюсь, поможет вам пройти 80% пути.

Итак, двигаемся 🌾

Используйте облегченные сторонние библиотеки

Первый принцип — выбирайте библиотеки, которые не делают слишком много того, что вам нужно в данный момент. В противном случае вы отправите ненужный Javascript на устройства ваших пользователей, увеличите время загрузки вашей страницы, а затем потратите впустую их драгоценные данные, батарею и память. Отправляйте меньше Javascript!

Добавьте эти ключевые слова при поиске в Google: lightweight , blazing fast , alternative. например Поиск в Google облегченной библиотеки дат и времени выдаст dayjs и date-fns, а не массивные momentjs.

И вместо популярных React, Redux-Form, React-Router и Redux рассмотрите Preact, Formik, Preact-router. strong> и Unistore — их легко подобрать, значительно меньше интеллектуальных затрат, и вместе они создают SPA-центр так же, как Что ж!

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

Уменьшите вес вашего пользовательского шрифта

Размер файла пользовательского шрифта может легко достигать 200 КБ. Это требует времени для загрузки, особенно в мобильной сети. Без каких-либо мер по смягчению последствий пользователи столкнутся со вспышкой невидимого текста (FOIT) — все тексты будут отображаться только через несколько секунд. На самом деле это поведение загрузки шрифтов по умолчанию для большинства браузеров (см. таблицу здесь).

Быстрое решение для FOIT — установка font-display: swap на вашем @font-face :

@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-SemiBold.subset.woff2") format("woff2")
  font-weight: 600;
  font-display: swap;
}

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

Однако отображение системных шрифтов во время ожидания наших пользовательских шрифтов приводит к новой проблеме, которая называется Flash of Unstyled Text (FOUT).

Эффект FOUT особенно заметен благодаря следующим двум факторам:

  1. Файлы пользовательских шрифтов огромны. 5 различных стилей шрифтов X 200 КБ = 1 МБ шрифтов!
  2. Ваш пользовательский шрифт сильно отличается от системного шрифта, что приводит к общему скачку макета во время замены.

Первый фактор можно смягчить, «настроив» ваш шрифт так, чтобы он содержал только то подмножество символов, которое вам нужно. Ниже приведено руководство, которое я написал с этой целью:



Подстановка ваших шрифтов в Windows 10 с помощью WSL
«Подстановка вашего пользовательского шрифта, чтобы использовать только нужные вам символы и, следовательно, уменьшить размер файла до среднего. ком»



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

Вы также можете полностью отказаться от FOUT, если контент занимает центральное место в вашем бизнесе (например, Medium). тут разные рецепты



zachleat/web-font-loading-recipes
Набор демонстраций различных стратегий загрузки веб-шрифтов. Компаньон для…github.com



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

Разделение кода для отправки меньшего количества Javascript

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

Разделение кода имеет 3 основных преимущества:

  1. Минимизируйте размер пакета вашего основного приложения, чтобы повысить начальную скорость загрузки страницы, а не ВЕСЬ ваш Javascript в ОДНОМ .js файле. 🌻
  2. Избавьте пропускную способность пользователя от загрузки кусков тех функций, которые они никогда не используют. 🍀
  3. Включите кэширование фрагментов вашего приложения, вместо того, чтобы заставлять пользователя снова загружать один файл app.js размером 5 МБ только потому, что вы исправили опечатку в файле компонента «Удалить учетную запись». 🌸

Разделение кода вашего приложения позволяет вам контролировать количество кодов Javascript, которые вы отправляете своим пользователям в любой момент взаимодействия. Наиболее заметно, что разделение кода на основе маршрутов значительно сократит один основной JS-файл, который вы отправляете при первом запросе к вашему приложению, катализируя следующие события: более быстрое время загрузки, более быстрое время синтаксического анализа, более быстрое время выполнения и, следовательно, более быстрое время до взаимодействия. что является определяющим фактором номер один для приличной оценки Lighthouse!

Разделить код с помощью webpack очень просто. Посмотрите пост, который я написал для него:



Прагматичное разделение кода с помощью Preact и Webpack
Разделение кода делает ваш пакет подходящим и привлекательнымmedium.com



Разделите свой пакет с помощью Webpack

module.exports = {
  mode: "production",
  output: {
    filename: `js/[name].[chunkhash].js`,
    chunkFilename: "[name].[chunkhash].js",
    publicPath: "/"
  },
  optimization: {
    // split webpack runtime/manifest code into a separate chunk
    // so that hashes stay same when rebuilding without changes
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
      minSize: 0
    }
  }
}

Если бы вы могли сделать только ОДНУ вещь перед запуском приложения, это установить production на клавишу mode! Только для этого Webpack предлагает так много быстрых побед — минификацию и эвристику, которые автоматически разбивают ваше приложение на куски.

Не встраивайте SVG в свой HTML

Это увеличивает размер пакета и плохо работает на мобильных устройствах. Встраивайте только маленькие SVG.

npm i -D svg-url-loader img-loader imagemin-svgo

Оптимизирует ваши изображения

Вот загрузчик веб-пакетов, который оптимизирует размер файла изображений:

Экспериментируйте с уровнями оптимизации, пока компромисс качества не достигнет порога допустимости.

Как только вы это сделаете, рассмотрите возможность ленивой загрузки:



Отложенная загрузка изображений в Preact и Webpack
Отложенная загрузка ресурсов делает ваши зубы красивымиmedium.com



Минимизируйте свой CSS

Это легко. Используйте cssnano:

Репо



килгаренон/бойлерная
 Вся необходимая сантехника для доставки хороших связок в самые смелые времена.



Хорошо, это все, что у меня есть. Они должны прослужить большинству веб-приложений некоторое время. ☔️