Reduce Lighthouse "First Meaningful Paint" in React build

user_10895259 0
Viewed 1808

I have React application that renders a lot of images on the main page.

And I already made some improvements:

  1. Using react-lazy-load-image-component everywhere.
  2. lazy, Suspense for react routes.
  3. Configure several compression plugins:
  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
  }))

But I still have poor performanceenter image description here enter image description here enter image description here enter image description here I will provide additional data or screens by request.

The test was made in an anonym browser window. Using:

yarn build --profile
serve -s build
lighthouse webpack reactjs
1 Answers

Two main observations:

  1. There are two very large (3+MB) jpg images that I’d recommend seeing how you can optimize with a graphics program, even a simple one like Preview (MacOS), by reducing the dimensions or other means. These two are the biggest issues in your “Avoid enormous network payloads” report, but you might consider optimizing others as well.
  2. Local serving of React (or other static) apps typically gives me significantly worse performance than my usual deployed environment behind a CDN. And so at this point I mainly run Lighthouse against the deployed environment, at least for the Performance report. In particular, an environment that supports HTTP/2, provides caching headers, and is generally built for performance (vs. a local server that’s usually not optimized for this purpose) might be worth considering to get you results that better reflect how things will look in production.

Lighthouse tries to do a good job of pointing out specifics, so once you’re running it against a production-like environment (if you choose to do that), I’d recommend closely reviewing the other sections, clicking through the “Learn more” links wherever things get confusing, and seeing where you can optimize further based on the advice Lighthouse gives.

Hope that helps!

user_4953020
Related