How can I improve my site's speed and picture loading times?

Technical Q&A
1

site speed.jpg
site speed.jpg1066×720 56.2 KB

Hello all,

Im seeking some help in making my store faster. I notice sometimes the pictures dont load fast enough. I see that for mobile, one area is improvement is LCP and FCP. Please let me know if you have any advice on how to improve this? I dont have much experience with coding, but any possible direction or guidance would be greatly appreciated and im sure ill be able to figure it out.

Thank you all for your time,

Best

Mike

www.christmastreesinthemail.com

2 Likes
2

Hi @mikeyl567

I am Ani From MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore ) I helped 1000+ Shopify Store owners to Optimize their website loading speed for both mobile and desktop and increase their conversion rate.

Here are some proven steps that will improve your website speed dramatically for both mobile and desktop.

  • Select a light Weight Shopify Theme ( OS 2.0 Compatible )
  • Remove all Unwanted Shopify App ( That you have installed, but not using)
  • Minify Javascript, CSS
  • Reduce the Large Image Size
  • Eliminating the halting problem in Javascript
  • Apply Lazy loading per section wherever required
  • Replace Gifs with the Static Images
  • Resize Products images using Shopify App ( for Bulk )
  • Check Page Speed by Google page Insight.

By fixing these issues, your website speed score can definitely improve
If you want a Free complete Website Optimization Audit Report ( All the Actionable steps for your store ), let me know.

If you have any concerns feel free to ask me!

Pro Tips :
Proven Shopify App to Improve and Sales Conversion Dramatically

Coupon Discount Popup in Cart :

-Show Selected Coupons on Cart

  • Show Saving on Cart Value
  • Boost Conversion Rate & AOV

MS_WEB_DESIGNER_0-1660281292580.png
MS_WEB_DESIGNER_0-1660281292580.png1084×613 214 KB

Elegant Sticky Add to Cart, Floating Cart, Sticky Checkout

MS_WEB_DESIGNER_1-1660281292605.jpeg
MS_WEB_DESIGNER_1-1660281292605.jpeg1600×900 122 KB

Recover abandoned carts and market better with web push

https://apps.shopify.com/pushowl?

Useful Resources for Speed Optimization :
10 Proven Steps that will Improve your Shopify Website Speed
https://blog.mswebdesigner.com/10-proven-steps-that-will-improve-your-shopify-website-speed/

How to Maintain Shopify Speed Post Optimization: A Quick Guidelinehttps://blog.mswebdesigner.com/how-to-maintain-shopify-speed-post-optimization-a-quick-guideline/

Best wishes!

Regards,
Ani

3

Hi @mikeyl567 ,

When it comes to site speed, please note that there are several factors impacting your online store speed, some of which you can control, others you cannot.

Factors you can’t control

  • Your customer’s device, network, and location

  • Shopify infrastructure

  • Content delivery network (CDN)

  • Local browser cache

  • Server-side page cache

  • The assets inside the content_for_header Liquid tag

Factors you can control

  • Unnecessary Apps

When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. 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.

  • Themes

Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.

  • Complex or inefficient Liquid code

You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.

  • Images and videos

High-resolution images usually require large files and therefore slow down page loading times.

  • Fonts

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.

I suggest you try AVADA SEO Suite which has great features that can help you with improving site speed such as Image Optimization, Speed Up, Lazy Loading, and Minification (removes unnecessary information from the source code**)**.

You can also refer to this Shopify post about Improving Speed.

I hope my answer can help you achieve your goals.

4

Hello @mikeyl567 ,

To fix the issue, and improve the speed, implement these below points.

  • All slideshow images on the home page have some ‘Serve images in next-gen format’ errors. you can solve this by optimizing the images.
  • You should remove some contents from the home page, a large page always takes more time to load.
  • Minify theme.js and theme.css

If you successfully implement these points, you will get a 90+ score for mobile devices. Refer to the below image.

Cedcommerce_0-1660312052265.png
Cedcommerce_0-1660312052265.png300×141 14.6 KB

Hope it helps, let us know if you need any further information.

Regards,

Team CedCommerce

1 Like
5

Hi @mikeyl567 ,

Don’t forget that before making any changes to the website’s structure, you should conduct a proper website speed diagnosis. Spend some time investigating what’s causing website load speed issues and focus on the high-impact factors first.

You will definitely need help from experts in this field.
Here https://whidegroup.com/blog/shopify-performance-optimization/ you will find out full information about how to improve the Shopify store speed.

6

Hello @mikeyl567 ,

Gina here from flareAI.

A slow-loading website can reduce your conversions and profits. A fast-loading website is essential to welcome massive traffic to the website. In the case of eCommerce stores, speed and page loading time play a pivotal role in the success and growth of businesses.

I hope that the below tips will help you decrease the load on your web pages and increase the Shopify website speed.

  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. Use a theme which is optimized for performance means a theme which 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.

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!

Wishing you the best with your store,

Gina
Add flareAI Shopify App today!

7

I’m facing the same issue i change my website images format to webp it very helpfull to optimize site speed you can check this https://louloukaformula.com

8

Beautiful website, thank you for the advice