EdTech & Software Architecture Case Study

Optimizing TTFB to 45ms and Increasing Lead Sign-Ups by 106% for an EdTech Platform in Taramani

Background & Challenge

SkillUp faced high user churn during page loads. Their client-rendered platform suffered from a 1.2s TTFB and poor Lighthouse scores, resulting in lower search rankings and high sign-up abandonment.

Our Solution Approach

We rebuilt the platform core using Next.js Static Site Generation (SSG), implemented edge routing, optimized CSS delivery, and set up dynamic catalog caching.

Overview

In educational technology portals, page responsiveness and load speed determine student engagement and conversion rates. SkillUp Learning Portal, based in the technology park of Taramani, Chennai, delivers certification courses to tech professionals worldwide. Prior to partnering with Yamee Cluster, their application utilized client-side rendering (CSR), requiring users to load heavy JavaScript bundles before viewing courses.

The platform experienced a 1.2-second Time to First Byte (TTFB) and a Lighthouse Performance score of 45, which lowered search rankings and resulted in a low 3.1% sign-up conversion rate. Yamee Cluster rebuilt the portal using Next.js Static Site Generation (SSG) and edge hosting, reducing TTFB to 45ms and boosting sign-up rates to 6.4%.

---

The Challenge

Unoptimized frontend rendering introduced several technical and business challenges:

  • High User Abandonment: Slow load times on mobile networks caused prospective students to abandon course pages.
  • Declining Organic Visibility: A poor Lighthouse score (45) reduced the site's visibility on search engine results pages.
  • High Server Costs: The client-side setup required constant backend queries, leading to high server hosting bills.
  • Poor Mobile Performance: Heavy JavaScript bundles caused layout shifts and laggy interactions on mobile devices.

---

Requirements

The new portal architecture was designed to meet these performance goals:

1. Time to First Byte Under 100ms: Instant server responses on edge networks.

2. Lighthouse Performance > 90: High page speeds and clean layouts on mobile and desktop.

3. Static Page Compilation: Pre-rendering course pages during build time.

4. Optimized Bundle Delivery: Code-splitting and minifying JavaScript files.

5. Dynamic Search Indexing: Fast indexing of new courses without rebuilds.

---

Architecture

Yamee Cluster engineered a fast, server-less frontend architecture:

  • Frontend App: Next.js Server Components utilizing React Server Components (RSC) to minimize client-side JavaScript.
  • Caching Layer: Edge CDN caching to store pre-rendered HTML close to global users.
  • Database: Prisma ORM interfacing with a PostgreSQL database instance.
  • Asset Delivery: Modern image optimization CDNs and asset minifiers.
  • Deployment: Edge serverless architecture to ensure high availability and scale.

---

Execution

The platform optimization was completed in 10 weeks:

  • Phase 1: Performance Profiling (Weeks 1-2): Audited JavaScript bundles, API loads, and database queries.
  • Phase 2: Next.js SSG Transition (Weeks 3-5): Rebuilt the pages using Next.js Static Site Generation and ISR.
  • Phase 3: Asset & Script Audits (Weeks 6-7): Removed unused code, optimized third-party scripts, and compressed assets.
  • Phase 4: Edge CDN Configuration (Weeks 8-9): Configured routing rules and CDN cache rules.
  • Phase 5: Final Tuning & Deployment (Week 10): Optimized Core Web Vitals, verified metadata configurations, and launched the site.

---

Timeline

The project progressed through these development stages:

  • Week 1-2: Performance profiling, bundle analysis, and backend optimization plan.
  • Week 3-4: Next.js application setup, routing, and catalog SSG integration.
  • Week 5-6: RSC implementations, code-splitting, and layout adjustments.
  • Week 7-8: Image CDNs, asset optimizations, and edge routing configurations.
  • Week 9: End-to-end performance tests and caching updates.
  • Week 10: Launch and post-migration SEO audit.

---

Outcome

The Next.js rebuild delivered immediate performance and business gains:

  • Fast Response Times: TTFB fell from 1.2 seconds to 45 milliseconds.
  • High Speed Scores: Lighthouse performance score rose from 45 to 98 out of 100.
  • Increased Traffic: Search engine optimization improvements boosted organic traffic by 65%.
  • Doubled Registrations: Sign-up conversion rates rose from 3.1% to 6.4%.

---

Business Impact

The performance improvements boosted the store's digital sales:

  • Lower Server Costs: Offloading database queries to CDN caches cut hosting costs by 40%.
  • Higher Learner Retention: Fast page loads led to improved course completion rates among mobile learners.
  • Secured Organic Rankings: The site achieved top page listings for critical education search terms in Chennai.

---

FAQ

How does the system update product stock on static pages?

The app uses Incremental Static Regeneration (ISR) to rebuild course pages in the background when details change.

Are international payments supported?

Yes, the checkout flow is integrated with multi-currency payment gateways supporting local payment methods.

How are course images optimized?

Images are uploaded in high resolution, then automatically compressed and resized into WebP format based on the shopper's device size.

---

CTA

Are you looking to improve your web application performance and Core Web Vitals? Contact Yamee Cluster to learn more about our Next.js development services.