Pere

Posted on Feb 22

Building a High-Performance Site Analyzer with Astro, React, and Node.js Performance Hooks

#webdev #astro #react #performance

Precision Diagnostics: How We Built the Deltum Site Checker

Most website "health checkers" are either bloated, marketing-heavy, or hide their most valuable data behind a sign-up wall. At Deltum, we believe that digital systems should be transparent and built to last.

To support this, we built a Site Checker—a real-time diagnostic tool designed to give developers and founders an immediate, high-fidelity look at their site’s connectivity, security, and performance.

Here is a look at the technical architecture behind it.

The Goal: Accuracy Without Overhead

We needed the tool to be three things:

Instant: No waiting for full page renders.
Accurate: Measuring raw server response, not just browser-level "perceived" speed.
Informative: Auditing security headers that actually matter (CSP, HSTS, etc.).

The Tech Stack

Following our core principle of "Fewer dependencies, stronger systems," we utilized our standard stack:

Framework: Astro (using SSR mode on Vercel)
UI Architecture: React Islands (hydrated only when the tool is in use)
Styling: Tailwind CSS + daisyUI
Backend: Node.js http/https modules & performance hooks

Technical Implementation: Microsecond Timing

To get the most accurate network timings, we avoided high-level fetch libraries which can add unnecessary overhead. Instead, we used Node.js's native performance hooks within a serverless API route.

1. The HEAD Request Strategy

Instead of a GET request (which downloads the entire HTML body), we perform a HEAD request. This respects the target server’s resources and allows us to inspect headers and timings with minimal data transfer.

import { performance } from 'perf_hooks';

export async function GET({ request }) {
  const start = performance.now();

  // We measure the request lifecycle:
  // DNS -> TCP Handshake -> TLS -> TTFB

  const response = await fetch(targetUrl, { method: 'HEAD' });
  const end = performance.now();

  const ttfb = end - start; 
  // ... more detailed timing logic
}

2. The React Island

The UI is a React component integrated into an Astro page. We use framer-motion for subtle state transitions—ensuring the tool feels "premium" and responsive without cluttering the global site bundle.

---
import SiteChecker from '../components/SiteChecker.tsx';
---
<SiteChecker client:load />

Security Posture Audit

Performance is only half the story. A "stable system" is a secure one. The tool automatically parses the response headers to check for:

Content-Security-Policy (CSP): To prevent injection.
HSTS: To ensure encrypted connections.
X-Frame-Options: To mitigate clickjacking.

Why We Built This

At Deltum, we treat websites as infrastructure, not decoration. This tool is a small piece of our philosophy: providing clarity and structure to the digital systems we manage.

Try the tool here: https://www.deltum.io/en/tools/site-checker

I’d love to hear how you handle server-side performance monitoring. Do you prefer HEAD requests for health checks, or do you find GET more reliable for certain edge cases?

Built by Deltum — Digital systems, built to last.

DEV Community