Skip to content

Performance Improvement: LCP Optimization via Critical HTML Rendering #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Khushi5155 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Performance Improvement: LCP Optimization via Critical HTML Rendering #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9b79894
enhance LCP of web
Khushi5155 Jan 18, 2026
e9bf507
enhance structure of changes
Khushi5155 Jan 18, 2026
61ce551
hide static LCP content after hydration and align theme colors
Khushi5155 Jan 20, 2026
511ca90
add end line
Khushi5155 Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 38 additions & 3 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,27 @@
content="https://edulume.site/og-image.png"
/>

<style>
.lcp-hero {
max-width: 960px;
margin: 4rem auto;
padding: 0 1.5rem;
}
.lcp-title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: clamp(2.2rem, 5vw, 3.2rem);
font-weight: 800;
line-height: 1.1;
color: #00cc33;
}

.lcp-sub {
margin-top: 1rem;
font-size: 1.1rem;
color: #d1d5db;
max-width: 720px;
}
</style>
<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
Expand Down Expand Up @@ -83,13 +104,27 @@

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://res.cloudinary.com">
<link rel="preconnect" href="https://edulume.site">
<link rel="preconnect" href="https://fly.io">
<link
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap"
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap"
rel="stylesheet"
/>

</head>
<body>
<div id="root"></div>
<div id="root">
<section id="lcp-static" class="lcp-hero">
<h1 class="lcp-title">
Master Tech Skills with AI-Powered Learning
</h1>
<p class="lcp-sub">
Your complete learning platform with AI-powered courses,
structured roadmaps, and a growing developer community.
</p>
</section>
</div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
21 changes: 14 additions & 7 deletions client/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";

createRoot(document.getElementById('root')!).render(
const root = createRoot(document.getElementById("root")!);

root.render(
<StrictMode>
<App />
</StrictMode>,
)
</StrictMode>
);

const staticLCP = document.getElementById("lcp-static");

@tarin-lgtm tarin-lgtm Bot Mar 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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 tarin-lgtm Bot Mar 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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 tarin-lgtm Bot Mar 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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 tarin-lgtm Bot Mar 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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

if (staticLCP) {
staticLCP.remove();
}