The project utilizes GSAP and ThreeJS for 3D models. Initially, the mobile version of the site had removed all 3D models while some libraries for 3D were still loading. This was the main issue. To tackle this, I created two similar components - one for the computer version and the other for the mobile version. The component for the computer version loads libraries for 3D and 3D models, while the mobile version of the component does not load the library and 3D models. Our mobile version uses static JSX instead of the 3D models for the desktop version. If a user has a mobile device with a screen size of 768 or less, an easy version of our component is displayed, while the full version with 3D is displayed for screens larger than 768. The first screen displays the result after changes, and the second displays the result before.
Additionally, I replaced the small library react-intersection-observer, which our project uses, with an easy custom hook and this helped to increase my Performance score by +10 points. I did it because I didn't know how to improve my performance in Lighthouse, and I did everything I could to boost the score. The result is on the next screen.
It is important to create two versions of your component - full for the computer version and simplified for mobile if you have some libraries that are only used on the computer version and not on mobile versions. Also, try not to use extra libraries if you can do it by yourself.
That's all for now. If you have any propositions, or ideas, or would just like to say "Hello", feel free to write to me on linkedin.com.