Skip to content

Comments

perf: Code-split slug-specific sections from ExpertisePageClient#110

Merged
vibemarketerpromax merged 1 commit intomainfrom
perf/reduce-tbt-expertise-pages
Feb 20, 2026
Merged

perf: Code-split slug-specific sections from ExpertisePageClient#110
vibemarketerpromax merged 1 commit intomainfrom
perf/reduce-tbt-expertise-pages

Conversation

@vibemarketerpromax
Copy link
Collaborator

Summary

  • Extracts ~1,860 lines of inline slug-specific JSX from ExpertisePageClient.tsx into 6 dynamically-imported data-driven components under slug-sections/
  • Converts 14 below-fold shared components (CapabilitiesGrid, WhyProcedure, TechStack, FAQSection, etc.) to next/dynamic imports
  • Reduces ExpertisePageClient.tsx from 2,573 lines to 757 lines

New slug-section components

Component Slugs Section
WhySection prometheus, istio, thanos "Why Teams Choose X" cards
DecisionFramework prometheus, istio, thanos "Should You Use X?" decision table
TechDecisionTable nodejs, react, python, angular, flutter, react-native "Is X Right for Your Project?"
FrameworkComparison react, python, flutter, react-native "X vs Y: When You Need What"
CustomStackTable all 9 slugs Custom stack/tool tables
DotnetSections dotnet Specialized services + industries

Performance impact

Each expertise page now only downloads its matching slug's chunk instead of all slug-specific code. Below-fold component hydration is deferred via dynamic imports. Target: TBT < 200ms (from 480ms), LCP < 2.5s.

Test plan

  • Verify /technologies/react renders all sections correctly (capabilities, stack table, "Is React Right?", "React vs" comparison, FAQ, etc.)
  • Verify /services/prometheus-monitoring renders WhySection + DecisionFramework + custom stack table
  • Verify /services/istio-consulting and /services/thanos-long-term-storage similarly
  • Verify /technologies/dotnet renders specialized services + industries sections
  • Verify below-fold animations still trigger on scroll
  • Run Lighthouse on /technologies/react — target Performance 90+

Extract ~1,860 lines of inline slug-specific JSX from ExpertisePageClient.tsx
into 6 dynamically-imported data-driven components under slug-sections/:

- WhySection.tsx: "Why Teams Choose X" (prometheus/istio/thanos)
- DecisionFramework.tsx: Decision frameworks (prometheus/istio/thanos)
- TechDecisionTable.tsx: "Is X Right?" tables (nodejs/react/python/angular/flutter/react-native)
- FrameworkComparison.tsx: "X vs Y" comparisons (react/python/flutter/react-native)
- CustomStackTable.tsx: Stack tables for all 9 slugs
- DotnetSections.tsx: Specialized services + industries (dotnet)

Also converts 14 below-fold shared components (CapabilitiesGrid, WhyProcedure,
TechStack, FAQSection, etc.) to next/dynamic imports.

This reduces the initial JS bundle for each expertise page since only the
matching slug's chunk downloads, and below-fold component hydration is deferred.
Target: TBT < 200ms (from 480ms).
@cloudflare-workers-and-pages
Copy link

Deploying website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 09c7b8c
Status: ✅  Deploy successful!
Preview URL: https://f70cc9a8.website-yiq.pages.dev
Branch Preview URL: https://perf-reduce-tbt-expertise-pa.website-yiq.pages.dev

View logs

@vibemarketerpromax vibemarketerpromax merged commit cc8bba6 into main Feb 20, 2026
4 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant