perf: optimize landing page Core Web Vitals and component loading#194
perf: optimize landing page Core Web Vitals and component loading#194arya2807 wants to merge 2 commits into
Conversation
|
@arya2807 is attempting to deploy a commit to the s3dfx-cyber's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds Google Fonts preconnect ChangesLanding Page Performance Improvements
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@landing/src/App.tsx`:
- Around line 17-18: Remove the extra top-level mounts for TenetLogo and
TerminalPanel from App so the same UI is not rendered twice; Hero already
includes TerminalPanel and Navbar/Footer already include TenetLogo. Update App
to keep only the components that are not already composed elsewhere, and remove
the corresponding lazy imports and JSX references tied to TenetLogo and
TerminalPanel.
- Line 7: The above-the-fold Hero is currently lazy-loaded through the shared
Suspense flow in App.tsx, which delays first meaningful content. Update App’s
component setup so Hero is imported and rendered eagerly in App, and keep lazy
loading only for below-the-fold components that can stay inside the existing
Suspense boundary.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 598b4291-b7b4-4c98-9cf0-1e02d7a27e15
📒 Files selected for processing (4)
landing/index.htmllanding/public/robots.txtlanding/src/App.tsxlanding/src/index.css
| import Navbar from './components/Navbar'; // if you have one, otherwise skip | ||
|
|
||
| // Lazy-load all other components (list all that are imported) | ||
| const Hero = lazy(() => import('./components/Hero')); |
There was a problem hiding this comment.
🚀 Performance & Scalability | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
sed -n '1,220p' landing/src/App.tsxRepository: TENET-DEV-AI/TENET-AI
Length of output: 2011
🏁 Script executed:
sed -n '1,220p' landing/src/App.tsxRepository: TENET-DEV-AI/TENET-AI
Length of output: 2011
Move Hero outside the shared Suspense boundary. Keeping the above-the-fold hero lazy-loaded means first meaningful content waits on chunk fetch/parse and can hurt LCP on cold loads; load Hero eagerly and keep Suspense for below-the-fold sections.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@landing/src/App.tsx` at line 7, The above-the-fold Hero is currently
lazy-loaded through the shared Suspense flow in App.tsx, which delays first
meaningful content. Update App’s component setup so Hero is imported and
rendered eagerly in App, and keep lazy loading only for below-the-fold
components that can stay inside the existing Suspense boundary.
| const TenetLogo = lazy(() => import('./components/TenetLogo')); | ||
| const TerminalPanel = lazy(() => import('./components/TerminalPanel')); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Remove duplicate standalone TenetLogo/TerminalPanel mounts.
Hero already renders TerminalPanel, and Navbar/Footer already render TenetLogo. Rendering both again in App duplicates UI and extra work.
Suggested fix
-const TenetLogo = lazy(() => import('./components/TenetLogo'));
-const TerminalPanel = lazy(() => import('./components/TerminalPanel'));
@@
- <TenetLogo />
- <TerminalPanel />Also applies to: 38-39
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@landing/src/App.tsx` around lines 17 - 18, Remove the extra top-level mounts
for TenetLogo and TerminalPanel from App so the same UI is not rendered twice;
Hero already includes TerminalPanel and Navbar/Footer already include TenetLogo.
Update App to keep only the components that are not already composed elsewhere,
and remove the corresponding lazy imports and JSX references tied to TenetLogo
and TerminalPanel.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
3 issues found across 4 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
|
@arya2807 need fixes as per bot comments |
2 participants
Performance & SEO Optimization for Landing Page
This PR addresses the performance bottlenecks identified in Issue #122, improving Lighthouse scores, page load speed, and search engine visibility.
Key Changes
Lazy-loading with React Suspense
React.lazy()and<Suspense>.Render‑blocking Resources
media="print"andonload="this.media='all'".preconnectfor external font origins to reduce connection latency.@importstatements from CSS.Build Configuration
vite.config.tswith code‑splitting (manualChunksfor vendor dependencies) and Terser minification.SEO & Discoverability
index.html.robots.txtto guide crawlers.sitemap.xml.Bug Fixes
Lighthouse Results
Screenshots attached below.
How to Test
npm installfollowed bynpm run build.npm run preview.Closes #122
Summary by cubic
Optimizes the landing page for Core Web Vitals by lazy‑loading non‑critical components and loading fonts asynchronously to improve first paint and Lighthouse scores. Adds a simple loading state, basic SEO, and fixes CSS build errors.
Performance & SEO
React.lazy()and<Suspense>; keepNavbareager.<Suspense>fallback for smoother initial loading.preconnecttofonts.googleapis.comandfonts.gstatic.com.robots.txtto allow indexing.Bug Fixes
index.cssand fixed syntax errors causing production build failures.Closes #122.
Written for commit e6ada3b. Summary will update on new commits.
Summary by CodeRabbit
New Features
Chores