▸case-01 Our e-commerce frontend is experiencing noticeable latency during initial page loads and user interactions. Please provide a structured strategy and step-by-step workflow for profiling the site's performance so we can identify the primary bottlenecks. | fail→fail | 23,043 | 22,946 | -0% | 1 | 1 | 0% | 3,727 | 3,523 | -5% | 0 | 0 | — |
▸case-02 We want to run an automated Lighthouse performance audit against our staging URL at https://staging.example.com. How do I run the performance script in this repository, and what key frontend metrics should we analyze from the output? | fail→pass | 11,822 | 7,495 | -37% | 1 | 1 | 0% | 2,071 | 1,751 | -15% | 0 | 0 | — |
▸case-03 Our web app's main hero banner image takes over 4 seconds to render on mobile networks, frustrating users. We are considering jumping straight into compressing images or changing CDN settings. How should we measure and assess this loading issue using standard web vitals? | pass→pass | 16,430 | 15,108 | -8% | 1 | 1 | 0% | 2,834 | 3,039 | +7% | 0 | 0 | — |
▸case-04 As dynamic ad banners load on our news website, the body text jumps downward, causing users to accidentally click ads. We want to fix this layout instability. What specific performance metric quantifies this visual shift, and what target threshold defines good performance? | pass→pass | 5,988 | 5,414 | -10% | 1 | 1 | 0% | 1,015 | 1,246 | +23% | 0 | 0 | — |
▸case-05 Users complain that clicking the checkout button on our single-page application feels sluggish and unresponsive for hundreds of milliseconds. Which modern Core Web Vital metric captures page responsiveness to user interactions, and what is its target threshold for good user experience? | pass→pass | 5,218 | 5,447 | +4% | 1 | 1 | 0% | 911 | 1,246 | +37% | 0 | 0 | — |
▸case-06 Our developer team wants to rewrite our React table components using virtualization before gathering telemetry because we assume DOM node count is high. What fundamental sequence should guide performance work according to frontend engineering best practices? | pass→pass | 11,326 | 9,560 | -16% | 1 | 1 | 0% | 1,940 | 1,808 | -7% | 0 | 0 | — |
▸case-07 When recording a trace in Browser Developer Tools during page load, developers see long red blocks across the main thread line. Which DevTools panel or tab is used to analyze main-thread CPU tasks and long script execution times, and what constitutes a long task threshold? | pass→pass | 5,025 | 4,259 | -15% | 1 | 1 | 0% | 894 | 1,090 | +22% | 0 | 0 | — |
▸case-08 Our single-page app's JavaScript heap footprint grows steadily from 50MB to over 400MB as users navigate between tabs, eventually crashing the browser tab. Which browser profiling tool tab should be used to inspect memory heap snapshots, and how should snapshots be compared? | pass→pass | 11,764 | 9,524 | -19% | 1 | 1 | 0% | 1,993 | 1,915 | -4% | 0 | 0 | — |
▸case-09 Scrolling through our product grid produces choppy animations and dropped frames below 60fps. Which specific browser DevTools profiling feature or visualization helps diagnose dropped frames during scrolling interactions? | pass→pass | 12,193 | 11,073 | -9% | 1 | 1 | 0% | 1,946 | 1,974 | +1% | 0 | 0 | — |
▸case-10 We need an automated script invocation command to audit `https://prod.mycompany.com` via our repository's benchmark script. We are tempted to execute `npx lighthouse https://prod.mycompany.com` directly. What script command should be used instead? | fail→pass | 7,293 | 1,970 | -73% | 1 | 1 | 0% | 1,327 | 651 | -51% | 0 | 0 | — |
▸case-11 Our team lead suggested optimizing bundle sizes immediately after building a new feature branch without running any benchmark scripts. What baseline measurement practice should be followed before modifying code for performance? | pass→pass | 10,476 | 9,341 | -11% | 1 | 1 | 0% | 1,683 | 1,885 | +12% | 0 | 0 | — |
▸case-12 We want to track real user metrics from live production traffic alongside synthetic lab audits. How should synthetic lab measurements like Lighthouse scripts be distinguished from real user monitoring (RUM) field data? | pass→pass | 17,306 | 15,397 | -11% | 1 | 1 | 0% | 2,704 | 2,854 | +6% | 0 | 0 | — |
▸case-13 After closing modal dialogs in our web app, retained memory remains elevated. When profiling heap snapshots in Developer Tools, what specific memory object type indicates UI elements that were removed from the DOM tree but still referenced in JavaScript? | pass→pass | 5,229 | 7,805 | +49% | 1 | 1 | 0% | 959 | 1,449 | +51% | 0 | 0 | — |
▸case-14 A user profile page triggers repeated forced synchronous layouts in browser traces when expanding accordion sections. How does this pattern manifest in DevTools performance traces, and what code pattern causes it? | pass→pass | 16,598 | 14,583 | -12% | 1 | 1 | 0% | 2,836 | 2,772 | -2% | 0 | 0 | — |
▸case-15 Typing into a search autocompletion input box causes 300ms delays before keystrokes appear on screen. Which DevTools profiling view identifies script processing bottlenecks in event listeners, and what action refactors long handlers? | pass→pass | 9,483 | 9,138 | -4% | 1 | 1 | 0% | 1,728 | 1,877 | +9% | 0 | 0 | — |
▸case-16 Our web application shows slow initial document response times across mobile connections before any HTML content downloads. Which metric measures time to first byte, and what is its standard good target threshold? | pass→pass | 5,892 | 3,649 | -38% | 1 | 1 | 0% | 993 | 921 | -7% | 0 | 0 | — |
▸case-17 A performance profile reveals that giant uncompressed JavaScript vendor chunks are delaying page interactivity. What optimization actions should be prioritized after identifying this bottleneck? | pass→pass | 16,307 | 13,390 | -18% | 1 | 1 | 0% | 2,732 | 2,571 | -6% | 0 | 0 | — |
▸case-18 In our React application, clicking a sidebar filter button freezes the UI while hundreds of subcomponents update needlessly. How should component re-rendering bottlenecks be profiled using developer tooling? | pass→pass | 15,653 | 15,770 | +1% | 1 | 1 | 0% | 2,520 | 2,865 | +14% | 0 | 0 | — |
▸case-19 After collecting performance trace recordings showing high CPU usage, what step comes next before writing optimization code in a profiling methodology? | pass→pass | 7,043 | 5,500 | -22% | 1 | 1 | 0% | 1,194 | 1,103 | -8% | 0 | 0 | — |
▸case-20 We want to configure Vite to split our third-party vendor dependencies into a separate static bundle chunk using rollupOptions. How do we structure the `manualChunks` function in `vite.config.js`? | pass→pass | 11,998 | 8,504 | -29% | 1 | 1 | 0% | 2,331 | 1,950 | -16% | 0 | 0 | — |
▸case-21 How do I write a Jest unit test to mock a global `fetch` API response when testing a React component that displays user profile data? | pass→pass | 13,947 | 12,350 | -11% | 1 | 1 | 0% | 2,838 | 2,956 | +4% | 0 | 0 | — |
▸case-22 How do I configure Nginx server block directive to add long-term caching HTTP response headers for static assets like CSS and JS files? | fail→fail | 12,420 | 10,447 | -16% | 1 | 1 | 0% | 2,314 | 2,365 | +2% | 0 | 0 | — |