Towards Autonomous Frontend Systems: AI-Based Bottleneck Detection and Performance Optimization

Abstract

Large frontend systems carry a wide mix of runtime costs: route bootstrapping, script evaluation, component rendering, image loading, layout work, and network waiting. In practice, teams usually watch dashboard thresholds and then inspect traces by hand when a route slows down. That process works for a small product, but it becomes hard to sustain when a platform has many routes, many shared components, frequent releases, and traffic from different devices. This paper presents a telemetry-driven pipeline for detecting frontend bottlenecks and routing the result into a simple optimization loop. The method combines browser-side performance collection, feature aggregation at route and session level, unsupervised anomaly screening, and a supervised classifier that labels the most likely bottleneck class. The evaluation uses a representative enterprise portal with injected faults such as oversized route chunks, repeated re-renders, render-blocking request chains, image priority mistakes, and layout thrashing. The proposed pipeline is compared with threshold rules and standard tree-based baselines. In the controlled study, the combined Isolation Forest and XGBoost pipeline achieves the best F1 score and shortens the time needed to narrow a performance issue to a likely source. The results also show that detection is more useful when the output is linked to concrete frontend actions such as chunk splitting, memoization, API parallelism, image priority correction, and selective render deferral. The paper is written as a practical engineering study intended for component-based web applications that use real user monitoring and continuous delivery.