How to improve the Page Speed of my shopify Store?

[johnragan]

Hi,

My Shopify store page speed is really low and it's an important ranking factor. I want to improve my website's load speed just like Reverb. Would you please suggest any developed or a plugin for this?

Thanks

[oscprofessional]

@johnragan ,

Can you please share the URL.. so that I can suggest you  with best approaches...

[AvadaCommerce]

Hi @johnragan,

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.

[Cedcommerce]

Hello @johnragan,

Site speed is the most important aspect of any online store, and regular maintenance and speed optimization tasks need to be followed to keep your store speed optimal. 

Here are some tips that you should consider for improving the page speed of your web page.

Page speed can be measured on the following pages 

Pagespeed.web.dev (https://pagespeed.web.dev/)

Gtmetrix (https://gtmetrix.com/)

1. Reduce the impact of third-party code: There are a few third-party codes that reduce page speed while loading the page, like Facebook, Instagram, etc. we can make the theme execute after some time when the whole page gets displayed.

1. Avoid an excessive DOM (Document Object Model): Reducing the DOM size can help Increase the speed of your website.

1. First Contentful Paint: The First Contentful Paint (FCP) metric measures the time difference between a page load start time to the page's first content appearance. According to the lighthouse, FCP must Be Below 1.2.

1. Reduce Image sizes: High resolution and large size images will delay your page load time. Try to reduce image size and use lower resolution yet quality images so that it loads faster and does not affect your webpage quality simultaneously. 

1. Serve static assets with an efficient cache policy: Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user's browser.

1. Largest Contentful Paint element: Largest Contentful Paint (LCP) is a Core Web Vitals metric that ensures how fast the main content of a web page loads. A good website must have an LCP of 2.5 seconds or less for at least 75% of page visits.

1. Avoid large layout shifts: Large layout shifts can affect your page speed. It can be reduced by using a media query and fixing the image by assigning the width and height of images, thus helping to better page load speed.

1. Ensure text remains visible while Webfont loads:  Fonts are often large in size, which take time to load, and browsers hide text until the font loads, causing a blank appearance. To avoid this, you can allow only those fonts to load first that are relevant to that page text.

We hope these points can help increase the page speed of your Shopify store. For more help on page speed and optimization, connect with us.

All the best, 

Team CedCommerce

[MS_WEB_DESIGNER]

Hi @johnragan 

Welcome to the Shopify Community!

I am Anni 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.
• Disable inner page apps only on the home page and also disable heavy loading apps on the home page
• Check & fix broken link
• Check HTTP request & fix it if possible

By fixing these issues, your website's speed score will undoubtedly increase.
Let me know if you want a free thorough website optimization audit report (with all actionable measures for your shop)

If you have any concerns feel free to ask me!

Good Luck!

Regards,
Anni