Menu
Optimize frontend and backend performance through profiling, caching strategies, database optimization, code splitting, and Core Web Vitals improvements. Build fast user experiences.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create a content calendar for the month
Master storytelling frameworks, video scripts (15s/30s/60s), social media captions, segment-specific messaging, and persuasive CTAs. Turn product features into emotional stories that convert across different audience segments.
Create a compelling job description
Marketing multi-agent orchestration system for complex, parallelizable campaigns. Coordinates specialized AI agents for: (1) Research + synthesis + content creation pipelines, (2) Platform-specific content generation at scale (Reddit, LinkedIn, Twitter, Email), (3) Lead generation and outbound campaigns, (4) Human-in-the-loop review before any external execution, (5) Automated posting with natural timing patterns. Triggers: "build me a marketing team", "orchestrate agents", "outbound campaign", "multi-platform content", "lead generation system", "social media blitz", or any request implying coordinated marketing specialist work.
Define and align organization around a single North Star Metric (NSM) that captures product value, drives growth, and focuses team efforts. Framework for choosing NSM by product type (social, marketplace, SaaS, content) with input metrics breakdown.
Set up, optimize, and scale paid social campaigns on Meta (Facebook/Instagram), Google Ads, and TikTok. Master test budgets, creative testing, audience targeting, funnel metrics, and budget scaling strategies for maximum ROAS.
| name | performance-optimization |
| description | Optimize frontend and backend performance through profiling, caching strategies, database optimization, code splitting, and Core Web Vitals improvements. Build fast user experiences. |
Complete framework for identifying and fixing performance bottlenecks in web applications.
Measure First:
User Perception > Actual Speed:
80/20 Rule:
Core Web Vitals:
## Performance Baseline
**LCP (Largest Contentful Paint)**
- Goal: <2.5 seconds
- Current: [X]s
- What: Time until largest content element renders
**FID (First Input Delay)**
- Goal: <100 milliseconds
- Current: [X]ms
- What: Time from first interaction to response
**CLS (Cumulative Layout Shift)**
- Goal: <0.1
- Current: [X]
- What: Unexpected layout movements
**Time to Interactive**
- Goal: <3 seconds
- Current: [X]s
**Total Page Weight**
- Goal: <1MB
- Current: [X]MB
Tools:
Image Optimization:
<!-- โ SLOW: Large unoptimized image -->
<img src="hero-5mb.jpg" alt="Hero" />
<!-- โ
FAST: Responsive images with modern formats -->
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img
srcset="hero-300.jpg 300w,
hero-600.jpg 600w,
hero-1200.jpg 1200w"
sizes="(max-width: 600px) 300px,
(max-width: 1200px) 600px,
1200px"
src="hero-600.jpg"
alt="Hero"
loading="lazy"
/>
</picture>
Code Splitting:
// โ SLOW: Load everything upfront
import { HeavyComponent } from './HeavyComponent';
import { RarelyUsedFeature } from './RarelyUsedFeature';
// โ
FAST: Lazy load on demand
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const RarelyUsedFeature = lazy(() => import('./RarelyUsedFeature'));
// Route-based code splitting
const routes = {
'/': () => import('./pages/Home'),
'/dashboard': () => import('./pages/Dashboard'),
'/settings': () => import('./pages/Settings'),
};
JavaScript Optimization:
// โ SLOW: Blocking render
<script src="large-bundle.js"></script>
// โ
FAST: Defer non-critical JS
<script src="critical.js"></script>
<script src="non-critical.js" defer></script>
// Debounce expensive operations
function debounce(fn, delay) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(...args), delay);
};
}
const handleSearch = debounce(async (query) => {
const results = await searchAPI(query);
displayResults(results);
}, 300);
// Use web workers for heavy computation
const worker = new Worker('heavy-task.js');
worker.postMessage(largeDataset);
worker.onmessage = (e) => handleResults(e.data);
CSS Optimization:
/* โ SLOW: Expensive selectors */
.container div span a { }
/* โ
FAST: Specific selectors */
.nav-link { }
/* Critical CSS - inline in <head> */
.header, .hero { /* styles */ }
/* Non-critical CSS - load async */
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
Resource Hints:
<!-- Preload critical resources -->
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/hero.jpg" as="image" />
<!-- Prefetch next page resources -->
<link rel="prefetch" href="/next-page.js" />
<!-- DNS prefetch for external domains -->
<link rel="dns-prefetch" href="//api.example.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
Database Query Optimization:
-- โ SLOW: No index, SELECT *
SELECT * FROM orders WHERE user_id = 123;
-- โ
FAST: Add index
CREATE INDEX idx_orders_user_id ON orders(user_id);
-- โ
FAST: Select only needed columns
SELECT id, total, created_at
FROM orders
WHERE user_id = 123;
-- Use EXPLAIN ANALYZE
EXPLAIN ANALYZE
SELECT * FROM orders WHERE user_id = 123;
-- Avoid N+1 queries
-- โ SLOW
const users = await User.findAll();
for (const user of users) {
user.posts = await Post.findAll({ userId: user.id }); // N queries!
}
-- โ
FAST: Use joins or eager loading
const users = await User.findAll({
include: [Post] // 1 query with JOIN
});
Caching Strategy:
// Cache-aside pattern
async function getUser(id) {
// 1. Check cache
const cached = await redis.get(`user:${id}`);
if (cached) {
return JSON.parse(cached);
}
// 2. Cache miss: fetch from DB
const user = await db.users.findById(id);
// 3. Store in cache
await redis.setex(
`user:${id}`,
JSON.stringify(user),
3600 // TTL: 1 hour
);
return user;
}
// Cache invalidation
async function updateUser(id, data) {
await db.users.update(id, data);
await redis.del(`user:${id}`); // Invalidate
}
API Optimization:
// Response compression
const compression = require('compression');
app.use(compression());
// Pagination (not loading all data)
app.get('/api/items', async (req, res) => {
const { cursor, limit = 20 } = req.query;
const items = await db.items.findMany({
where: cursor ? { id: { gt: cursor } } : {},
take: limit + 1, // Fetch one extra to check if more
});
const hasMore = items.length > limit;
if (hasMore) items.pop();
res.json({
items,
nextCursor: hasMore ? items[items.length - 1].id : null,
});
});
// Move heavy work to background
const emailQueue = new Queue('emails');
app.post('/api/orders', async (req, res) => {
const order = await createOrder(req.body);
// Queue email instead of sending inline
await emailQueue.add({ orderId: order.id });
res.json(order); // Fast response
});
Browser DevTools:
PERFORMANCE TAB:
1. Click Record
2. Perform slow action
3. Stop recording
4. Look for:
- Long tasks (>50ms)
- Main thread blocking
- Layout thrashing
- Memory leaks
NETWORK TAB:
- Check request waterfall
- Look for slow/large requests
- Verify caching headers
- Check compression
Node.js Profiling:
# Built-in profiler
node --prof app.js
# Analyze profile
node --prof-process isolate-*.log > profile.txt
# Clinic.js for visualization
npx clinic doctor -- node app.js
npx clinic flame -- node app.js
# Memory profiling
node --inspect app.js
# Then open chrome://inspect
## Performance Budget
### Page Load
| Metric | Budget | Current | Status |
|--------|--------|---------|--------|
| LCP | <2.5s | 3.1s | โ |
| FID | <100ms | 85ms | โ
|
| CLS | <0.1 | 0.05 | โ
|
| TTI | <3s | 4.2s | โ |
### Assets
| Asset | Budget | Current |
|-------|--------|---------|
| Total JS | <200KB | 350KB |
| Total CSS | <50KB | 45KB |
| Images/page | <500KB | 800KB |
| Total weight | <1MB | 1.5MB |
### API
| Endpoint | P50 | P95 | P99 |
|----------|-----|-----|-----|
| GET /items | <50ms | <100ms | <200ms |
| POST /order | <100ms | <200ms | <500ms |
### Actions
1. โ Reduce JS bundle (200KB over budget)
2. โ Optimize images (300KB over budget)
3. โ
CSS within budget
## Performance Review: [Feature]
### Frontend
- [ ] Images optimized and lazy loaded
- [ ] JavaScript code split
- [ ] Critical CSS inlined
- [ ] No layout shifts (CLS <0.1)
- [ ] Long tasks broken up (<50ms)
- [ ] Resource hints used
- [ ] Fonts optimized
### Backend
- [ ] Database queries optimized (EXPLAIN ANALYZE)
- [ ] Appropriate caching
- [ ] Heavy work moved to background
- [ ] Response compression enabled
- [ ] N+1 queries eliminated
- [ ] Connection pooling configured
### Monitoring
- [ ] Performance metrics tracked
- [ ] Alerts set for regressions
- [ ] Real user monitoring (RUM)
- [ ] Synthetic monitoring
Immediate Impact:
Enable Compression (5 min)
const compression = require('compression');
app.use(compression());
Add Image Lazy Loading (10 min)
<img src="image.jpg" loading="lazy" alt="..." />
Add Database Index (5 min)
CREATE INDEX idx_users_email ON users(email);
Cache Static Assets (10 min)
res.setHeader('Cache-Control', 'public, max-age=31536000');
Use CDN (varies)
| Problem | Impact | Fix |
|---|---|---|
| No database indexes | 100x slower queries | Add indexes on filtered columns |
| Loading all data | Memory + slow | Paginate results |
| Synchronous heavy work | Blocking | Move to background queue |
| No caching | Repeated expensive operations | Cache at multiple levels |
| Large images | Slow page load | Optimize, lazy load, responsive |
| Too much JavaScript | Slow TTI | Code split, lazy load |
| No compression | Large transfers | Enable gzip/brotli |
| N+1 queries | Database overload | Use joins or eager loading |
Measurement:
Profiling:
Monitoring:
/security-review - Security considerations for caching/database-schema - Optimizing schema design/devops-cicd - Performance testing in CI/CDLast Updated: 2026-01-22