Server Timing

The Ellemment Stack includes built-in server timing utilities to measure and monitor application performance. These utilities use the Server-Timing header to provide detailed timing metrics visible in the browser's DevTools.

Implementation Steps

Server timing implementation requires four key steps:

1. Initialize timing
2. Measure function execution
3. Generate timing headers
4. Send timing data

Example Implementation

Here's a complete example using server timing in a route:

import {
  combineServerTimings,
  makeTimings,
  time,
} from '#app/utils/timing.server.ts'
,[object Object],
,[object Object],
,[object Object],
,[object Object],
,[object Object],
// 4. Send Headers
export const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => ({
'Server-Timing': combineServerTimings(parentHeaders, loaderHeaders)
})

Usage Patterns

Single Operation Timing

const result = await time(
  async () => expensiveOperation(),
  { timings, type: 'operation name' }
)

Multiple Operations

const timings = makeTimings('batch operations')
const results = await Promise.all([
time(() => operation1(), { timings, type: 'op1' }),
time(() => operation2(), { timings, type: 'op2' }),
time(() => operation3(), { timings, type: 'op3' }),
])

Nested Operations

const parentTiming = makeTimings('parent')
,[object Object],
,[object Object],
return parentOperation()
}, { timings: parentTiming, type: 'parent-op' })

Best Practices

Naming Conventions

// Good - clear and specific
{ type: 'user-profile-fetch' }
{ type: 'image-optimization' }
// Avoid - too vague
{ type: 'database' }
{ type: 'operation' }

Granularity

// Too granular
const name = await time(() => user.name, { type: 'get-name' })
// Better granularity
const profile = await time(
() => getUserProfile(id),
{ type: 'profile-lookup' }
)

Error Handling

const result = await time(
  async () => {
    try {
      return await riskyOperation()
    } catch (error) {
      console.error('Operation failed:', error)
      throw error
    }
  },
  { timings, type: 'risky-operation' }
)

Performance Analysis

Viewing Timing Data

1. Open Chrome DevTools
2. Navigate to Network tab
3. Select a request
4. View Timing tab
5. Analyze Server Timing metrics

Interpreting Results

• Compare operation durations
• Identify bottlenecks
• Track timing patterns
• Monitor performance impact

For more information about monitoring, see the monitoring documentation. For deployment configuration, refer to the deployment documentation.