Performance Improvement: LCP Optimization via Critical HTML Rendering

[Khushi5155]

Description

This PR improves Core Web Vitals, specifically Largest Contentful Paint (LCP), by optimizing the critical rendering path.

Previously, the LCP element on the landing page was rendered only after React hydration, which delayed its appearance and negatively impacted performance scores.
This change renders the primary LCP content statically in index.html, allowing the browser to paint meaningful content immediately without waiting for JavaScript execution.

Issue #100

closes #100

What Changed

• Added static hero (LCP) content directly in index.html
• Ensured minimal, inline CSS for LCP text to avoid render-blocking
• Kept all application logic untouched (no React/JS behavior changes)
• Focused strictly on performance (as per issue scope)

Before

After

[tarinagarwal]

Good performance optimization approach! A few questions and concerns:

1. Which issue does this target? Please add 'Closes #X' to link to the related issue.

2. Content duplication concern - This static HTML content will duplicate what's in the React LandingPage component. How will you handle keeping both in sync? Consider hiding the static content once React loads.

3. Color mismatch - You're using #1f9249 (green) but the app is moving to an olive theme. Should use olive theme colors for consistency.

4. Missing React integration - The static content should be hidden/replaced when React hydrates to avoid duplication.

The LCP optimization concept is solid, just need to address the duplication and theming issues!

[Khushi5155]

Good performance optimization approach! A few questions and concerns:

1. Which issue does this target? Please add 'Closes #X' to link to the related issue.
2. Content duplication concern - This static HTML content will duplicate what's in the React LandingPage component. How will you handle keeping both in sync? Consider hiding the static content once React loads.
3. Color mismatch - You're using #1f9249 (green) but the app is moving to an olive theme. Should use olive theme colors for consistency.
4. Missing React integration - The static content should be hidden/replaced when React hydrates to avoid duplication.

The LCP optimization concept is solid, just need to address the duplication and theming issues!

Thanks for the detailed feedback!

You’re right about the duplication and theming points. I’ve made the following updates to fix them:

• The static LCP content is now removed right after React loads, so there’s no duplicate content on the page
• React is still the main source of truth for all UI and content
• The static LCP styles are kept very minimal and independent of JS, so the LCP is measured correctly before React and Tailwind load

This keeps the LCP improvement while avoiding duplication and making sure the app stays easy to maintain.
Once React is loaded, all styling and layout are fully handled by the app as usual.

I’ve pushed the updated changes. Please let me know if you’d prefer a different approach.