Multipurpose theme documentation
Multipurpose Fashion Theme
Lighthouse Optimization
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Performance > Lighthouse Optimization
Overview
Lighthouse measures performance, accessibility, and SEO. Use it to find and fix issues that affect Core Web Vitals and user experience.
Running Lighthouse
- Open your store in Chrome (ideally incognito to reduce extensions).
- Open DevTools (F12) > Lighthouse tab.
- Select Performance, Accessibility, Best practices, SEO.
- Choose Desktop or Mobile.
- Click Analyze page load.
Common causes of low score
| Cause | Fix |
|---|---|
| Large images | Resize and compress images; use recommended sizes. |
| Too many apps | Disable or remove unused apps; apps add scripts. |
| Heavy scripts | Reduce third-party scripts; defer non-critical JS. |
| Unused CSS | Theme minimizes CSS; avoid large Custom CSS blocks. |
| Slow server response | Use Shopify’s CDN; check store plan and traffic. |
| Blocking resources | Theme uses async/defer where possible; check app scripts. |
Interpreting results
- Performance: Focus on LCP, FID, CLS. Images and scripts are common culprits.
- Accessibility: Fix contrast, alt text, and focus states.
- Best practices: Use HTTPS, avoid deprecated APIs.
- SEO: Meta tags, headings, and structured data.
Theme-specific tips
- Use theme’s built-in lazy loading and responsive images.
- Limit Custom CSS; keep it small and targeted.
- Avoid embedding many videos or heavy media above the fold.
- Test on mobile; mobile scores often differ from desktop.
Common mistakes
| Mistake | Fix |
|---|---|
| Testing with extensions on | Use incognito or a clean profile. |
| Ignoring mobile | Mobile Lighthouse score often matters more. |
| One-page testing | Test collection and product pages too. |
| Blaming theme only | Apps and content (images, videos) affect scores. |