Performance Optimization

Pagesmith sites are fast by default (SSG), and the platform handles the heavy parts of performance — image conversion, font hosting, edge caching — automatically. This page covers what’s automatic, what you control, and how to measure.

Why Performance Matters

• User experience — Fast sites convert better
• SEO — Page speed is a ranking factor
• Accessibility — Works on slow connections
• Costs — Less bandwidth, cheaper hosting

Measuring Performance

Lighthouse

Chrome DevTools includes Lighthouse:

1. Open DevTools (F12)
2. Go to Lighthouse tab
3. Click “Analyze page load”
4. Review scores

Target scores:

• Performance: 90+
• Accessibility: 90+
• Best Practices: 90+
• SEO: 90+

Core Web Vitals

Google’s key metrics:

Image Optimization

Images are usually the biggest performance impact — and Pagesmith handles most of the work automatically.

What Pagesmith does for you

When you upload an image (or the AI fetches one for you), the image fetcher service:

• Converts to WebP at quality 80 — smaller files, same visual quality
• Generates five responsive variants at widths 1536, 1024, 768, 640, and 320 pixels — aspect ratio preserved
• Skips upscaling — if your original is 1280px wide, only the 1024 / 768 / 640 / 320 variants are generated
• Serves from CDN — variants are stored on pagesmith-cdn.com and the right one is served per device
• Uses high-quality resampling (Lanczos) for the downscaled versions

You don’t need to convert to WebP, run images through Squoosh, or generate @1x / @2x versions yourself. Upload once, the platform handles the rest.

What you still control

• Source resolution — upload high-resolution originals so the largest variant has enough detail. The platform won’t upscale.
• Alt text — for accessibility and SEO. Set it on each image.
• Lazy loading — keep above-the-fold images eager (the default), but use loading="lazy" on below-the-fold images:

<img src="image.webp" alt="..." loading="lazy">

• Don’t ship hidden images — if a section is conditionally rendered, gate the image too rather than relying on display: none.

Minimizing JavaScript

Pagesmith uses Astro’s islands architecture — JavaScript only where needed.

Client Directives

<!-- Only loads JS when visible -->
<Counter client:visible />

<!-- Only loads JS when idle -->
<Analytics client:idle />

<!-- Loads JS immediately (use sparingly) -->
<Form client:load />

Reduce Dependencies

Ask: Does this component need JavaScript?

• Static content → No JS needed
• Forms → Minimal JS
• Complex interactivity → JS island

CSS Optimization

Tailwind

Pagesmith uses Tailwind. Only classes you actually use end up in the CSS shipped to the browser, so adding utility classes liberally won’t bloat the bundle.

Critical CSS

For above-fold content, inline critical CSS:

<style is:inline>
  /* Critical styles for first paint */
</style>

Font Optimization

Pagesmith self-hosts fonts through its built-in font registry — Google Fonts and other external CDNs are not used at runtime, so there’s no extra DNS lookup or third-party request blocking your first paint. See the Typography docs for how the font system works.

What you still control:

Limit font files

Each font file is a request. Keep it minimal:

• 1–2 font families max
• 2–3 weights per family
• Prefer variable fonts where the design allows

Subset when you can

If your site only ever uses Latin characters, ask the AI to use a Latin-only subset of your chosen font.

Third-Party Scripts

External scripts (analytics, chat widgets, embeds) are usually the largest single performance hit you can introduce.

Use built-in integrations where possible

Pagesmith’s analytics integrations (Google Analytics 4, GTM, Meta Pixel, etc.) are wired in a way that defers loading until the page is interactive. Adding the same trackers manually via <script> tags is usually slower.

Async / defer

If you do hand-add a third-party script, use async or defer so it doesn’t block rendering:

<script async src="https://example.com/widget.js"></script>
<script defer src="..."></script>

Load chat widgets on interaction

Chat widgets are heavy. Don’t load them on page load — load them when the user clicks a “Chat” button, or after first input.

Caching

Pagesmith’s edge deployment handles caching automatically.

Static assets

Images, CSS, JS get long cache times. Content is hashed for cache busting on rebuild.

HTML

HTML has shorter cache for freshness. Deploys update instantly.

Performance Checklist

Images (most is automatic):

• Upload high-resolution source images
• Set alt text on every image
• Lazy load below-the-fold images
• Don’t ship hidden/unused images

JavaScript:

• Islands only where needed
• Proper client: directives (visible, idle, load)
• No unused dependencies

Fonts:

• Limited font files (1–2 families, 2–3 weights)
• Use variable fonts where possible

Third-party:

• Use built-in integrations rather than hand-added scripts where possible
• async or defer on any manual <script> tags
• Load chat widgets on interaction, not on page load

Related Docs

• Key Concepts — SSG and islands
• Typography — Font registry and self-hosting
• SEO Best Practices — Speed affects ranking
• Publishing — Edge deployment