React EdTech Platform: Fixing a Slow Online Learning Experience Without Rebuilding the Product

Project: React Performance Optimization, Course Platform Architecture Refactoring, and Learning Experience Improvement

Duration: 16 weeks

LearnSphere is an online learning platform used by individual learners, schools, and corporate training teams to access video courses, quizzes, assignments, certificates, discussion threads, and progress dashboards. The product began as a simple course library but grew into a complex React and Next.js application with personalized learning paths, instructor profiles, AI-powered course recommendations, real-time discussion activity, quiz engines, downloadable resources, cohort dashboards, and admin reporting. The company had successfully expanded its feature set, but the learner experience became slower over time. Course pages loaded too much JavaScript, lesson navigation lagged, quiz screens felt delayed on mobile, and progress dashboards became difficult to use for large enterprise cohorts.

The application had become too client-heavy. Course landing pages shipped interactive modules that were not needed immediately, lesson pages hydrated video tools, discussions, notes, recommendations, and resource panels all at once, and learner progress state was stored too broadly. Small updates like marking a lesson complete, opening a transcript, or answering a quiz question caused unrelated page sections to re-render. Large course catalogs and enterprise learner tables also rendered too many items upfront.

Business signals

• Learners abandoned course pages before the first lesson became usable.
• Mobile users reported lag while switching lessons and answering quizzes.
• Enterprise admins complained that cohort dashboards slowed down with large learner groups.
• Instructors hesitated to add richer resources because lesson pages already felt heavy.
• SEO-focused public course pages had weaker performance than competitors.
• Support tickets increased around delayed progress updates and frozen quiz screens.
• Customer success teams lacked clear performance data when enterprise clients complained.
• Product teams were afraid that new learning widgets would increase JavaScript cost.
• Engineering teams spent repeated cycles debugging the same render and hydration issues.

Technical signals

• Initial JavaScript payload on course pages was too large.
• Video lesson pages hydrated too many panels at once.
• Discussion widgets loaded before most learners opened them.
• Quiz validation and scoring logic ran too close to answer selection events.
• Global Context providers mixed learner progress, course content, user session, recommendations, and UI preferences.
• Course catalogs rendered hundreds of cards during initial page load.
• Enterprise cohort tables rendered too many learner rows upfront.
• Transcript search performed expensive filtering synchronously.
• Progress updates caused broad React re-render cascades.
• Large charting libraries loaded on admin dashboards by default.
• Recommendation modules increased bundle size on learning routes.
• Resource download panels loaded metadata before users expanded them.
• Layout shifts occurred when video players, progress cards, and certificate banners loaded late.
• Bundle growth was not monitored during pull requests.

Metrics C L S: 0.20 on video lesson pages

I N P: 432ms at p75 on lesson and quiz pages

L C P: 5.0s at p75 on mobile course landing pages

Quiz Answer Delay: 280ms to 610ms on mobile devices

Cohort Table Delay: Enterprise learner tables froze when cohorts exceeded several hundred users

Lesson Switch Delay: 350ms to 720ms depending on course size

Catalog Render Count: Hundreds of course cards rendered during initial catalog load

Average Hydration Time: 3.3s on mobile lesson pages

Initial Java Script Payload: 1.08MB compressed on video lesson routes

Pages Measured

• Homepage
• Public course landing pages
• Course catalog
• Video lesson page
• Quiz page
• Learner dashboard
• Enterprise cohort dashboard
• Instructor course editor
• Certificate page

Primary Audience: Mobile learners, school-issued Chromebooks, older personal laptops, and enterprise admin users

Measurement Window: 30 days before optimization

The team started by measuring real learner workflows instead of relying only on generic page scores. Browser traces, React Profiler sessions, route bundle reports, and real-user monitoring showed that most delays came from hydration cost, broad state updates, heavy widgets, and large lists rendering too early.

What we inspected

• Title: Workflow-level monitoring setup

  Description: The team tracked lesson start time, lesson switching delay, quiz answer delay, transcript search latency, progress update timing, catalog interaction delay, and cohort dashboard responsiveness.

• Title: React Profiler investigation

  Description: Profiling showed that progress updates caused unnecessary re-renders across lesson navigation, recommendation widgets, discussion panels, notes, resource lists, and certificate banners.

• Title: Bundle analysis

  Description: The bundle report revealed that discussion tools, recommendation modules, charting libraries, quiz utilities, resource viewers, and certificate preview logic were included too early.

• Title: Video lesson trace review

  Description: Performance traces showed that video player hydration, transcript loading, note widgets, and discussion panels competed for main-thread time during the first few seconds of a lesson page.

