Build-time hybrid trace analysis for automated render optimization in React.js SPAs
Connecting static code analysis with runtime layout engines for instant web performance.
Background & Focus
Focused on frontend development and optimizing Core Web Vitals (LCP, INP, CLS) in SPAs over the last two years.
The Problem (State of the Art)
Traditional pure SPAs suffer from high load delays. The browser's preload scanner cannot find assets until the main JS bundle is parsed, severely impacting LCP.
The Need for Speed
What if we could analyze the page before the browser even loads it?
The Solution
The Proposal
A build-time tool executing a headless browser to establish visual ground truth, mapping elements to the AST to synthesize preload tags.
Build Phase
Statically compiling the architecture
Headless Trace
Executing a headless browser for visual truth
AST Mapping
Mapping visual elements back to the AST
Preload Tags
Synthesizing instant preload tags
Core Focus
Research Question & Hypothesis
How can build-time hybrid tracing minimize Resource Load Delay? Hypothesis: We can achieve near SSR performance on purely static architectures without socket exhaustion.
Methodology & Timeline
A 24-month execution plan
Analytical Design
Software Engineering
Empirical Evaluation
Finalization
Relevance
Delimitation & Impact (Relevance to Colombia)
Focused on React.js dashboards. Addresses critical infrastructure realities in Colombia by optimizing for high-latency mobile networks, shifting optimization to the edge without expensive servers.