Performance

Performance is a critical aspect of user experience and SEO. The FiNAN website leverages Astro’s built-in performance features along with Vite’s robust bundling capabilities to ensure fast load times.

Image Optimization

We use Astro’s src/assets folder for local images. Astro automatically processes these images to optimize them for the web.

Using <Image /> Component

Always use the <Image /> component from astro:assets instead of standard <img> tags for local assets.

---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---

<!-- Good: Optimized, responsive, lazy-loaded by default -->
<Image src={myImage} alt="A description of my image" />

Benefits:

• Automatic formatting: Converts to modern formats like WebP or AVIF.
• Resizing: Generates multiple sizes for different screen widths (srcset).
• Layout Shift Prevention: Automatically calculates and sets width/height to prevent CLS (Cumulative Layout Shift).
• Lazy Loading: loading="lazy" is applied by default.

External Images

For external images (like those from a CMS), optimization must be handled differently, often by the CDN serving the image or by using the <Image /> component with inferSize (if valid) or explicit dimensions.

CSS Splitting

Vite (Astro’s build tool) automatically splits CSS into separate files.

• Component-Scoped CSS: Styles defined in an Astro component (<style>) are scoped to that component and only loaded when that component is present on the page.
• Critical CSS: Astro identifies critical CSS required for the initial render and inlines it or loads it early to prevent FOUC (Flash of Unstyled Content).

Developer Action: You generally don’t need to configure this manually. Just write standard Astro component styles or import CSS modules, and the build process handles the rest.

Vendor Chunking

To optimize caching and load times, large JavaScript dependencies are split into their own “chunks” (files). This prevents the user from redownloading the entire application bundle when only a small part of your code changes.

Configuration in astro.config.mjs

Strategies for chunking are defined in the vite section of astro.config.mjs.

astro.config.mjs

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            // Put React-related packages in a separate chunk
            if (id.includes('node_modules/react')) {
              return 'vendor-react';
            }
            // Put large charting libraries in their own chunk
            if (id.includes('node_modules/chart.js')) {
              return 'vendor-charts';
            }
          }
        }
      }
    }
  }
});

By separating volatile application code from stable vendor code, we ensure that return visitors can load the site faster from their browser cache.

Monitoring Performance

We use the following tools to monitor performance:

• Lighthouse: Built into Chrome DevTools. Run an audit to check Core Web Vitals (LCP, FID, CLS).
• PageSpeed Insights: Google’s online tool for testing field data.

Goal: Maintain a Lighthouse score of 90+ on both Mobile and Desktop for core pages.