Why is my Boundless theme site speed so slow?

[WitchCutie]

I'm using the Boundless theme (supposed to be a faster loading theme)  but my site speed is terrible!

I only have a few images on each product and they are not large. Product and collection pages are even worse than the home page.  Am I missing something?  Please take a look and see if you can help!

Witchcutie.com

https://witchcutie.com/collections/dresses

https://witchcutie.com/products/abracadabra-bodycon-dress

[oscprofessional]

@WitchCutie ,

Hope you are doing well. 

Welcome to the Shopify Community.

I have gone through your store. It really looks nice. You have choosen the best-known e-commerce solution Shopify platform currently on the market.

Optimizing your Shopify store is time-consuming. Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize the themes, file sizes can increase and affect your store speed.

I have checked your store in page speed insight tool.

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.

Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

You may notice the width and height above do not include units. These "pixel" dimensions would ensure a 640x360 area would be reserved. The image would stretch to fit this space, regardless of whether the true dimensions matched or not.

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

By fixing these issues, your website speed score can definitely improve.

If you’re looking to improve your Shopify store’s site performance or SEO.

For more details please check the link below. 

https://www.oscprofessionals.com/blog/shopify-speed-optimization-guide/

If anything is missed out or unclear then don't hesitate to ask.  We will surely help you. 

Have a nice day !

[WitchCutie]

Thank you so much for all the input.

Can you tell us how, or point us to somewhere that explains how to include width and height size attributes on my images?

How do I find unused code?

Thank you so much!!

[flareAI]

Hello @WitchCutie,

Below steps will help to significantly speed up your Shopify store:

1. You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
2. Image compression is important and a necessity for faster loading web pages. Make sure your images are of good quality and do not add too many images on a single page. You can try some tool like https://tinyjpg.com/.
3. Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.
4. Using a theme that is optimized for performance means a theme that is responsive, fast, and takes minimal time to load the page.
If you choose a theme with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. If your theme is loading slow, consider disabling the theme features you don't need.
5. Themes contain CSS, JS, HTML which can increase and affect your store speed. So disable theme features you don't use.
6. Loading extra data your customers aren't using can impact your store speed without adding value.
7. Using slideshow, which are high-quality images combined with transitions, take time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.
8. Use a System font which is a font that is already installed on most computers. For example, Segoe UI, Times New Roman. If you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.
9. Replace GIFs with static images
10. To reduce the initial load time, you can use Lazyload technique
11. Remove third-party JS scripts and Shopify App which you are no longer using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove code that was added as part of the app install process.
12. Minimize HTTP requests. For example: Combine & inline your CSS scripts
13. Avoid unnecessary redirects and fix broken links
14. Use minified CSS and JS files
15. Don't add too many images on a page
Adding too many images on a page can be frustrating. It can significantly slow the load time of your website. Also, it can overwhelm visitors, which will ultimately result in a poor user experience, a high bounce rate, and a high probability of lower rankings in relative search results.
16. You can use Google PageSpeed Insights to view more detailed metrics for pages in your store.

If your website takes longer than 3 seconds to load, 40% of your traffic will be lost. Apart from speeding up your store, for getting better conversions, make sure your store products are Found on Google. When your customers search on Google, your product can be found only if your page is indexed. Note that once a URL gets indexed, customers will start finding your store through organic searches, you will start getting order conversions for virtually zero cost. Making it sustainable business growth. flareAI helps to get your new products found on Google. flareAI works every day for you. Get sales from Google and 20+ world's largest free sales channels, Single click start!

Hope this was helpful,

Gina
Add flareAI Shopify App today!

[WitchCutie]

Ok, thanks for the great responses. I still don't know how to define my image size.  From the screen shot below you can see that they seem to be loading multiple sizes (?)  how do I choose just one size.  do I have to edit the  image-style.liquid code?  if so how/what code do I need to insert.  Thanks y'all!

[oscprofessional · Accepted solution]

@WitchCutie ,

I think this is a product Image , you have to add this code in product liquid page.

where the product page images coming.

It may be in product.liquid file.

Add this code.

[WitchCutie]

Thanks so much, this helped.  I ended up simply changing the "width=" size to just 540 instead of all the variables in the  product-template.liquid file.  It seems to have solved that issue.