Як покращити Perfomance проєкту на React/Next в Lighthouse?

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

На днях на роботі зіткнувся із проблемою. Проєкт на Next (актуально і для чистого React) видавав низький Perfomance в Lighthouse на мобілі, хоча при цьому скан ПК версії демонструє високі показники. І це при тому, що проєкт вже і так пройшов через етап оптимізації — всі можливі пункти з покращення були закриті. Оптимізувати нічого. Ну висить собі пунктик «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 до перфомансу.

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

Читати на моєму блозі: crynet.name
Мій linkedin (приєднуйтесь): linkedin.com