FREE PROMPT PACK - Performance Optimizations | June 17th
Optimize images: "Audit my app for unoptimized images. Convert raw <img> tags to next/image (or an equivalent optimized component), enable WebP/AVIF, set correct width/height to stop layout shift, and lazy-load anything below the fold. List each image you changed and its before/after file size."
Add loading/optimistic states: "Add skeleton loading states to every screen that fetches data, and optimistic UI to my create/update actions so the change shows instantly before the server confirms. Show me one reusable Skeleton component and wire it into my main list and detail views."
Cache your data fetches: "Introduce React Query (TanStack Query) into my app to cache and dedupe data fetches. Wrap my existing fetch calls in useQuery with sensible staleTime and cache keys, and replace manual useEffect+useState fetching. Show the provider setup and convert my two busiest screens first."
Code-split the bundle: "{Analyze my bundle for the biggest JavaScript offenders. Code-split heavy routes and components with dynamic import / React.lazy, defer anything not needed for first paint, and flag any large dependency I can drop or replace with something lighter. List the bundle-size before/after."
Index the database: "Review my database queries for missing indexes. For every column I filter, sort, or join on, give me the exact CREATE INDEX statement (Postgres/Supabase), and add pagination (limit/offset or cursor) to any query that returns an unbounded list. Explain how to confirm the index is used with EXPLAIN."
2
0 comments
FREE PROMPT PACK - Performance Optimizations | June 17th