FB-320-improve-performance

[paulinabjacykowska]

This PR is related to the https://vazco1.atlassian.net/browse/FB-320

It consists of few performance improvements:

• serving images in WebP format (more info)
• setting dimensions for some of the images (more info)
• preloading LCP
• adding lazy loading

[paulinabjacykowska]

1. VideoPlayer.tsx - we can import ReactPlayer from react-player/lazy - ref
2. We can lazyload images used for docs - ref, but not sure if it's the case here as it's only about the performance of the main page

1. I noticed that we are already lazily loading the VideoPlayer component in MediaVideo.tsx: const VideoPlayer = lazy(() => import('./VideoPlayer'));

So would importing ReactPlayer from react-player/lazy make any difference?

I thought that if not, then we could import it from react-player/youtube instead - we are only using youtube videos and this way we could reduce the bundle size by excluding the code for other video platforms.

What do you think about this?

2. Here we have an update from 22.02.2022 which says that from v2.0.0-beta.16 Docusaurus lazy loads markdown images by default. And we are using v2.3.1 so I think we got this covered and we don't have to add anything?

[mkaliszewski]

1. VideoPlayer.tsx - we can import ReactPlayer from react-player/lazy - ref
2. We can lazyload images used for docs - ref, but not sure if it's the case here as it's only about the performance of the main page

I noticed that we are already lazily loading the VideoPlayer component in MediaVideo.tsx: const VideoPlayer = lazy(() => import('./VideoPlayer'));

So would importing ReactPlayer from react-player/lazy make any difference?

I thought that if not, then we could import it from react-player/youtube instead - we are only using youtube videos and this way we could reduce the bundle size by excluding the code for other video platforms.

What do you think about this?

Good catch, I think it's a proper way to handle it.

Here we have an update from 22.02.2022 which says that from v2.0.0-beta.16 Docusaurus lazy loads markdown images by default. And we are using v2.3.1 so I think we got this covered and we don't have to add anything?

Nice :ok_hand: