Web performance patterns — lazy loading, bundle optimization, query optimization, compression, and resource management
81
77%
Does it follow best practices?
Impact
97%
3.23xAverage score across 3 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent proactively applies route-based code splitting when building a multi-page admin dashboard. The task says nothing about lazy loading, code splitting, or performance -- the agent should apply these patterns on its own.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Routes are lazy-loaded",
"description": "Page components (OverviewPage, UsersPage, AnalyticsPage, SettingsPage) are loaded using React.lazy() with dynamic import(), not static imports at the top of the router/app file. All four pages must be lazy-loaded. Static importing even one page while lazy-loading others is a partial failure.",
"max_score": 30
},
{
"name": "Suspense with fallback",
"description": "Lazy-loaded route components are wrapped in a React Suspense boundary with a fallback prop showing a loading indicator (spinner, skeleton, or loading text). Missing Suspense will cause a runtime error with React.lazy.",
"max_score": 20
},
{
"name": "Direct component imports not barrel exports",
"description": "Page components are imported directly from their individual files (e.g. import('./pages/OverviewPage')), not through a barrel index file that re-exports all pages (e.g. import from './pages').",
"max_score": 10
},
{
"name": "Sidebar layout does not import page content",
"description": "The AdminLayout/sidebar component does not statically import any page components. It only provides the layout shell (sidebar + content outlet). Page content is rendered through a router outlet or children prop.",
"max_score": 15
},
{
"name": "No heavy library imports for simple tasks",
"description": "The agent does not import large utility libraries (lodash, moment, etc.) for tasks easily accomplished with native JavaScript. Small, focused libraries are acceptable.",
"max_score": 10
},
{
"name": "TypeScript types used",
"description": "Component props and data structures are typed with TypeScript interfaces or types, not using 'any'.",
"max_score": 5
},
{
"name": "Functional separation of layout and pages",
"description": "The sidebar/layout is a separate component from the page content, allowing pages to be loaded independently.",
"max_score": 10
}
]
}