How can I increase the speed of my online store?

[JKSHOP943]

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

[JoesIdeas]

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).

[JKSHOP943]

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 

[oreoorbitz]

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.

[JKSHOP943]

@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 ?

[oreoorbitz]

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

[davidkean]

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.