How to find JavaScript long tasks in a Shopify theme

Use browser performance tools to find main-thread tasks that delay interaction. Trace each long task to theme or app code, change one source at a time, and retest the same interaction.

Read the metric gap

TTFB measures how long the browser waits for HTML. LCP, INP, and CLS then show loading, responsiveness, and stability. Use their relationship to narrow the cause before changing code.

Keep essentials in HTML

Product information, navigation, primary media, and purchase controls should arrive in server-rendered Liquid and HTML. Load enhancements after the useful page exists.

Test one change

Use a theme copy, keep the device and template constant, and change one suspected bottleneck. Publish only after the repeated result improves without breaking the customer journey.

Source

Shopify theme performance best practices, accessed September 20, 2026.

Frequently asked questions

Which pages should be tested?

Test home, product, collection, and cart templates separately because each has different resources and bottlenecks.

What data should guide the change?

Use TTFB, LCP, INP, and CLS together. The gap between metrics helps identify whether server rendering or browser work is responsible.

How should a fix be verified?

Change one cause on a theme copy, repeat the same test, then confirm the live template after publishing.