Performance and Caching

July 16, 2026 ยท View on GitHub

Performance is the time and stability experienced by a user, not a single score. Optimize after measuring the real page and network path.

Build a Request Budget

List every resource required for the first view:

HTML
CSS
JavaScript
Fonts
Images
Third-party scripts

Every resource adds transfer, processing, and failure risk. Remove unnecessary dependencies before compressing them.

Measure Transfer and Timing

curl -sS -o /dev/null \
  -w 'status=%{http_code} dns=%{time_namelookup} connect=%{time_connect} tls=%{time_appconnect} first_byte=%{time_starttransfer} total=%{time_total} size=%{size_download}\n' \
  https://example.dpdns.org/

Run several times and compare results. A single measurement can reflect temporary network conditions or a warm cache.

Optimize Images

  • Resize images to the maximum displayed dimensions.
  • Select an appropriate format.
  • Compress without destroying important detail.
  • Set width and height to reduce layout shifts.
  • Lazy-load images below the first screen when appropriate.
  • Preserve screenshots at a resolution where interface text remains readable.

Example:

<img src="assets/guide.webp" width="960" height="540" loading="lazy" alt="DNS record editor showing an A record">

Compression

Text resources such as HTML, CSS, JavaScript, SVG, and JSON compress well. Configure the web server to use a supported compression method and verify the response:

curl -I -H 'Accept-Encoding: gzip' https://example.dpdns.org/styles.css

Look for a suitable content-encoding and correct vary behavior.

Browser Cache Headers

Short-lived HTML example:

Cache-Control: no-cache

Versioned asset example:

Cache-Control: public, max-age=31536000, immutable

Long-lived caching is safe when the asset filename changes with its content, such as styles.a1b2c3.css. Do not apply a one-year immutable policy to a file whose content changes without a new URL.

DNS TTL and HTTP Cache Are Different

DNS TTL controls caching of DNS answers. HTTP cache headers control web responses. Changing one does not clear the other.

An old page with a correct new IP is usually an HTTP or application cache issue. An old IP before any HTTP connection is a DNS cache issue.

Third-Party Resources

External scripts, fonts, analytics, embeds, and stylesheets create additional DNS lookups, network connections, privacy considerations, and availability dependencies.

Before adding one, ask:

  • Is it necessary for the user goal?
  • What data does the request disclose?
  • What happens if it is slow or unavailable?
  • Can the functionality be served locally?
  • How will version changes be controlled?

Server Caching

A reverse proxy or application cache can reduce repeated work, but only if cache keys include the correct hostname, path, query parameters, authentication state, language, and content variants.

Never cache private authenticated responses in a shared public cache without an explicit safe design.

Performance Lab

  1. Record page size, request count, and total time.
  2. Identify the three largest resources.
  3. Remove or optimize one resource.
  4. Repeat the same measurement conditions.
  5. Verify that accessibility and visual quality remain acceptable.
  6. Document the before and after values.

Completion Check

  • The first page does not require unnecessary third-party scripts.
  • Images use appropriate dimensions and formats.
  • Static assets have intentional cache headers.
  • HTML can update without a year-long stale cache.
  • Compression is verified from the response, not assumed from configuration.
  • Measurements are recorded before and after changes.

Continue to Part 4: Email and Service Records.