• Title: Quiz interaction review

  Description: Quiz answer selection triggered validation, scoring, progress sync, analytics events, and UI updates at the same time. This created noticeable delay on lower-end devices.

• Title: Large list audit

  Description: The team reviewed course catalogs, lesson lists, and enterprise cohort tables. Many views rendered far more rows or cards than users could see.

The main challenge was improving performance without disrupting active learners, instructors, and enterprise clients. LearnSphere had thousands of users completing lessons daily, and many corporate customers depended on training deadlines and compliance certificates. The team could not pause releases or rebuild the platform from scratch. They needed to make the existing React application faster, easier to maintain, and more predictable while preserving course progress accuracy, quiz behavior, reporting workflows, and SEO visibility for public course pages.

The solution was a targeted performance recovery rather than a full rebuild. LearnSphere kept React and Next.js but changed how course pages loaded, how learner progress state was isolated, how video and quiz interactions were handled, and how large lists rendered.

Strategy

• Reduce first-load JavaScript on lesson and course pages.
• Server-render public course content where possible.
• Hydrate only critical learning controls immediately.
• Delay discussion, notes, resources, and recommendations until needed.
• Move progress state closer to affected components.
• Virtualize course catalogs, lesson lists, and cohort tables.
• Keep quiz answer feedback immediate.
• Move analytics and progress sync away from urgent interactions.
• Reserve layout space for video players and progress cards.
• Measure learning workflows with real-user data.
• Add bundle budgets and performance review to releases.

Phase1 Title: Course route rendering cleanup

Actions

• Moved public course descriptions, instructor bios, and curriculum previews to server-rendered sections.
• Reduced client-only rendering for static course marketing content.
• Split course landing pages from authenticated lesson player routes.
• Delayed recommendations below the fold.
• Added Suspense boundaries around discussion, notes, and resource panels.
• Removed unnecessary dashboard widgets from lesson routes.
• Prioritized lesson title, video shell, and navigation controls.

Description: The team separated public course discovery pages from authenticated learning pages. SEO-focused content was rendered earlier, while interactive learning widgets loaded only when needed.

Phase2 Title: JavaScript payload reduction

Actions

• Lazy-loaded discussion widgets only when opened.
• Moved certificate preview logic out of default lesson bundles.
• Loaded resource viewers only after learners expanded the resources panel.
• Split quiz utilities by question type.
• Lazy-loaded charting libraries only on admin reporting dashboards.
• Removed duplicate date and formatting utilities.
• Changed broad icon imports to direct icon imports.
• Delayed non-essential analytics until after primary learning controls became usable.
• Added route-level bundle budgets in CI.

Description: The team reduced the amount of code loaded before a learner could start a lesson.

Phase3 Title: Video lesson page optimization

Actions

• Prioritized video shell and playback controls.
• Deferred transcript search until the transcript panel opened.
• Delayed notes and discussion hydration.
• Reserved fixed space for the video player to reduce layout shift.
• Loaded captions metadata only when available and needed.
• Prevented recommendation widgets from blocking the first lesson interaction.
• Reduced synchronous work during lesson initialization.

Description: Lesson pages were the core learning experience, so the team made the video area usable before secondary panels hydrated.

Phase4 Title: Learner progress state refactor

Actions

• Split learner progress, course content, recommendations, and UI preferences into separate state boundaries.
• Updated only affected lesson navigation items after progress changes.
• Memoized derived completion percentages.
• Separated stable course metadata from frequently changing progress data.
• Stabilized function references passed to lesson navigation components.
• Removed wrapper components that caused unnecessary render depth.
• Applied React.memo only to components proven expensive by profiling.

Description: Progress state was previously stored too broadly, causing unrelated sections to re-render after lesson completion or quiz updates.

Phase5 Title: Quiz interaction improvements

Actions

• Showed selected answer feedback immediately.
• Deferred scoring calculations when possible.
• Moved progress sync outside the urgent answer selection path.
• Queued analytics events instead of firing them during click handling.
• Split validation logic by question type.
• Reduced synchronous explanation rendering after answer selection.
• Prevented unrelated quiz sidebar updates during answer interaction.
• Optimized retry and review mode rendering.

Description: Quiz pages needed immediate feedback after answer selection. The team separated visual response from scoring, syncing, and analytics.

Phase6 Title: Large list virtualization

Actions

• Virtualized course catalog grids.
• Virtualized long lesson lists inside large certification programs.
• Virtualized enterprise cohort learner tables.
• Reduced DOM complexity inside course cards.
• Moved secondary course metadata behind expandable sections.
• Lazy-loaded course card images near the viewport.
• Memoized learner row status formatting.
• Reduced table-wide re-renders after individual learner progress updates.

Description: Course catalogs, lesson lists, and enterprise cohort dashboards created unnecessary rendering work by displaying too many items at once.

