Greetings! I am a JavaScript engineer with more than 3 years of commercial experience and I recently encountered an issue with the performance of a project on React. The mobile version of the project was not performing well on Lighthouse, while the computer version was functioning properly. I had optimized everything within my capacity and yet, Lighthouse was still showing an error suggesting to "Reduce unused JavaScript". I was unsure of how to solve this error and although I had seen several projects with good optimization and speed, they all had the same warning. However, when my team lead instructed me to "Do something", I tried two actions and managed to improve the performance by +20 points.
More than one
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.
Need more libraries for the library god
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.
Conclusion
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.
Top comments (0)