Як покращити Perfomance сайту в Lighthouse?

На днях на роботі зіткнувся із проблемою. Проєкт на Next (актуально і для чистого React) видавав низький Perfomance в Lighthouse на мобілі, хоча cкан ПК версії демонструє високі показники. І це при тому, що проєкт вже і так пройшов через етап оптимізації – всі можливі пункти з покращення були закриті. Оптимізувати нічого. Ну висить собі пункт "Reduce unused JavaScript", що тут можна зробити, подумав я. Але було зроблено 2 дії, які в сумі дали більше ніж +20 до Performance.

1) На проєкті використовуються бібліотеки GSAP, Three.JS і таке інше для 3D. Раніше із мобілки прибрали всі 3D моделі заради оптимізації, лишили лише на ПК. Але ліби продовжили завантажуватися і саме в цьому була проблема. Тому було вирішено винести всі імпорти вендорів для 3D в окремий компонент разом із самою моделлю та завантажувати його виключно на ПК. Результат перфомансу на подвійному скріні після та до апдейтів. Для довідки: на сайті npmjs на сторінці ліби GSAP вказано Unpacked Size – 3.94 MB.

2) На проєкті є досить легенька ліба react-intersection-observer на 132 kB. Замінив її простеньким кастомним хуком – ще +10 до перфомансу.

Тобто. Якщо на мобілі не юзається ліба – виносимо код разом із лібою в окремий компонент і підключаємо лише на ПК. І друге – не юзаємо лишні ліби. Досить простенькі та очевидні правила, але під час активної розробки можна забути.