+
Skip to content

chore(mwpw-1234): boost Lighthouse performance by swapping to Preact & enabling gzip/Brotli server #290

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

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore(mwpw-1234): boost Lighthouse performance by swapping to Preact & enabling gzip/Brotli server #290

wants to merge 2 commits into from

Conversation

raissanjay
Copy link
Collaborator

@raissanjay raissanjay commented Jun 4, 2025 •
edited
Loading

What's Changed

  • Swapped out React for Preact to reduce bundle size (~172 KB of JS eliminated via tree-shaking & smaller runtime)
  • Adopted the existing serve CLI (npm run serve) as our local static server to:
    • Enable on-the-fly gzip and Brotli compression (saved ~758 KB of text)
    • Emit optimal Cache-Control headers for immutable assets
    • Support SPA fallback (--single) for index.html routing
  • Documented the new recommended local-dev workflow in README

Why This Matters

  • Performance: Preact's smaller footprint + compressed assets moved our mobile Lighthouse Performance score
  • Developer DX: Zero-config static server ("serve") gives us compression, caching, and SPA support without custom Python scripts or WebStorm hacks
  • Maintainability: We keep using our existing Webpack build and npm scripts, so there's no new build tool or CI complexity

Before & After

Metric Before After Savings
Lighthouse Performance 62 / 100 99 / 100 +37 pts
Bundle size (main.js) ~200 KB gzipped ~28 KB gzipped –172 KB
Text compression potential ~758 KB wasted ~0 KB wasted ~758 KB saved

How to Verify

  1. npm install
  2. npm run serve -- --single --brotli --listen 8080
  3. Point your browser (or Lighthouse CLI) at http://localhost:8080
  4. Confirm Performance ≥ 99, FCP/LCP < 1 s, 0 TBT, 0 CLS

Docs

  • Added "Development" section to README.md explaining the serve flags for compression, HTTP/2 readiness, and SPA fallback.

Before:
image

After preact migration (pre-load first image):
image

To enhance: Preload Guidance for Critical Assets

1. Static Preload (in public/index.html)

We need to get the first card image URL ahead of time, and then add this in <head>:

<link rel="preload" as="image"
      href="https://www.adobe.com/content/dam/www/us/en/max/2021/speakers/S907-Deep-Blizzard_1628658923394001pGLY.jpg"
      type="image/jpeg" /

@raissanjay raissanjay changed the title chore(mwpw-1234): boost Lighthouse performance to 99 by swapping to Preact & enabling gzip/Brotli server chore(mwpw-1234): boost Lighthouse performance by swapping to Preact & enabling gzip/Brotli server Jun 4, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:20:34.875Z
PR: #290

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:20:39.783Z
PR: #290

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:20:51.741Z
PR: #290

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:23:08.771Z
PR: #290

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:23:18.954Z
PR: #290

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:35:48.352Z
PR: #290

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:44:08.987Z
PR: #290

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2025

Core Web Vitals Metrics

Metric Value
LCP N/A s
FID N/A ms
CLS N/A

Recorded at: 2025-06-04T09:47:11.862Z
PR: #290

@sanrai sanrai requested review from cmiqueo, gmirijan, jedjedjedM, sanrai, sheridansunier and shkhan91 and removed request for cmiqueo June 4, 2025 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sanrai sanrai Awaiting requested review from sanrai

@cmiqueo cmiqueo Awaiting requested review from cmiqueo

@jedjedjedM jedjedjedM Awaiting requested review from jedjedjedM

@sheridansunier sheridansunier Awaiting requested review from sheridansunier

@gmirijan gmirijan Awaiting requested review from gmirijan

@shkhan91 shkhan91 Awaiting requested review from shkhan91

Assignees

No one assigned

Labels

Do not merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@raissanjay @sr8384856
点击 这是indexloc提供的php浏览器服务，不要输入任何密码和下载