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-1/

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

evals

scenario-1

criteria.json

task.md

tile.json