How can I boost my product page speed on mobile devices?

[GiardiniOscar]

Hi guys. I need to increase the speed of my product page, especially for moble devices. Here's the link: https://neomirror.store/products/car-sun-visor-mirror-with-led-light-fill-light-make-up-car-make-up-...

Any help would be highly appreciated. Thanks

[Blair]

Hi @GiardiniOscar,

Thank you for reaching out to the Community! I'm happy to provide some guidance with improving the speed of your shop, to get this resolved. To provide some context, there are typically 4 main factors that contribute to a reduction in site speed. These include: 

• Theme Customizations: When edits or customizations are completed on themes, file size can increase and impact the shops overall site speed. If your shop is heavily customized, this may be something to consider. 
• Too Many Apps: The number of apps on the shop will lead to longer loading times. If you have several apps running, it's recommended to go through them all to determine what's really needed. It may be found that some apps aren't being used and can be removed to help improve site speed. 
• Image Size: Shops with large image sizes and multiple videos and/or slideshows will take longer to load. It's recommended looking for apps such as Image Optimizer to help reduce this. We also have a great blog that covers 10 Must Know Image Optimization Tips. 
• The End-User/Customer Browser, Device, and Internet Connection: This is one aspect of the shop you will not have control over, but important to keep in mind when reviewing site speed. 

Additionally, I recommend checking out our Improving Site Speed documentation as it includes a few other great suggestions. If you're currently using a Free Shopify Theme however, this may be something our team can assist with improving and recommend Contacting Support for further guidance. 

Please let me know if you have any other concerns!

[AvadaCommerce]

Hi @GiardiniOscar,

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]

Hi, @GiardiniOscar,

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

Page speed can be measured on the following pages 

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

Gtmetrix (https://gtmetrix.com/)

1-) Ensure text remains visible during Webfont load:  Fonts are often larger that 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.

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

3-) Use passive listeners to improve scrolling performance: Passive listeners enable developers to opt-in to better scroll performance by eliminating the use of mouse wheel scroll or touch scroll when not needed with event listeners. 

4-) Minimize main-thread work: Removing third-party JavaScript, and reducing the complexity of your styles and layouts can help you optimize the page speed.

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

6-) 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 lighthouse, FCP must Be Below 1.2.

7-) Reduce JavaScript execution time: Javascript code must be optimized and compressed for better page speed.

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

9-) Avoid chaining critical requests: Chaining critical requests is a sequence of requests that depends on each other and are crucial for generating content on the web page. The “avoid chaining critical requests” warning means that the critical resources that load the web page are excessively large.

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

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

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

All the best! 

Team CedCommerce.

[kazi]

Hello @GiardiniOscar 

You can try to fix the following issues on your store and this will improve your store Speed scores, load time, Google page speed scores, Core web vitals. GTmetrix scores.

▶ Fix render blocking resources
▶ Image optimization
▶ JS/CSS files optimization
▶ Lazyload media JS/CSS files
▶ Optimize CSS/JS delivery
▶ Minimize HTTP requests
▶ Removed unused codes
▶ Fix bad requests ex: 404 links
▶ Optimize Font delivery
▶ Preload files
▶ Optimize APP codes

Here some resources you can follow

https://help.shopify.com/en/manual/online-store/store-speed/improving-speed

https://gofishdigital.com/blog/shopify-speed-optimizations/

https://www.semrush.com/blog/9-tips-for-boosting-the-speed-of-your-shopify-website/

If you need help feel free to contact me Thanks.