Phase7 Title: Admin dashboard optimization

Actions

• Lazy-loaded charting libraries only when reporting panels opened.
• Split admin reporting routes from learner-facing routes.
• Cached common cohort summary calculations.
• Reduced polling frequency for inactive dashboards.
• Paused hidden dashboard widgets.
• Moved export tools out of the initial admin bundle.
• Added loading states that reserved table and chart space.

Description: Enterprise admins needed faster cohort reporting without loading heavy analytics modules on every route.

Phase8 Title: Layout stability and perceived performance

Actions

• Reserved space for video players, progress cards, and certificate banners.
• Standardized skeleton heights for lesson panels.
• Prevented recommendation sections from pushing content after load.
• Prioritized the main course image on public landing pages.
• Used responsive image sizes for course cards and instructor images.
• Reduced late layout changes after progress data loaded.
• Improved empty states for discussions and resources.

Description: The team improved visual stability across video pages, dashboards, and certificate screens.

• INP improved from 432ms to 168ms at p75 on lesson and quiz pages.
• LCP improved from 5.0s to 2.4s at p75 on mobile course landing pages.
• CLS improved from 0.20 to 0.05 on video lesson pages.
• Initial JavaScript payload on video lesson routes dropped from 1.08MB to 406KB compressed.
• Average hydration time on mobile lesson pages dropped from 3.3s to 1.4s.
• Lesson switch delay dropped from 350-720ms to mostly under 150ms.
• Quiz answer delay dropped from 280-610ms to mostly under 130ms.
• Course catalog scrolling became smoother after virtualization.
• Enterprise cohort tables remained usable with large learner groups.
• Discussion, notes, resources, and recommendation modules no longer blocked first lesson interaction.
• Progress updates stopped triggering broad lesson page re-render cascades.
• Admin reporting routes loaded heavy charting libraries only when needed.
• Performance regressions became easier to detect through CI bundle budgets.

The optimization improved both learner experience and enterprise customer confidence. LearnSphere became faster where it mattered most: starting lessons, switching modules, answering quizzes, and reviewing learner progress.

Outcomes

• Higher lesson start rates on mobile devices.
• Lower frustration during quizzes and lesson switching.
• Improved SEO readiness for public course pages.
• Better usability for enterprise admins managing large cohorts.
• Fewer support complaints about delayed progress updates.
• More confidence for instructors adding richer course materials.
• Reduced engineering time spent investigating repeated performance bugs.
• A stronger release culture around front-end performance and learning workflow metrics.

• Avoid a full product rewrite.

  A rewrite would have interrupted active learners and enterprise clients. Targeted optimization solved the biggest bottlenecks with less risk.

• Prioritize the lesson experience first.

  Starting and completing lessons were the most important user workflows, so video and quiz performance had the highest business impact.

• Delay secondary learning panels.

  Discussions, notes, resources, and recommendations were useful but did not need to block first lesson interaction.

• Virtualize catalogs and cohort tables.

  Rendering hundreds of cards or learner rows upfront created unnecessary DOM and React work.

• Split progress state from course metadata.

  Stable course information and frequently changing learner progress had different update patterns and should not trigger the same render paths.

• Measure workflow-level performance.

  Generic page metrics were not enough. The team needed to track lesson start, lesson switch, quiz answer, and cohort table responsiveness.

• Learning platforms must optimize the moment a user starts a lesson.
• Video pages should not hydrate every secondary panel upfront.
• Quiz interactions need immediate visual feedback before scoring and analytics work.
• Large catalogs and cohort tables should be virtualized.
• Progress state can cause expensive render cascades if stored too broadly.
• Recommendations and discussions should not block primary learning controls.
• Public course pages need different rendering priorities than authenticated lesson pages.
• Performance budgets protect feature teams from gradual JavaScript growth.
• Workflow-level monitoring is essential for education products.
• Targeted React architecture recovery can be safer and faster than a full rewrite.

Role: Director of Engineering

Quote: We did not need to replace the platform to make learning feel fast again. The team focused on the real learner workflows, reduced unnecessary JavaScript, and gave us a front-end structure that can support future course features.

Person: Rachel Morgan

Company: LearnSphere

LearnSphere's React optimization project showed that a complex online learning platform can become significantly faster without a full rebuild. By reducing JavaScript, prioritizing video lesson usability, delaying secondary panels, isolating learner progress state, virtualizing large catalogs and cohort tables, improving quiz responsiveness, and adding performance governance, the team transformed a slow learning experience into a smoother and more scalable platform. The result was better Core Web Vitals, faster lesson starts, smoother quizzes, stronger enterprise dashboard performance, and a React architecture ready for future growth.