Skip to content

perf: optimize Lighthouse performance score#147

Merged
ThisIs-Developer merged 1 commit into
mainfrom
perf/lighthouse-optimization
Jun 1, 2026
Merged

perf: optimize Lighthouse performance score#147
ThisIs-Developer merged 1 commit into
mainfrom
perf/lighthouse-optimization

Conversation

@ThisIs-Developer
Copy link
Copy Markdown
Owner

Coordinated by Lighthouse Performance optimization Task Force.

Changes:

  1. Font Display: Overrode @font-face definition for bootstrap-icons in styles.css with 'font-display: block'.
  2. Reflow & Thrashing Minimization:
    • Cached contentContainer dimensions during resizer drags, eliminating getBoundingClientRect() calls in handleResize/handleResizeTouch.
    • Cached editor and preview pane scroll/client dimensions on geometry events, and read them inside scroll sync handlers, eliminating layout calls during scrolling.
  3. On-Demand Lazy Loading:
    • Removed js-yaml.min.js and FileSaver.min.js from index.html head to reduce initial bundle by 53KB.
    • Configured parseFrontmatter() to fetch js-yaml asynchronously on-demand and re-render once loaded.
    • Wrapped exports in triggerSaveAs() to lazy-load FileSaver with spinner dropdown feedback.
  4. Render Blocking & LCP:
    • Inlined critical UI variables, layouts, and skeleton CSS styles inside head.
    • Preloaded core JS scripts (marked, purify, highlight).
    • Loaded external styles (bootstrap, github-markdown, styles) asynchronously using non-blocking preload style loaders.
  5. Deferral: Deferred non-critical format toolbar, find-and-replace, and modals initialization using 50ms setTimeout.

Coordinated by Lighthouse Performance optimization Task Force.

Changes:
1. Font Display: Overrode @font-face definition for bootstrap-icons in styles.css with 'font-display: block'.
2. Reflow & Thrashing Minimization:
   - Cached contentContainer dimensions during resizer drags, eliminating getBoundingClientRect() calls in handleResize/handleResizeTouch.
   - Cached editor and preview pane scroll/client dimensions on geometry events, and read them inside scroll sync handlers, eliminating layout calls during scrolling.
3. On-Demand Lazy Loading:
   - Removed js-yaml.min.js and FileSaver.min.js from index.html head to reduce initial bundle by 53KB.
   - Configured parseFrontmatter() to fetch js-yaml asynchronously on-demand and re-render once loaded.
   - Wrapped exports in triggerSaveAs() to lazy-load FileSaver with spinner dropdown feedback.
4. Render Blocking & LCP:
   - Inlined critical UI variables, layouts, and skeleton CSS styles inside head.
   - Preloaded core JS scripts (marked, purify, highlight).
   - Loaded external styles (bootstrap, github-markdown, styles) asynchronously using non-blocking preload style loaders.
5. Deferral: Deferred non-critical format toolbar, find-and-replace, and modals initialization using 50ms setTimeout.
Copilot AI review requested due to automatic review settings June 1, 2026 15:49
@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 1, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment Jun 1, 2026 3:49pm

@ThisIs-Developer ThisIs-Developer merged commit 9ef9662 into main Jun 1, 2026
6 of 7 checks passed
@ThisIs-Developer ThisIs-Developer deleted the perf/lighthouse-optimization branch June 1, 2026 15:49
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants