why page speed matters in shopify

Google uses Core Web Vitals as a ranking signal. Shopify themes that load third-party apps can easily hit 20+ render-blocking scripts. These techniques remove that overhead without removing functionality.

defer non-critical scripts

{{ 'reviews-widget.js' | asset_url | script_tag }}
{# Replace with: #}
<script src="{{ 'reviews-widget.js' | asset_url }}" defer></script>

The defer attribute tells the browser to download the script without blocking HTML parsing. For scripts that don't need to run before DOMContentLoaded, this is always safe.

preload critical fonts

<link rel="preload"
  href="{{ 'my-font.woff2' | asset_url }}"
  as="font"
  type="font/woff2"
  crossorigin="anonymous">

Place this in your <head> before any stylesheet. It tells the browser to fetch the font at highest priority, eliminating flash of unstyled text (FOUT).

lazy load images

<img src="{{ product.featured_image | image_url: width: 800 }}"
     loading="lazy"
     width="800" height="600"
     alt="{{ product.featured_image.alt }}">

Always include explicit width and height attributes. The browser uses them to reserve space before the image loads, preventing layout shift (CLS).

inline critical css

For above-the-fold styles, move them into a <style> tag in <head> and load the main stylesheet asynchronously. This removes render blocking from your CSS file for first paint.