smithery/tech-leads-club
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed.
npx skills add smithery/tech-leads-club --skill perf-web-optimization
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
PostgreSQL-specific development assistant focusing on unique PostgreSQL features, advanced data…
15.3K installsUniversal SQL performance optimization assistant for comprehensive query tuning, indexing strat…
14.5K installsComprehensive Power BI DAX formula optimization prompt for improving performance, readability, …
9.1K installsAnalyze and improve business processes. Trigger with "this process is slow", "how can we improv…
2.8K installsLP, MILP, QP — concepts, problem-text parsing, and formulation patterns (parameters, constraint…
2K installsOther skills from smithery/tech-leads-club · top by installs.
npx skills add smithery/tech-leads-club
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Files included with this skill beyond the listing page.
SKILL.md
4,169 B
SUMMARY.md
355 B
Systematic approach: Measure → Identify → Prioritize → Implement → Verify.
| Metric | Good | Needs Work | Poor |
|---|---|---|---|
| LCP | < 2.5s | 2.5-4s | > 4s |
| INP | < 200ms | 200-500ms | > 500ms |
| CLS | < 0.1 | 0.1-0.25 | > 0.25 |
| TTFB | < 800ms | 800ms-1.8s | > 1.8s |
<!-- Hero/LCP image: eager + high priority -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" />
<!-- Below fold: lazy load -->
<img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />Always set width and height to prevent CLS.
<!-- Preconnect to font origin -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Non-blocking font load -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
media="print"
onload="this.media='all'"
/><!-- Defer to user interaction -->
<script>
function loadThirdParty() {
// Load analytics, chat widgets, etc.
}
;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))
setTimeout(loadThirdParty, 5000)
</script>Inline critical CSS in <head>, defer the rest:
<style>
/* critical styles */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" /># Webpack
npx webpack-bundle-analyzer dist/stats.json
# Vite
npx vite-bundle-visualizer
# Check package size before installing
npx bundlephobia <package-name>Common heavy packages to replace:
moment (67KB) → date-fns (12KB) or dayjs (2KB)lodash (72KB) → cherry-pick imports or native methods// React lazy
const Chart = lazy(() => import('./Chart'))
// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })
// Vite/Rollup manual chunks
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom']
}
}
}
}# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable
# HTML (revalidate)
Cache-Control: no-cache
# API responses
Cache-Control: private, max-age=0, must-revalidateFor running audits, reading reports, and setting budgets, use the perf-lighthouse skill.
srcsetwidth/height attributesloading="lazy" below foldfetchpriority="high" on LCP imagefont-display: swapFor in-depth optimization patterns, see: