At a glance
Per-template Mobile vs Desktop score comparison, surfaces the device gap broken out by page type (homepage, PDP, collection, cart, checkout, etc.). Different templates carry different mobile-vs-desktop gap patterns; this card lets the merchant identify which templates need targeted mobile work. Pairs with psi_mobile_vs_desktop_score which gives the site-weighted aggregate; this card decomposes by template.
| What it counts | Per-template Lighthouse Performance Score for both mobile and desktop profiles, with the gap. Each template represented by its representative URL (e.g. homepage → /, PDP → top-traffic product page, collection → top-traffic category). |
| Sample type | Lab data from per-template Lighthouse audits, two runs each (one per device profile). |
| Why per-template matters | Site-weighted aggregate hides which templates are dragging the average. A homepage with 22 percent traffic and a 35-point device gap drives more of the aggregate than 50 tail product pages with a 20-point gap. The per-template view surfaces optimisation priorities. |
| Reading the per-template view | (1) Identify worst-gap templates: typically homepage, collection, top PDPs. (2) Cross-reference with traffic share: high-gap × high-traffic = priority focus. (3) Apply template-level fixes: image responsive variants on hero templates; widget refactors on collection templates; etc. |
| Currency | n/a, score values + delta. |
| Time window | T/7D |
| Alert trigger | worst-template gap > 40 points. |
| Sentiment key | null (comparison view). |
| Roles | owner, marketing, operations |
Calculation
Calculated automatically from your Website Performance (PageSpeed + CrUX) data. See the At a glance summary above for what the metric tracks and the worked example below for a typical reading.Worked example
A UK-based BigCommerce fashion store, per-template comparison Wednesday 15 May 26.| Page template | Mobile score | Desktop score | Gap | Traffic share | Gap × traffic |
|---|---|---|---|---|---|
| Homepage | 42 | 76 | 34 | 22% | 7.5 |
| Product detail page | 58 | 82 | 24 | 25% | 6.0 |
| Collection page | 48 | 79 | 31 | 28% | 8.7 |
| Cart | 62 | 88 | 26 | 8% | 2.1 |
| Checkout step 1 | 71 | 92 | 21 | 4% | 0.8 |
| Checkout step 2 | 73 | 92 | 19 | 4% | 0.8 |
| About / contact | 68 | 90 | 22 | 1% | 0.2 |
| Search results | 54 | 80 | 26 | 8% | 2.1 |
- Collection page has the highest gap × traffic score (8.7). Despite homepage having the largest gap, collection has higher traffic share, making it the highest-leverage optimisation target. Fix collection page first.
-
The optimisation priority by gap × traffic:
- Collection page (8.7): filter widget refactor + responsive images on grid items
- Homepage (7.5): hero image responsive variants
- PDP (6.0): hero image responsive variants
- Cart, search results (2.1 each): low priority
- Checkout, about (sub-1.0): no work needed
-
Same fix-pattern across templates for image-heavy pages: responsive image variants via
srcset, image format conversion, preload critical images. One workflow addresses homepage + PDP + collection-page-grid simultaneously. -
Collection page additional work: filter widget refactor (covered in
psi_mobile_desktop_inpplaybook). The mobile-specific INP issue compounds with the LCP issue on collection. -
Realistic post-optimisation forecast for the worst-3 templates:
- Collection: mobile 48 → 70 (gap from 31 → 9)
- Homepage: mobile 42 → 65 (gap from 34 → 11)
- PDP: mobile 58 → 75 (gap from 24 → 7)
- Site-weighted mobile score: 51 → 68
-
Reading the trio with
psi_mobile_desktop_lcp,psi_mobile_desktop_inp,psi_mobile_desktop_clsdecomposes which sub-metric drives each template’s gap. Collection’s gap is INP-dominated; homepage’s is LCP-dominated. Different fix focus per template.
- Sort templates by gap × traffic.
- Decompose dominant template gaps by sub-metric using the per-CWV device-gap cards.
- Apply template-level fixes: each template’s fix benefits all URLs sharing the template.
- Re-audit to confirm gap reduction.
| Time horizon | Action |
|---|---|
| First 1 hour | Sort by gap × traffic; identify priority templates. |
| First week | Apply highest-leverage template fix. |
| Day 28 | Field metrics reflect changes. |
Sibling cards merchants should reference together
| Card | Why merchants reach for it |
|---|---|
psi_mobile_vs_desktop_score | Site-weighted aggregate; this card decomposes by template. |
psi_mobile_desktop_lcp | LCP gap; cross-reference for sub-metric driver. |
psi_mobile_desktop_inp | INP gap. |
psi_mobile_desktop_cls | CLS gap. |
psi_score_by_template | Score per template (mobile-only). |
psi_lcp_by_template | Per-template LCP. |
psi_image_optimisation | Common template-level fix. |
Reconciling against the vendor’s own dashboard
Where to look:- PageSpeed Insights, paste each template’s representative URL; toggle Mobile/Desktop tabs.
- Lighthouse CI, runs per-URL audits in build pipeline.
| Reason | Direction | What to do |
|---|---|---|
| Template-representative URL choice. Vortex IQ uses configured representative URLs; manual checks may use different URLs. | Variable | Confirm same URL used. |
| Run-to-run variance. Each device profile fluctuates ±10-20%. | Either direction | Use 7-day rolling. |
Known limitations / merchant FAQs
Should I optimise the template with the largest gap or the largest gap × traffic? Largest gap × traffic. The product determines commercial impact: a 35-point gap on a low-traffic page affects fewer users than a 24-point gap on a high-traffic page. Why does collection page have a larger gap than homepage? Filter widget JS. Collection pages run mobile-specific filter logic that desktop doesn’t trigger (desktop usually has always-visible filter sidebar). The mobile-only widget compounds the structural CPU gap. Will fixing one template improve other templates? Some patterns transfer. Image optimisation in the homepage hero often re-uses the same image-CDN config that benefits PDP and collection images. Filter widget refactor benefits all collection pages simultaneously. Template fixes have multiplier effects. Can Vortex IQ tell me which sub-metric drives each template’s gap? Yes; cross-reference withpsi_mobile_desktop_lcp, psi_mobile_desktop_inp, psi_mobile_desktop_cls. Each surfaces the per-template breakdown for its sub-metric.