Skip to main content
Texas Design System

Performance

Performance budgets

The DIR Web Modernization Best Practice Standards (HB 5195) require pages to load within 3 seconds on a standard broadband connection. Use the Lighthouse thresholds below as build-pipeline gates.

Metric Target DIR Reference
First Contentful Paint (FCP) ≤ 1.8 s Sec. 2 Performance
Largest Contentful Paint (LCP) ≤ 2.5 s Sec. 2 Performance
Interaction to Next Paint (INP) ≤ 200 ms Sec. 2 Performance
Time to First Byte (TTFB) ≤ 800 ms Sec. 2 Performance
Cumulative Layout Shift (CLS) ≤ 0.1 Sec. 2 Performance
Lighthouse Performance score ≥ 90 General target

CSS best practices

This design system ships a single compiled CSS file. Follow these rules to keep it lean:

  1. Only ship what you use. Each component CSS file is independent — bundle only the ones your site needs.
  2. Prefer design tokens (var(--txds-*)) over hard-coded values to leverage browser caching.
  3. Avoid @import chains in production — use the pre-built design-system.css bundle.
  4. Minimize repaints. Animations in this system use transform and opacity only (GPU-composited properties).

Image guidelines

Format Use case
WebP / AVIF Photographs and complex images (preferred)
SVG Icons, logos, simple illustrations
PNG Transparency when SVG is not practical
  • Always set explicit width and height attributes to prevent layout shift.
  • Use loading="lazy" on images below the fold.
  • Serve responsive images with srcset and sizes.

Font loading

  • Subset fonts to Latin characters when possible.
  • Use font-display: swap (already set in the design system tokens).
  • Preload the primary font file in <head>:
<link rel="preload" href="/fonts/open-sans-v40-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

Checklist

Use this checklist before every release:

  • [ ] Lighthouse Performance score ≥ 90
  • [ ] No render-blocking resources beyond critical CSS
  • [ ] All images have explicit dimensions and lazy loading
  • [ ] Fonts preloaded with font-display: swap
  • [ ] No unused CSS shipped (tree-shake component styles)
  • [ ] GZIP or Brotli compression enabled on server
  • [ ] HTTP caching headers set for static assets (≥ 1 year for hashed files)
  • [ ] No document.write() or synchronous scripts in <head>

Security headers

Add appropriate Content-Security-Policy headers when deploying to production.