Best practices for Astro Performance Guidelines
.cursorrules in your project root# Astro Performance Guidelines ===================================== ## Core Principles ------------------ 1. **Optimize for Speed**: Prioritize page load times and overall user experience. 2. **Minimize Overhead**: Reduce unnecessary computations, requests, and memory usage. 3. **Leverage Caching**: Utilize caching mechanisms to minimize redundant work. 4. **Optimize Images**: Ensure images are optimized for web use, using appropriate formats and compression. 5. **Monitor Performance**: Regularly monitor and analyze performance metrics to identify areas for improvement. ## Code Style Guidelines ----------------------- ### Naming Conventions * Use descriptive and concise variable and function names. * Use camelCase for variable and function names. * Use PascalCase for component names. ### Typing * Use type annotations for all function parameters and return types. * Use interfaces for complex data structures. * Use type guards for conditional type checking. ## Best Practices ----------------- ### 1. Minimize Server-Side Rendering (SSR) Overhead * Use `getStaticProps` instead of `getServerSideProps` when possible. * Optimize database queries and API calls. * Use caching mechanisms, such as Redis or Memcached, to reduce database queries. ### 2. Optimize Client-Side Rendering (CSR) * Use `useEffect` and `useCallback` to optimize component re-renders. * Use `React.memo` to memoize components. * Avoid unnecessary re-renders by using `shouldComponentUpdate` or `React.PureComponent`. ### 3. Leverage Browser Caching * Use the `Cache-Control` header to set caching policies. * Use service workers to cache resources and handle offline scenarios. * Use the `astro` `cache` directive to cache pages and components. ### 4. Optimize Images * Use image optimization tools, such as ImageOptim or ShortPixel. * Use WebP and AVIF formats for images. * Use lazy loading for images. ### 5. Monitor Performance * Use performance monitoring tools, such as WebPageTest or Lighthouse. * Set up performance budgets and alerts. * Regularly review and analyze performance metrics. ## Common Pitfalls to Avoid --------------------------- ### 1. Unnecessary Computation * Avoid unnecessary computations in `getStaticProps` and `getServerSideProps`. * Use caching mechanisms to reduce redundant work. ### 2. Excessive HTTP Requests * Minimize HTTP requests by using caching and bundling. * Use code splitting and lazy loading to reduce initial payload size. ### 3. Large Payloads * Optimize images and other assets to reduce payload size. * Use compression algorithms, such as Gzip or Brotli, to reduce payload size. ### 4. Poorly Optimized Database Queries * Optimize database queries to reduce query time and overhead. * Use indexing and caching to improve query performance. ### 5. Inadequate Error Handling * Implement robust error handling mechanisms. * Use try-catch blocks and error boundaries to handle errors. * Monitor and log errors to identify areas for improvement.
Comprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.
Cursor
coding
AI coding rules customize how Cursor generates and refactors code for your project. Follow these steps to install Astro Performance Guidelines.
.cursor/rules, for Windsurf use .windsurfrulesComprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.