100/100 у Lighthouse для React-сайту: перфекціонізм чи реальна необхідність?

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

Привіт, спільното!

Останнім часом точиться багато дискусій про те, чи варто «витискати» максимум із показників Core Web Vitals, особливо коли йдеться про важкі JS-фреймворки. Хочу поділитися власним досвідом оптимізації свого проекту — WebDevCompass. Це портфоліо на React + TypeScript, де мені вдалося досягти стабільних 100/100 на Desktop та 95+ на Mobile.

Мій стек: React 18, Vite, TypeScript, SCSS Modules.

Для багатьох React-проєктів каменем спотикання стає саме мобільна продуктивність через обмеження CPU мобільних пристроїв. Ось кілька практичних кроків, які спрацювали у моєму випадку і які ви можете перевірити на живому сайті:

Оптимізація Critical Rendering Path. Я використав link rel="preload" для головного зображення (LCP) з атрибутом fetchpriority="high«. Це дозволяє браузеру почати завантаження контенту ще до того, як весь JS-бандл буде розпарсений.

Стратегія відкладеного рендерингу. На фоні мого сайту є декоративні елементи з великою кількістю тексту. Щоб не навантажувати початковий рендеринг (FCP), я монтую їх динамічно. Це миттєво покращує показник Total Blocking Time (TBT).

Робота з CLS (Cumulative Layout Shift). Навіть 0.1 бала можуть зіпсувати враження. Використання CSS aspect-ratio для контейнерів зображень та резервування місця під динамічні елементи допомогло звести зсув макета до нуля.

Шрифти без блокування. Замість стандартного підключення Google Fonts, я використав локальне хостування з font-display: swap та попереднім прогрівом з’єднання (preconnect).

Чому я вважаю це важливим?

Швидкість — це не тільки про «зелені кружечки». Це про UX та SEO. Google Search Console вже показує, що сторінки з вищим показником ефективності швидше індексуються та мають кращий CTR (на моєму прикладі це понад 40%).

Питання до колег:

Чи займаєтесь ви такою глибокою оптимізацією на комерційних проєктах? Чи вважаєте, що після позначки в 90 балів подальша боротьба — це лише марна трата часу розробника?

Буду радий почути ваші думки та поради! Поглянути на результат можна тут: www.webdevcompass.com