What
Two small index.html additions to improve performance and browser rendering:
- Preload the LCP image —
<link rel="preload" as="image" href="/ogimg.jpg">
- Declare dark color-scheme —
<meta name="color-scheme" content="dark">
Why
- LCP preload: The profile photo (
/ogimg.jpg) is the Largest Contentful Paint element. Without preloading, the browser only discovers it after parsing and executing the Vue bundle, delaying its fetch. Preloading it from HTML improves Core Web Vitals.
color-scheme: dark: Without this, browsers render native UI elements (scrollbars, form inputs) in light mode against a dark background. It also ensures the GitHub stats #gh-dark-mode-only SVG renders correctly for all users.
Files to change
index.html — add both tags inside <head>
<meta name="color-scheme" content="dark">
<link rel="preload" as="image" href="/ogimg.jpg">
Verification
npm run build passesnpm run lint passes- Backward-compatible, zero runtime cost
Generated by Continuous Improvement — Portfolio Site · ● 9.8M · ◷
What
Two small
index.htmladditions to improve performance and browser rendering:<link rel="preload" as="image" href="/ogimg.jpg"><meta name="color-scheme" content="dark">Why
/ogimg.jpg) is the Largest Contentful Paint element. Without preloading, the browser only discovers it after parsing and executing the Vue bundle, delaying its fetch. Preloading it from HTML improves Core Web Vitals.color-scheme: dark: Without this, browsers render native UI elements (scrollbars, form inputs) in light mode against a dark background. It also ensures the GitHub stats#gh-dark-mode-onlySVG renders correctly for all users.Files to change
index.html— add both tags inside<head>Verification
npm run buildpassesnpm run lintpasses