Я думаю якщо сайт не працює — не треба його ревьювіти взагалі.

Якщо він працює нормально але коли включити запис екрану на Mac то він повністю ломається — про це треба сказати в відео. Томущо таке вийшло враження ніби сайтом ніяк не можна користуватись.
Записувався екран на декількох Windows компьютерах, iOS і Android девайсах — все було нормально.

Я думаю якщо знаєш що сайт ломається так як було показано на відео — постійний показ лоудерів це найменша проблема. Лоудери не заважають так сильно коли люди не записують екран на MacOS.

Я вважаю це неправильним критикувати перформанс сайту коли явно видно що воно працює в 1 fps саме через запис екрану на MacOS.

Так, lazy-loading простих реакт компонентів на скролі це трішки занатто, але моя ціль була first contententful paint в лайтхаусі, і це 0,9 секунд.
Взагалі сайт такий як є томущо мені було цікаво зробити швидке преше завантаження на сайт з використанням Next 15 rc при цьому маючи достатньо важкий контент який потім підгружається на скролі.

Оптимізації — це звісно добре, але перш ніж їх розпочинати, потрібно провести аналіз та зібрати метрики. Оптимізовану версію порівняти з попередньої.

Це і було зроблено:
x.com/...​tatus/1805339789807202648
Ось і старий SPA сайт зроблений за допомогою VITE і простого JS.
commoner-spa.vercel.app

І, так, навіть без запису відео, перформанс сайту взагалом не ідеальний (все ж таки навіть без 3D Об’єктів використовується важкий css фільтр backdrop-filter: blur) але я думаю він достатньо швидкий щоб нормально користуватись на айфонах 7ми річної давності.

Я не кажу що це крутий проект технічно, або великий, або супер оптимізований. Це взагалом проект якогось початківця.

Але я вважаю що цей проект заслуговує на те щоб в відео сказати що він буде працювати нормально якщо не записувати екран на MacOS.

Згоден. Але краще попередити що API ключ все одно залишається публічним

Не знаю чому ніхто про це не сказав, але те що ти видалив .env файл це зробило абсолютно нічого для того щоб захистити твій проект.
Ти робиш реквести з API ключем на кліенті, тобто цей ключ можливо в два кліки знайти відкривши DevTools -> вкладочка Network і оновити сторінку -> знайти реквест accounrs?lookup -> клікнути на payload.

Навіть якщо би ти не робив реквести на кліенті, VITE env variables + Vercel працює таким чином що твій API key засовується в бандл файл який потім повністю передається клієнту. Тобто твій API ключ знаходиться в index.js який може знайти будь який користувач після логіну -> вкладочка Sources в Devtools -> в assets фолдер index.js файл -> потім можеш просто CTRL + F і ввести початок свого ключа «AIzaSy».

Так це Firebase і так це пет-проект але робити реквести в базу данних на кліенті, бандліти API ключи в js файл який потім передаєш кліенту це все одно що писати свій ключ в .env файл і потім комітити на гітхаб. Всі (або ті які не хочеться віддавати шахраям) API ключі повинні бути на сервері і залишатись на сервері. Для SPA це важко зробити але можливо, але взагалом рекомендую занурнутись трішечки в бекенд і спробувати зробити щось на томуж самому Next.js враховуючи вже існуючі знання Реакту.

Вибачаюсь за достатньо «агресивний» коментар але це важлива проблема про яку ніхто чомусь не написав. Сподіваюсь це допоможе розібратись як захистити свій наступний проект :)

Привіт! Як буде час, подивись на мій маленький сайтик-портфоліо написаний на Next.js 15rc, React Three Fiber (альфа версія), Firebase як бд, Redux і там ще декілька не дуже важливих бібліотек.

З цікавого (або те на що можливо поскаржитись) рекомендую зайти в app/ui/Home/Home.tsx, і глянути як я там використовую IntersectionObserver для моніторингу юзер скроллу.
Ну і звісно подивись хоч трішки на компонент app/ui/Home/Map де є 3D модельки, анімації за допомогою React Spring, навіть трішечки кастомних шейдерів там є.
Більш детальна документація є в Readme md

Дякую за приділений час

github.com/wecreus/theCommoner-next
commoner.vercel.app