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 web performance best practices when building a product listing page. The task says nothing about pagination, compression, lazy loading, image optimization, or query optimization -- the agent should apply these patterns on its own.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Products endpoint is paginated",
"description": "The GET /api/products endpoint supports pagination (limit/offset, page/limit, or cursor-based). The database query includes a LIMIT clause. Returning all products without any limit is a failure.",
"max_score": 18
},
{
"name": "No N+1 queries",
"description": "Products are fetched with their category name using a JOIN or a single batch query, NOT by querying the category table inside a loop for each product.",
"max_score": 16
},
{
"name": "Compression middleware enabled",
"description": "The Express server setup includes compression middleware (e.g. import compression from 'compression'; app.use(compression())) or equivalent.",
"max_score": 14
},
{
"name": "Routes are lazy-loaded",
"description": "Page components (HomePage, ProductListPage, ProductDetailPage, AboutPage) are loaded using React.lazy() with dynamic import(), not static imports at the top of the router file.",
"max_score": 14
},
{
"name": "Suspense with fallback",
"description": "Lazy-loaded route components are wrapped in a React Suspense boundary with a fallback prop showing a loading indicator.",
"max_score": 6
},
{
"name": "Product images use loading=lazy",
"description": "Product card images in the listing grid include loading=\"lazy\" attribute since they are below-the-fold content in a scrollable list.",
"max_score": 12
},
{
"name": "Images have width and height",
"description": "Product card image elements include explicit width and height attributes (or CSS aspect-ratio) to prevent layout shift.",
"max_score": 8
},
{
"name": "Pagination metadata in response",
"description": "The paginated API response includes metadata such as total count, current page, total pages, or next/prev links so the frontend can navigate between pages.",
"max_score": 6
},
{
"name": "Foreign key index on category_id",
"description": "If the agent creates or modifies the schema, category_id has an index for efficient JOINs. Acceptable if the agent uses the provided schema as-is (since they weren't asked to modify it).",
"max_score": 6
}
]
}