how to speed up my shop ?

12 0 0

hello, im facing a slow website i need help on how to optimize my shop 

i`ll optimize all images in the site but otherwise i dont know what i can do 

i can optimize the javascript by merging together and make it load from only one file.

any other suggestions 

this is my website :

Shopify Expert
1302 118 338

Here's the procedure my team uses to optimize Shopify sites:

1) Run your site through the Shopify Analyzer to see what can and should be optimized

2) Duplicate your live theme then start optimizing according to the recommendations. If you need help, here's a guide:

3) Publish the new theme, test, and further optimize if applicable.

You mentioned merging JS together, I recommend not doing that. You won't get any tangible benefits + that strategy doesn't work well with template based sites where you're combining JS from different sources (could cause issues now or in the future, prevents you from conditional loading scripts, and requires maintenance if you uninstall an app that included JS in your combined script).

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
12 0 0

Hey @JoesIdeas .

thank you for the recommendation I already did optimize the maximum according to shopboostr

did lazyload pictures and compressed what I can the other pictures is from our instagram which cannot compress.

any other recommendation ? 

I do code so don`t worry just give me headquarters on what to do.

thank you 

Shopify Partner
132 14 78

So to improve the page based off PageSpeed Insights recommendations:

1. Make all resources render blocking and insert critical css

2. add Responsive sizing for the hero image, currently its loading 2000px for mobile, which is waay too much.

3. Change your instagram plugin to one that has lazyloading applied, I recommend the Instafeed plugin.

4. 7.png needs to have lazyloading applied

5. Preload the hero image, since it is a background image.

6. add width="" and height="" attributes to avoid layout shift

There's more, but that should be enough to start with.

Available for freelance. I specialize in speed improvement and theme development.
Shopify Partner
295 6 22

Welcome to the Shopify Community!

This is Syed Mustafa a professional Shopify Developer. As I'm sure you well know, page speed has become a factor for ranking in the search engines. That's why if you're investing lots of time and money into getting the rankings you deserve, you shouldn't be blowing it by having a slow website.

Longer load times have also been shown to negatively affect conversions.

“My Aim” is to optimize the website speed and get the best possible results. It’s helpful to the visitor who visits on your website and spends much time without annoyed. I've gone through your website speed details and the reason behind why the website is slow is that there are lots of unused code of Javascript and CSS plus lots of unoptimized images as well that's why your website loading speed is slow and slow speed means that you are losing your potential customers and profit so it's a work that can be done by custom coding and I am professionally able to do this for you.

Drop your reply at and let's start this project as soon as possible.

Awaiting Response,

webspeed issue.png

If helpful then please Like and Accept Solution.
Do you need custom changes on the store or want a complete speed optimization? Hire me.
Need a dropshipping expert or wants to alive your dead dropshipping store?
Feel free to contact me at
12 0 0

@oreoorbitz Thank you for the recommendation i did according to your advice i just need an extra advice

-block rendering (done) 

-responsive hero (done

-changed instagram plugin (done)

-lazyloaded 7.png and optimized it (done)

-add width and height for what ? ( didnt understand) 

now the main part into removing unused css and javascript lets start by removing the unused css 
which way do you prefer ?
split my css to sections ? and make it loading accordingly to what page its on ? i can purifiy the css using some 3rd party website and make few splits of the css if you think it works ?

Shopify Partner
132 14 78

For width="" and height="", read this article:

Available for freelance. I specialize in speed improvement and theme development.
Shopify Partner
41 1 13


I tested your site with the Google Pagespeed Insights tool (GPI), this is the result There are some critical issues in GPI's report you need to fix.

Eliminate render-blocking resources: only load external CSS and JS files at the bottom of the site (except lazysizes.min.js because this file is loaded in async). However, if you move all external CSS to the bottom, your site will look weird when it is loaded and the CSS files are still not loaded yet. To fix these problems, you need to put the critical CSS inline in the head tag. The critical inline CSS is the CSS code for the site's layout, it will help the site look good even the external CSS files are still not loaded. You can refer to one of my demo stores

Remove unused CSS: recommend splitting CSS for each section in separate CSS files. And only load CSS of the current using sections. Don't put all CSS in a file. Do the same work for JS files.

Avoid an excessive DOM size: there are so many HTML DOM elements. You can consider deferring loading the sections that are not visible in the user's viewport. When users scroll down to a section, only the corresponding section's content will be loaded. That will help to improve the Largest Contentful Paint score (25% of the total score, refer to

- Put a preload of your font declaration in the head tad so that browsers create a connection first. That does not affect rendering HTML DOM and make the font is loaded faster. Example:


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


 I hope this helps.

David Kean
CoFounder at Boostheme team