how to speed up my shop ?

Highlighted
Tourist
9 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 : www.luxnd.com

0 Likes
Highlighted
Shopify Expert
884 72 208

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: https://speedboostr.com/shopify-optimization.

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 and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
Highlighted
Tourist
9 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 

0 Likes
Highlighted
Shopify Partner
79 9 50

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.
https://www.upwork.com/fl/orionholmes
Highlighted
Shopify Partner
218 4 16

Hello LUXND
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 Syedmustafanadeem99@gmail.com 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 Syedmustafanadeem99@gmail.com
0 Likes
Highlighted
Tourist
9 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 ?

0 Likes
Highlighted
Shopify Partner
79 9 50

For width="" and height="", read this article: https://web.dev/optimize-cls/

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes
0 Likes
Highlighted
Shopify Partner
38 1 11

Hi LUXND,

I tested your site with the Google Pagespeed Insights tool (GPI), this is the result https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fluxnd.com%2F&tab=mob.... 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 https://bt-vodoma-1.myshopify.com.

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 https://googlechrome.github.io/lighthouse/scorecalc/).

- 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
https://boostheme.com
0 Likes