Hello,
I am using the vivid theme.
And the loading page speed very low.
Sometime the website loading time is too much.
So I wanna be reduce the loading time.
Please resolve the my problem & suggest best way.
Best regards,
Sohan
Topic summary
Slow loading on a Vivid theme store, especially on mobile, with audits showing high LCP (Largest Contentful Paint: time to render the main content) and TBT (Total Blocking Time: time the main thread is blocked by scripts). Screenshots indicate low scores and heavy third‑party app impact.
Key causes identified:
- Unused/legacy third‑party app code increasing request count and size.
- Large images and suboptimal lazy loading affecting LCP.
- Heavy JavaScript, long main‑thread tasks, and unused CSS/JS.
Recommended actions (from replies):
- Remove unused app code; limit third‑party JS and apps.
- Compress/resize images; defer off‑screen images; implement proper lazy loading (lazyload + data-src) and consider Critical CSS.
- Reduce JS payload; code split; minimize main‑thread work; clean unused CSS/JS; migrate trackers to Google Tag Manager.
- Optimize fonts (system fonts or preload; use font-display: swap). Consider a theme upgrade.
Latest update: After applying suggestions, some functionality broke; the requester asked for practical, step‑by‑step guidance. Another participant suggested video tutorials or hiring a speed optimization expert. No resolution yet; screenshots/audit images are central to understanding the issues.
Hello @Sohan2198 ,
As I can see your website is having very heavy load with Largest Content Paint and Total Blocking Time.
In order to Improve website speed we need to:
- Remove unnecessary code on a high priority basis.
- Compressed images or Defer off-screen images.
- Web Pages need to be reduce in size.
- Reduce JavaScript execution time
- Minimize main-thread work
- Beware of excessive liquid loops
- Decrease thumbnail image size
- Weigh the benefits of installing another app
By fixing these issues, your website speed score can definitely improve.
I trying best but ye not get any more change.
please explain the in details.
Because I am a new in this field.
Best,
Sohan
@Sohan2198
Sure,
Below are some factors that might impact the speed of your online store, and how you can address them.
Page speed score for mobile view:
3rd Party App Code:
- You should remove the unused app code. It will be beneficial to your store. and makes your theme code easier to read.
- 3rd party apps & codes which take time to load and their size. They decrease the speed.
- Some code can be removed or reordered to improve your online store’s performance. If you’re not using an app, then you can remove it.
- If you’re removing an app, then consider removing the code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.
- Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.
LCP issues as image was lazily loaded :
- Change the image tags in your theme by adding the class “lazyload” to the image tags and changing the src attribute to the data-src attribute.
We’ve had the best success for our clients by working with our developers to implement the lazy sizes because it’s quite complicated for non-technical people.
You need to work on the following points:
- Pass core web vitals (important)
- Reduce JS Payload.
- Use Critical CSS.
- Reduce Large Image Sizes
- Migrate Tracking Codes To Google Tag Manager
- Compress Images
- Limit Third-Party JavaScript & Shopify Apps
- Preload Web Fonts.
- Use a standard web font.
Theme Upgrade:
Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization.
How to Optimize Total Blocking Time:
After determining the Long Tasks and the code blocks and web page assets that are causing them, optimizing Total Blocking Time can be possible. To optimize the Code Blocks that busy the main thread longer than 50 MS, the methods below can be used.
- Reduce the Request Count of the Third-Party Scripts
- Reduce the Size of the Third-Party Scripts
- Minimize the Browser’s Main Thread Work
- Clean the Unused Javascript and CSS Codes
- Compress the Javascript and CSS Files
- Implement the Code Splitting for Javascript Assets
You can choose from several fonts for the text in your online store. To avoid downloading a new font to your customer’s computer, you can use a system font.
How to avoid showing invisible text:
The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers.
Remove unused CSS and unused JS:
-
Check the assets folder of the theme and remove unused CSS and JS file
-
Check and remove unused apps
-
If your store has not installed any app you can comment {{ content_for_header }} code in the theme. liquid (not recommended if you don’t have knowledge about the liquid)
-
Note: we will add same in all speed optimization post; -
You can improve your website speed score by fixing these issues.
If there is anything that needs to be clarified or included, please let us know. We will surely help you.
Have a nice day!
Hello @oscprofessional ,
I do as you mentioned. But due to this some of my functionality is auto removed.
Please can you give me a good practical for this.
Best,
Sohan
Have you tried it by any app?
No, I don’t use any app for the optimization.
Why dont you try some video tutorial if still you didnt coz thats easy to understand and helps lot. Also there are many step by step guides available to optimize speed. And still you wont get a desire score, you can hire a speed optimization expert.