1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
Shopify Theme Speed Checks
A short checklist for a Shopify theme that is slow on the home page and product pages. Work in a duplicate theme, not the live one, and compare the same templates before and after.
1. Baseline
- Record LCP and INP for the home page, a collection, and a product, on a throttled mobile profile.
- Note which app scripts appear on those templates. Theme code is often smaller than the app payload.
- Check a product with several images and a variant option, not only a simple demo product.
2. Theme assets
- In theme.liquid, remove CSS and JS that the current templates do not use. Dawn-based themes often still load sections you deleted in the editor.
- One font family, subset, and font-display: swap. Avoid a second icon font.
- Do not add a second jQuery or slider library if the theme already ships one.
3. Images and LCP
- The first hero or product image should be eager, with width and height, and a realistic srcset.
- Later gallery images can be lazy. Do not lazy-load the LCP image.
- Keep hero files small. A full-bleed photo above 200–300 KB on mobile usually dominates LCP.
4. Apps
- App embeds in the theme editor inject on every page. Disable embeds that are not required outside checkout or a single template.
- Prefer an app block on the section that needs it over a sitewide script tag.
- After uninstalling an app, remove leftover snippets and script tags from the theme code. Uninstall does not always edit Liquid.
5. Liquid and sections
- Avoid nested for-loops over all products or all collections in a header or footer.
- Collection grids: paginate. Do not render the full catalog in one section.
- Product recommendations and recently viewed can be deferred so they are not on the critical path.
6. Third parties
- Load analytics and marketing tags after the main content, or through one tag manager, not five separate snippets in the head.
- Chat widgets and review popups are frequent INP problems. Gate them so they do not run during the first interaction.
7. Checkout
- Checkout.liquid is not the place for storefront experiments on modern checkouts. Keep extra pixels limited to what you can actually measure.
- Re-test cart drawer, variant change, and accelerated checkout buttons after any script change.
Working notes for these checks: https://devdiy.com
Ship the theme only after the home page and one product page are faster on the same test profile, and the cart still updates when a variant changes.
|
Pastebin