ai_ml_operations/monica_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Lighthouse scores on public pages (aim for ~100) #7

New Issue
Closed
opened 2026-08-27 09:12:49 -07:00 by westfarn · 2 comments
westfarn commented 2026-08-27 09:12:49 -07:00
Owner
Copy Link
Copy Source

Goal

Raise Lighthouse Performance, Accessibility, Best Practices, and SEO on public marketing pages toward 100.

URLs

Baseline

Running Lighthouse CLI audits now; findings and fixes will land in a follow-up PR linked here.

Scope

Public templates/static assets only (site/public/, site/monica_site/templates/base.html, related CSS/JS/images). Portal pages out of scope.

## Goal Raise Lighthouse Performance, Accessibility, Best Practices, and SEO on public marketing pages toward 100. ## URLs - https://monica-preview.aimloperations.com/ - https://monica-preview.aimloperations.com/about/ - https://monica-preview.aimloperations.com/contact/ ## Baseline Running Lighthouse CLI audits now; findings and fixes will land in a follow-up PR linked here. ## Scope Public templates/static assets only (`site/public/`, `site/monica_site/templates/base.html`, related CSS/JS/images). Portal pages out of scope.
westfarn commented 2026-08-27 09:15:04 -07:00
Author
Owner
Copy Link
Copy Source

Baseline (Lighthouse CLI 12.8.2, mobile defaults, 2026-08-27)

Page Performance Accessibility Best Practices SEO
/ 70 80 82 100
/about/ 71 81 82 100
/contact/ 74 90 82 100

Key findings (fixable in app)

Accessibility

  • color-contrast: footer text (#656667/#74757f on #232426), CTA body (#74757f on #f5f6fa), contact form labels (#aeb1be on #f5f6fa), consent/disclaimer greys.
  • button-name: mobile nav toggle + collapse toggle lack accessible names.
  • heading-order: footer uses h5 after page h1/h2; contact form uses h3 skipping h2.

Performance

  • Render-blocking Google Fonts + large theme CSS (bootstrap/fonts/style).
  • Hero/breadcrumb JPEGs not next-gen (WebP); LCP ~5–9.5s on home/about.
  • font-display missing on Google + icon webfonts.
  • Large unused JS from theme core.min.js; footer logo missing width/height.

Best Practices

  • Deprecated unload listener inside theme core.min.js (also blocks bfcache).
  • HTTP/2 + long-cache: partly infra/proxy (WhiteNoise already uses hashed filenames).

SEO

  • Already at 100 on all three pages.

Plan

  1. A11y contrast + button labels + heading levels in public templates/CSS.
  2. Fonts: display=swap, preconnect, subset; local @font-face display.
  3. Convert key hero/headshot/breadcrumb images to WebP (+ <picture> / CSS fallbacks).
  4. Defer non-critical CSS/JS where safe; size attributes; preload LCP assets.
  5. Patch/replace unload usage if feasible without breaking theme.

Branch: fix/7-lighthouse-public-scores

## Baseline (Lighthouse CLI 12.8.2, mobile defaults, 2026-08-27) | Page | Performance | Accessibility | Best Practices | SEO | |------|-------------|---------------|----------------|-----| | `/` | 70 | 80 | 82 | 100 | | `/about/` | 71 | 81 | 82 | 100 | | `/contact/` | 74 | 90 | 82 | 100 | ## Key findings (fixable in app) ### Accessibility - **color-contrast**: footer text (`#656667`/`#74757f` on `#232426`), CTA body (`#74757f` on `#f5f6fa`), contact form labels (`#aeb1be` on `#f5f6fa`), consent/disclaimer greys. - **button-name**: mobile nav toggle + collapse toggle lack accessible names. - **heading-order**: footer uses `h5` after page `h1`/`h2`; contact form uses `h3` skipping `h2`. ### Performance - Render-blocking Google Fonts + large theme CSS (`bootstrap`/`fonts`/`style`). - Hero/breadcrumb JPEGs not next-gen (WebP); LCP ~5–9.5s on home/about. - `font-display` missing on Google + icon webfonts. - Large unused JS from theme `core.min.js`; footer logo missing width/height. ### Best Practices - Deprecated **`unload`** listener inside theme `core.min.js` (also blocks bfcache). - HTTP/2 + long-cache: partly infra/proxy (WhiteNoise already uses hashed filenames). ### SEO - Already at **100** on all three pages. ## Plan 1. A11y contrast + button labels + heading levels in public templates/CSS. 2. Fonts: `display=swap`, preconnect, subset; local `@font-face` display. 3. Convert key hero/headshot/breadcrumb images to WebP (+ `<picture>` / CSS fallbacks). 4. Defer non-critical CSS/JS where safe; size attributes; preload LCP assets. 5. Patch/replace unload usage if feasible without breaking theme. Branch: `fix/7-lighthouse-public-scores`
westfarn commented 2026-08-27 09:24:33 -07:00
Author
Owner
Copy Link
Copy Source

PR opened from fix/7-lighthouse-public-scores with the fixes from the audit plan.

Local post-fix (dev server): Accessibility / Best Practices / SEO = 100 on all three pages. Performance remains noisy locally (no gzip); re-measure on preview after deploy.

Remaining Perf ceiling: theme core.min.js unused JS/CSS + edge HTTP/2 (infra).

PR opened from `fix/7-lighthouse-public-scores` with the fixes from the audit plan. **Local post-fix (dev server):** Accessibility / Best Practices / SEO = **100** on all three pages. Performance remains noisy locally (no gzip); re-measure on preview after deploy. Remaining Perf ceiling: theme `core.min.js` unused JS/CSS + edge HTTP/2 (infra).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
twestfall westfarn (Ryan Westfall)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ai_ml_operations/monica_site#7