GitHub Get started

View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

# Performance

Slate is designed for performance.

## Bundle Size

Slate has minimal impact on bundle size:

- **Zero JavaScript** by default
- **CSS-only** components where possible
- **Alpine.js** only for interactive components
- **No dependencies** beyond Tailwind CSS

## Optimization Tips

### 1. Purge Unused CSS

Tailwind CSS automatically purges unused styles in production.

### 2. Use CSS Variables

Slate uses CSS variables for theming, which are efficient:

```css
:root {
    --color-primary: 250 84% 47%;
}
```

### 3. Lazy Load Components

For large pages, consider lazy loading:

```blade
@once
    @push('styles')
        <link rel="stylesheet" href="...">
    @endpush
@endonce
```

### 4. Minimize Alpine.js

Only use Alpine.js where needed. Most components work without it.

## Best Practices

1. **Use production builds** - Minified CSS/JS
2. **Purge CSS** - Remove unused styles
3. **Optimize images** - If using images in components
4. **Test performance** - Use Lighthouse or similar

## Metrics

Typical performance impact:

- **CSS size**: ~50KB (gzipped)
- **JavaScript**: 0KB (unless using Alpine.js)
- **Load time**: Minimal impact

## Tools

- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
- [WebPageTest](https://www.webpagetest.org/)
- [Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)

Performance

Slate is designed for performance.

Bundle Size

Slate has minimal impact on bundle size:

Zero JavaScript by default
CSS-only components where possible
Alpine.js only for interactive components
No dependencies beyond Tailwind CSS

Optimization Tips

1. Purge Unused CSS

Tailwind CSS automatically purges unused styles in production.

2. Use CSS Variables

Slate uses CSS variables for theming, which are efficient:

styles.css

:root {
    --color-primary: 250 84% 47%;
}

:root {
    --color-primary: 250 84% 47%;
}

3. Lazy Load Components

For large pages, consider lazy loading:

example.blade.php

@@once
    @@push('styles')
        <link rel="stylesheet" href="...">
    @@endpush
@@endonce

@once
    @@push('styles')
        <link rel="stylesheet" href="...">
    @@endpush
@endonce

4. Minimize Alpine.js

Only use Alpine.js where needed. Most components work without it.

Best Practices

Use production builds - Minified CSS/JS
Purge CSS - Remove unused styles
Optimize images - If using images in components
Test performance - Use Lighthouse or similar

Metrics

Typical performance impact:

CSS size: ~50KB (gzipped)
JavaScript: 0KB (unless using Alpine.js)
Load time: Minimal impact

Tools