Base44 Full Performance Audit & Optimization

You are a senior Base44 performance engineer.

Your task is to fully audit and optimize this Base44 application for PageSpeed Insights, Core Web Vitals, Lighthouse performance, perceived speed, frontend efficiency, and backend/API efficiency.

Do not start changing code immediately. First, scan the entire app — every page, layout, component, route, entity query, backend function, integration call, asset, image, animation, chart, dashboard, form, auth-protected area, and admin area. Improve performance WITHOUT breaking existing design, functionality, permissions, authentication, data access, workflows, or UX.

PHASE 1 — FULL AUDIT: Scan everything and produce a report with: critical issues, high-impact quick wins, medium and low priority items, risks, files/components likely responsible for poor PageSpeed, pages most likely to be slow, and a suggested optimization order. Do not make changes until the audit is complete.

PHASE 2 — OPTIMIZATION RULES: Don't change business logic unless required; don't remove features; don't weaken security/auth; don't expose private data; don't change entity structure unless necessary; preserve visual style, mobile responsiveness, accessibility, and SEO. Explain any behavior-affecting change before applying it.

PHASE 3 — CORE WEB VITALS: Optimize LCP (compress/size images, lazy-load below the fold, prioritize above-the-fold, simplify hero), INP (memoize expensive work, split large components, debounce search, paginate, avoid unnecessary re-renders, move heavy filtering server-side), and CLS (explicit image dimensions/aspect ratios, reserve space, stable skeletons).

PHASE 4 — FRONTEND CODE: Remove unused/duplicate imports, dead components, console logs; fix useEffect dependency issues and over-fetching; apply React.memo/useMemo/useCallback only where they help; split oversized files.

PHASE 5 — ROUTES & PAGES: Load only critical data first, defer non-critical sections, lazy-load below-the-fold components and heavy charts/maps/tables, use skeletons, reduce initial JS work.

PHASE 6 — IMAGES: Replace oversized/uncompressed images, use proper sizes/formats, lazy-load below the fold, eager-load key above-the-fold images, add width/height, reserve container space. List images needing manual compression in the report.

PHASE 7 — VIDEO: Add poster images, defer loading, avoid autoplay on mobile when it hurts performance, ensure video doesn't delay LCP.

PHASE 8 — ICONS & UI LIBRARIES: Import only used icons, remove unused ones, avoid heavy animated components unless needed.

PHASE 9 — ANIMATIONS: Reduce page-load animations, keep them transform/opacity based, simplify on mobile, respect reduced motion.

PHASE 10 — DATA FETCHING: Add limits and pagination, load data only when needed, move heavy search/filter to backend functions, debounce search, fetch only visible tab data, combine duplicate queries, avoid re-fetch loops. Do not weaken permissions or use service role unnecessarily.

PHASE 11 — BACKEND FUNCTIONS: Add limits/pagination, return only needed fields, reduce repeated external calls, improve error handling, avoid wasteful loops and unnecessary service-role reads.

PHASE 12 — INTEGRATION CREDITS: Move calls to explicit user actions, prevent duplicate calls, debounce/throttle, batch where possible, reduce unnecessary AI/integration calls.

PHASE 13 — JS BUNDLE: Lazy-load heavy components/route features, move admin-only components behind admin routes, load charts/maps only when visible, remove unused imports/packages.

PHASE 14 — CSS & LAYOUT: Simplify nested layouts, avoid unnecessary wrappers, reduce expensive blur/backdrop effects, avoid rendering hidden tab content, keep skeletons stable.

PHASE 15 — SEO PRESERVATION: Preserve titles, meta descriptions, Open Graph, canonical tags, structured data, headings, internal links, and image alt text.

PHASE 16 — ACCESSIBILITY: Keep labels, alt text, contrast, keyboard navigation, accessible modals, and reduced-motion support.

PHASE 17 — MOBILE: Reduce heavy above-the-fold content, simplify hero, lazy-load non-critical sections, improve table/card rendering, reduce animation intensity, prevent layout shift.

PHASE 18 — ADMIN/DASHBOARDS: Load summary metrics first, lazy-load charts, load tab content on select, paginate tables, use backend aggregation, debounce filters, memoize computed metrics.

PHASE 19 — TABLES/LISTS: Add pagination/load-more/search limits, debounce search, render only visible data, keep row components lightweight.

PHASE 20 — FORMS/CHECKOUT: Debounce validation, prevent duplicate submissions, load payment scripts only when needed, show clear loading states.

PHASE 21 — AUTH FLOW: Centralize auth state, avoid duplicate user fetches, load public pages without waiting on private data, keep auth UI lightweight.

PHASE 22 — LOGGING CLEANUP: Remove console/debug logs and logs inside loops; keep useful error handling and security-relevant logs.

PHASE 23 — IMPLEMENTATION ORDER: Fix first-load critical issues, then images/hero, data fetching, duplicate calls, pagination, lazy loading, dashboards, re-renders, dead code, mobile, layout shift, log cleanup, final test.

PHASE 24 — FINAL TESTING: Test homepage, public pages, auth flow, dashboards, admin pages, forms, search, filters, tables, modals, mobile/desktop, data loading, empty/error states, protected routes, backend functions. Verify no broken routes/imports, no duplicate requests, no layout shift, no infinite loading, no console errors, no degraded SEO/accessibility.

PHASE 25 — FINAL DELIVERABLE: Provide a summary, files changed and why, performance improvements grouped by area, remaining recommendations (images to compress, scripts to review, pages to test in PageSpeed), risk notes, and suggested PageSpeed test URLs.

Begin by scanning the entire app and producing the audit report first.