Web Performance Guide | Google Antigravity Directory

.antigravity

# Web Performance Guide for Google Antigravity

Master web performance in Google Antigravity IDE.

## Image Optimization

```typescript
import Image from "next/image";

export function OptimizedImage({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={600}
      loading="lazy"
      placeholder="blur"
      sizes="(max-width: 768px) 100vw, 50vw"
    />
  );
}

export function HeroImage({ src, alt }: { src: string; alt: string }) {
  return <Image src={src} alt={alt} fill priority sizes="100vw" />;
}
```

## Code Splitting

```typescript
import dynamic from "next/dynamic";

const HeavyChart = dynamic(() => import("./HeavyChart"), {
  loading: () => <ChartSkeleton />,
  ssr: false
});

export function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}
```

## Resource Hints

```typescript
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="dns-prefetch" href="https://api.example.com" />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

## Best Practices

1. **Lazy load below fold** - Defer non-critical content
2. **Optimize images** - Use next/image

Google Antigravity IDE provides performance scaffolding.

When to Use This Prompt

This Performance prompt is ideal for developers working on:

Performance applications requiring modern best practices and optimal performance
Projects that need production-ready Performance code with proper error handling
Teams looking to standardize their performance development workflow
Developers wanting to learn industry-standard Performance patterns and techniques

By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their performance implementations.

How to Use

Copy the prompt - Click the copy button above to copy the entire prompt to your clipboard
Paste into your AI assistant - Use with Claude, ChatGPT, Cursor, or any AI coding tool
Customize as needed - Adjust the prompt based on your specific requirements
Review the output - Always review generated code for security and correctness

💡 Pro Tip: For best results, provide context about your project structure and any specific constraints or preferences you have.

Best Practices

✓ Always review generated code for security vulnerabilities before deploying
✓ Test the Performance code in a development environment first
✓ Customize the prompt output to match your project's coding standards
✓ Keep your AI assistant's context window in mind for complex requirements
✓ Version control your prompts alongside your code for reproducibility

Frequently Asked Questions

Can I use this Performance prompt commercially?

Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.

Which AI assistants work best with this prompt?

This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.

How do I customize this prompt for my specific needs?

You can modify the prompt by adding specific requirements, constraints, or preferences. For Performance projects, consider mentioning your framework version, coding style, and any specific libraries you're using.

Related Prompts

💬 Comments

Loading comments...

# Web Performance Guide for Google Antigravity Master web performance in Google Antigravity IDE. ## Image Optimization ```typescript import Image from "next/image"; export function OptimizedImage({ src, alt }: { src: string; alt: string }) { return ( <Image src={src} alt={alt} width={800} height={600} loading="lazy" placeholder="blur" sizes="(max-width: 768px) 100vw, 50vw" /> ); } export function HeroImage({ src, alt }: { src: string; alt: string }) { return <Image src={src} alt={alt} fill priority sizes="100vw" />; } ``` ## Code Splitting ```typescript import dynamic from "next/dynamic"; const HeavyChart = dynamic(() => import("./HeavyChart"), { loading: () => <ChartSkeleton />, ssr: false }); export function Dashboard() { return ( <Suspense fallback={<ChartSkeleton />}> <HeavyChart /> </Suspense> ); } ``` ## Resource Hints ```typescript export default function RootLayout({ children }) { return ( <html> <head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="dns-prefetch" href="https://api.example.com" /> </head> <body>{children}</body> </html> ); } ``` ## Best Practices 1. **Lazy load below fold** - Defer non-critical content 2. **Optimize images** - Use next/image Google Antigravity IDE provides performance scaffolding.