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.

[tarin-lgtm]

Looks Good To Meow 🐱

Hey @! Nice work on this one. This PR optimizes Largest Contentful Paint (LCP) by rendering critical HTML statically and removing it post React hydration, improving initial load performance. Reviews found no critical issues but suggest minor improvements in code comments, variable naming, and null checks to enhance maintainability and robustness.

I left a few minor suggestions below — nothing blocking, just things to consider.

Note: This is an AI-generated approval. A maintainer will follow up with the final human review shortly.

Nice-to-haves

1. Add inline comments explaining the removal of static LCP element in main.tsx for maintainability.
2. Improve variable naming for clarity in the modified files.
3. Add a null check for the root element in main.tsx to prevent potential runtime errors.

Findings breakdown (9 total)

4 low / 5 info

Confidence: 90%

---

🔗 View Full Review Report — detailed findings, severity breakdown, and agent analysis

_{Reviewed by Looks Good To Meow — AI-powered code review}

---

💬 You can interact with me directly in this PR:

• @tarin-lgtm fix [any constraints]
• @tarin-lgtm explain [your question]
• @tarin-lgtm improve [focus area]
• @tarin-lgtm test [what to focus on]

[tarin-lgtm]

💡 Suggestion — The variable name 'staticLCP' is somewhat unclear and inconsistent with the rest of the codebase's camelCase convention for variables. It is not immediately obvious what 'LCP' stands for without context.

Rename 'staticLCP' to a more descriptive name like 'lcpStaticElement' or 'lcpStaticSection' to improve clarity and maintain consistency with camelCase naming.

_readability

[tarin-lgtm]

💡 Suggestion — The logic to remove the 'lcp-static' element after rendering is not commented, which may confuse future maintainers about the purpose of this removal.

Add a comment explaining why the 'lcp-static' element is removed after rendering, e.g., 'Remove static LCP placeholder after React app mounts to improve performance'.

_readability

[tarin-lgtm]

💡 Suggestion — Use of non-null assertion operator (!) on document.getElementById('root') without null check.

Add a runtime check to ensure the element exists before using it to avoid potential runtime errors in environments where 'root' might be missing.

_{best-practices}

[tarin-lgtm]

💡 Suggestion — The code removes the element with id 'lcp-static' immediately after rendering the React app. If the React app rendering fails or is delayed, the static LCP content might be removed prematurely, potentially causing a flash of empty content or layout shift.

Consider removing the static LCP element only after the React app has fully hydrated or rendered successfully, possibly by placing the removal inside a React effect or after confirming the app is ready.

_bugs