# Liquid or JavaScript for essential Shopify theme content?

Source: https://themestackguide.com/liquid-vs-javascript-shopify-theme/

Render essential product information, navigation, hero content, and purchase controls in Liquid and HTML. Client-side JavaScript can enhance them, but making it create the first usable view delays LCP and weakens resilience.

## 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](https://shopify.dev/docs/storefronts/themes/best-practices/performance), 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.