CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/web-performance

Web performance patterns — lazy loading, bundle optimization, query optimization, compression, and resource management

81

3.23x
Quality

77%

Does it follow best practices?

Impact

97%

3.23x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-3/

{
  "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
    }
  ]
}

evals

tile.json