Як я обігнав Google: 100/100 Lighthouse для React-портфоліо (і навіщо це джуну)

Привіт, Спільното! 🖖Існує думка, що робити лендінги чи портфоліо на React — це як стріляти з гармати по горобцях. Мовляв, JS-бандл все одно «вб'є» мобільну продуктивність. Я вирішив прийняти цей виклик і довести: React-сайт може бути швидшим за статичний HTML, якщо знати, де підкрутити.Мій результат — стабільні 100/100 балів у Lighthouse на Desktop та 98+ на Mobile для мого проекту webdevcompass.com.Мій технічний стек:React 18 (Vite як білдер)TypeScript (для спокійного сну)SCSS Modules (Flexbox + Grid)Як я цього досяг (без магії, тільки код):Critical Rendering Path: Переніс завантаження LCP-зображень у пріоритет через link rel=«preload». Тепер браузер знає про головний банер раніше, ніж почне думати про JS.Code Splitting: Використав React.lazy для всіх важких блоків, які не потрібні користувачу в перші 0.5 секунди.Fonts & Assets: Шрифти локально, формат тільки WebP, ніяких зовнішніх важких скриптів у head.Layout Shifts (CLS): Кожен блок має зарезервоване місце через aspect-ratio. Ніяких стрибків контенту при завантаженні.Навіщо це мені?Можна було б зупинитися на 80 балах і сказати «і так піде». Але для мене портфоліо — це не просто список посилань. Це доказ моєї «профпридатності» як інженера. Якщо я можу зробити свій сайт ідеальним, значить, я зможу зробити це і для продукту компанії.Питання до фронтенд-девів:Чи є у вас свої «пунктики» щодо продуктивності? Чи вважаєте ви 100 балів Lighthouse обов'язковим стандартом у 2026 році, чи це просто цифри для самоствердження?Подивіться, як це працює вживу: www.webdevcompass.com