3 min read
Performance
Claude’s default output works, but it doesn’t always prioritize speed. This skill file teaches Claude to make performance-conscious decisions from the start — so you don’t have to optimize later.
Filename: performance.md
The Skill File
Copy this into a file called performance.md in your project root, next to your CLAUDE.md.
# Performance Conventions
Follow these performance practices for all code in this project. Performance is not a later optimization — build it in from the start.
## Images
- Always add loading="lazy" to images below the fold
- Always include width and height attributes to prevent layout shift
- Use modern formats (WebP) when possible
- Serve appropriately sized images — don't load a 2000px image for a 200px thumbnail
## CSS & Layout
- Avoid animating layout properties (width, height, top, left) — animate transform and opacity instead
- Use will-change sparingly and only on elements that actually animate
- Prefer CSS Grid and Flexbox over JavaScript-based layouts
- Minimize CSS specificity — flat selectors are faster than deeply nested ones
## JavaScript (Web)
- Lazy load components and routes that aren't immediately visible
- Debounce expensive operations (search inputs, scroll handlers, resize listeners)
- Use requestAnimationFrame for visual updates, not setTimeout
- Avoid blocking the main thread — move heavy computation to Web Workers if needed
- Clean up event listeners and intervals when components unmount
## Data Fetching
- Cache API responses when the data doesn't change frequently
- Show loading skeletons instead of spinners — they feel faster
- Fetch only the data you need — don't over-fetch
- Handle loading, error, and empty states for every data fetch
## SwiftUI / Native
- Use LazyVStack and LazyHStack for long scrolling lists
- Avoid complex view hierarchies — extract subviews to help SwiftUI's diffing
- Use @State for local state, not ObservableObject, when possible
- Profile with Instruments before optimizing — measure first
## Build & Bundle
- Tree-shake unused code — don't import entire libraries for one function
- Split code by route so users only download what they need
- Preload critical assets (fonts, above-fold images)
- Minimize third-party dependencies — each one adds weightWhen to Use This
Add this to any project that will be deployed to real users. Especially useful for web apps where load time directly affects user experience.