Уменьшите маяк "Первая значимая краска" в сборке React

Question

У меня есть приложение React, которое отображает много изображений на главной странице.

И я уже внес некоторые улучшения:

1. Использование react-lazy-load-image-component везде.
2. lazy, Suspense для реагирующих маршрутов.
3. Сконфигурируйте несколько плагинов сжатия:

  config.plugins.push(new CompressionPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.(js|css|html|svg)$/,
    threshold: 8192,
    minRatio: 0.8
  }))

  config.plugins.push(new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8
  }))

Но у меня все еще низкая производительность Я предоставлю дополнительные данные или экраны по запросу.

Тест проводился в окно браузера анонима. Использование:

yarn build --profile
serve -s build

Answer 1

Два основных наблюдения:

1. Существует два очень больших (3 + МБ) изображения в формате jpg, которые я бы порекомендовал посмотреть, как можно оптимизировать их с помощью графической программы, даже такой простой, как Preview ( MacOS), уменьшив размеры или другие средства. Эти две проблемы являются самыми серьезными в вашем отчете «Избегайте огромных полезных нагрузок в сети», но вы также можете подумать об оптимизации других.
2. Локальное обслуживание приложений React (или других stati c) обычно дает мне значительно худшую производительность чем моя обычная развернутая среда за CDN . И поэтому на данный момент я в основном запускаю Lighthouse против развернутой среды, по крайней мере, для отчета о производительности. В частности, среда, которая поддерживает HTTP / 2, обеспечивает кэширование заголовков и обычно построена для производительности (по сравнению с локальным сервером, который обычно не оптимизирован для этой цели), возможно, стоит подумать, чтобы получить результаты, которые лучше отражают то, как все будет выглядеть в производстве.

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

Надеюсь, что это поможет!