1. Image size

Reduce the size of the main picture (product-cover.png) from (472KB) 0.5 MB to 0.1MB (you can use shortpixel) - the visual aspect won’t really be affected.

2. Next gen formats to please google

Use next-gen formats for images - AVIF or WEBP (docs) - also, if you do this, take into account that WEBP is not supported by some versions of Safari. Internet Explorer won’t support it at all. After doing that, try to resize them properly and reduce their size - as it looks like most of the data transferred (to load up first paint) is made out of images.

Untitled

3. Images lazy-loading

Use lazy-loading for the images not used in the first paint. E.g. product-cover-dark.png can be lazily loaded - only when dark mode is used or required. product-cover-dark.png can also be resized (shortpixel can reduce it from 1.1MB to 0.3MB without any “visual” impact)

4. Videos over GIFs

If possible for you, use embedded videos instead of GIFs. GIFs are not really recommended when discussing web performance. (docs)

E.g. integrate_to_notion.gif takes around 920ms to load on a really fast network.

5. Caching Testimonials

To reduce JS size, consider caching the testimonials response on the BE and serving it directly in the HTML. Not sure if that would work for you, but it will reduce JS size with ~200KiB.

6. Use responsive-loader

Serve images in proper format to reduce load times (desktop and mobile should have different images sizes). Take a look over responsive-loader as it can be used for this.

7. Remove unused JS

For the first paint, over 58% of JS transferred is not used. You might check your code for unused logic, or lazy-load the logic when needed. Sure, this might not be a problem for now, but improving this now can help you out in the long run.

Untitled

8. Remove unused CSS

Over 90% of CSS needed for first-paint is not used. This includes the CSS for “dark” interface and others.

Untitled