How slow is too slow for a page template?

TTFB over 800ms is where Google flags slow server response. Real users abandon around 1500-2000ms. Target under 600ms at the 75th percentile.

What if only some pages on a template are slow?

It is the data, not the template. Products with hundreds of variants, posts with thousands of comments, deep filter combinations all stress the same template differently. Limit expensive queries per request.

Is caching always the answer?

Caching hides slow templates from users but does not fix them. Cache-miss requests still take the full time. Logged-in users typically bypass cache. Caching is a useful first step, not a real fix.

How do I profile production safely?

Sampling profilers: Blackfire (PHP), New Relic (full-stack), Sentry Performance, Vercel Analytics. They tag requests with minimal overhead. Avoid xdebug profile in production.

How to Fix Slow Page Templates

When the Site Crawler flags slow pages, the cause is usually a slow template — every product page is slow, or every category page, or every blog post. The shared template is doing something expensive on every render. Fix the template once and every page using it gets faster. This guide covers profiling, finding bottlenecks, and applying template-specific fixes for WordPress, Shopify and headless stacks.

1. Identify the slow template

Step 1

Group findings by template

Export the Site Crawler response-time report. Sort by template type and TTFB. If all pages of one template show TTFB over 1s while other templates are under 500ms, the template is the problem.

2. Profile the bottleneck — WordPress

Step 1

Install Query Monitor

WP Admin → Plugins → Add New → Query Monitor. Activate. Load the slow page logged in as admin. The QM toolbar shows total time, query count, slowest queries, plugin overhead.

Step 2

Look for these patterns

Queries: 500+ per page indicates N+1 pattern. Fix by adding eager-loading via WP_Query meta_query batching.
Query time: any single query over 200ms is a fix-now item.
HTTP API calls: external API calls during page render are killers. Cache via transients.
Plugin overhead: any plugin taking over 100ms per request needs review — disable and benchmark.

3. Profile the bottleneck — Shopify

Step 1

Install Shopify Theme Inspector

Install the official Shopify Theme Inspector Chrome extension. Open a slow page, click the extension. Reports Liquid render time per section and per snippet.

Step 2

Find slow Liquid

Common Shopify killers:

Nested for loops over collections.all.products — looping through every product on the storefront. Replace with paginated queries.
Apps injecting JavaScript that fires before render. Audit installed apps; remove unused ones.
Custom metafield queries inside loops. Pre-resolve metafields outside loops or use Storefront API.

4. Profile the bottleneck — Next.js / headless

Step 1

Use Vercel Analytics or Next.js built-in instrumentation

Vercel Analytics shows per-route TTFB and Web Vitals at the 75th percentile. For self-hosted, add OpenTelemetry instrumentation in instrumentation.ts:

// instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./instrumentation.node');
  }
}

Then ship traces to Sentry / Honeycomb / Datadog.

Step 2

Decide rendering mode per route

Slow SSR routes are often candidates for SSG or ISR. Route only needs to dynamic-render if the data changes per request. Otherwise pre-render at build time or revalidate periodically:

// app/product/[slug]/page.tsx
export const revalidate = 3600; // re-render every hour

5. Apply common fixes

Cache the template output

WordPress: WP Rocket, W3 Total Cache, LiteSpeed Cache. Shopify: built-in edge caching for storefront pages, no plugin needed. Next.js: fetch with { next: { revalidate: N } }.

Simplify database queries

Pre-fetch related data in one query instead of N+1. WordPress: update_post_meta_cache. Shopify: use the Storefront API with field-selection. Headless: implement DataLoader pattern.

Defer non-critical scripts

<script src="https://example.com/widget.js" defer></script>

Or load asynchronously after interaction:

window.addEventListener('load', () => {
  const s = document.createElement('script');
  s.src = 'https://example.com/widget.js';
  document.body.appendChild(s);
});

Lazy-load below-the-fold content

<img src="..." loading="lazy" decoding="async">
<iframe src="..." loading="lazy"></iframe>

💡 Most slow-template fixes lift every page using that template. A 500ms improvement on a product template that serves 10,000 products is 10,000 page-loads-per-day faster.

6. Re-measure

Run the Site Crawler again. Slow-template count should drop. Track real-user TTFB in Search Console's Core Web Vitals report to confirm sustained improvement.

🕷 Re-run the Site Crawler

Verify TTFB has dropped after your template fixes.

Run Site Crawler →