render-blocking-font-import
@import url() for external font CDNs blocks rendering until the font CSS is fetched
Applies to: CSS, LESS, SASS, SCSS
Why this matters
Using @import url('https://fonts.googleapis.com/...') in CSS creates a render-blocking waterfall: the browser must download your CSS, discover the @import, fetch the Google Fonts CSS, then download the font files — all before first paint. Self-hosting fonts via next/font/google eliminates this chain by inlining font declarations and serving font files from your own domain.
Catch it before it ships
pip install stablestack # or: npx stablestackstablestack # scans your project, PERF005 includedstablestack explain PERF005PERF005 is part of the Pro rule set. See pricing — the free tier ships 24 checks with no signup.
False positive in your codebase? Suppress a single line with # noqa: PERF005
More Performance checks
n-plus-one-query
Database or API calls inside loops can cause N+1 performance issues
PERF002uninstrumented-llm-call
LLM API call without timing instrumentation hides latency bottlenecks
PERF003redundant-trpc-calls
3+ tRPC calls to the same router suggest data should be fetched once.
PERF004subscription-waterfall
2+ child queries gated by the same parent query create a sequential waterfall.
PERF006uncached-public-page
Next.js page does database queries but does not export revalidate, dynamic, or generateStaticParams — every request triggers a fresh SSR.
PERF007no-cdn-configured
App Runner service detected without a CloudFront distribution — static assets are not edge-cached and clients are limited to HTTP/1.1.