Why is my product page loading so slowly?

[Joe82]

The product page speed for our website is very slow 5 - 7 seconds full loading time.  Any suggestions to fix this? We have a Q and A directly on the product pages.  Maybe that is causing the issue?  Specifically concerned about this category: https://www.teethnightguard.com/pages/custom-teeth-grinding-guards    and this product is a good example: https://www.teethnightguard.com/products/custom-teeth-grinding-mouth-guard

Thank you for any suggestions : )   

[oscprofessional]

Hello @Joe82 ,

Your store looks nice as I can see the page score is too low

You need to work on your website performance’s speed. Low mobile page speed may kill your traffic and affect your conversion.

In order to Improve website speed we need to:
- Remove unnecessary code on a high priority basis.
- Compressed images or Defer off-screen images.
- Web Pages need to be Minified.
- Reduce JavaScript execution time
- Minimize main-thread work
- Beware of excessive liquid loops
- Decrease thumbnail image size
- Weigh the benefits of installing another app

By fixing these issues, your website speed score can definitely improve. For more details please check 
https://www.oscprofessionals.com/shopify-performance-optimization/

If anything is missed out or unclear then don't hesitate to ask
Thank You!

I hope my feedback will help you!!! If you have any questions, don’t hesitate to ask!!

[Anonymous]

Hi @Joe82 

Aibek is here from Speedimize.io 

In general, everything is true, but not all of the above can be implemented. We will focus on the things that need to be done to improve performance and improve the evaluation of Pagespeed Insights.
The first thing that catches your eye is a youtube video on the product page. We urgently need to add lazyload to this video, after that the page will weigh less and become more productive.
Some JS files are connected above the fold non-asynchronously. Because of this, the rendering is blocked. You need to add the async or defer attributes to load them asynchronously.
Plus, Core Web Vitals suffers from all this, namely such metrics as Largest Contentful Paint( LCP), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS).
TBT is mainly affected by JS files. In most cases, these can be app files and analytics. If possible, it is necessary to carefully analyze the page and if there are js files that are not used, then do not load them. And if there are non-critical ones, then load them later so that nothing is blocked.

More factors can affect the LCP. Basically, of course, these are unoptimized images. Plus, it is considered good practice not to use lazyload on above-the-fold images. This only worsens the LCP, in your case, lazyload is used. By removing this, you can significantly improve the LCP.

The CLS is affected by the review widget http://joxi.ru/82QDkyRSwx98qm. You will need to set a fixed height for this widget.

We have prepared a very simple document on what you need to do to improve Pagespeed Insights https://speedimize.io/uploads/pagespeed_speeddimize.pdf 

[PageFly-Victor]

Hi @Joe82 

It's PageFly - Free Landing Page Builder. I would love to provide my recommendation for your store based on 5 years of providing solutions for about 100.000 active Shopify merchants. 

I've just checked the page https://www.teethnightguard.com/pages/custom-teeth-grinding-guards via Google PSI and this is the score.

If you can see, there are some important things to notice:

1. Optimize images before uploading to Shopify store. Serve properly sized images to save mobile data and improve load times. 

=> Convert your images to a next-gen format

The only downside of these next-gen formats is browser support is not universal for them. Check out these links below to see the current browser support for each format.

• WebP
• JPEG 2000
• JPEG XR

Image formats such as JPEG 2000, JPEG XR, and WebP generally compress better than PNG or JPEG, which means faster downloads and less data consumption

2. Minify files

The best place to get started to reduce page load is to minimize HTML, CSS and JavaScript files. These files determine your site’s appearance – like the clothing and shoes that you wear – so it’s vital to run them through some quality filters.

Let’s start with reducing the size of each file and the total number of files. This task includes removing unnecessary formatting, whitespace and code.

• To minify CSS files, you can use CSS Minifier.
• To minify JavaScript files, you can use JavaScript Minifier.
• If you site runs on WordPress, plugins like WP Rocket can make the job simple.

3 Eliminate render-blocking resources 

The most common render-blocking resources are JavaScript and CSS files that are located at the head of your web page. They load in the above-the-fold area (or the area that you normally see on a website before scrolling down to see the rest of the content) and they are a part of the critical rendering path used by a web browser.

4 Defer unused CSS 

To defer unused CSS, you can remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity.

Prioritize above-the-fold content (lazy loading)

Sometimes, you can improve user experience by having your above-the-fold (top of the page) load faster — even if the rest of the page takes a few seconds to load. This is called lazy loading and is particularly helpful for pages with lots of content below the fold. PageFly does provide this in-app function so you can give it a try.

And finally, Don’t forget Google Indexing

To ensure Google crawls your page and recognizes the changes you’ve made, request indexing using Google Search Console for your website. The sooner Google indexes your site, the better. Speeding up your website may help your Search Engine Result Pages (SERPs).

• To optimize the pagespeed on the mobile device, you can check our guide.

If you feel my answer is helpful, like it or give it a thumb up. Let me know if you have any questions. Cheers!

[Joe82]

Thank you very much.  I am looking into page fly right now.   The category page is not so bad, its the actual product pages that are extremely slow.  Can you analyze our actual product page here: https://www.teethnightguard.com/products/custom-teeth-grinding-mouth-guard     This is the problem page and similar to other product pages.  

[nuova-idea]

Hi ALL,

first of all Shopify stopped to use Lighthouse to calculate the speed score, this is why the sudden drop of speed score in Shopify in comparison with Lighthouse or Xmetric.

Now the why: some developers do ZERO work on performing your store, they only add a hacking code that detect speed checkers. When it detect speed checkers, it serve an empty page, with no content. That's why your Lighthouse or Xmetric speed score it is so high. Now that Shopify stop linking its speed report with such speed checkers, the scam it become clear to all.

The code contain such lines document.write / document.open and are inserted in the theme.liquid (use ctrl+g to locate them). If you find such lines, you been scammed. 

I suggest everyone who got this scam to reply to my post here and add the name or data of the developer to help others to do not fall in the same scam.

My scammer was hired on Fiverr: 

 It is taking 2 weeks of work and lot of money to fix this issue. Cause it also damage how the store works. 

Please everyone, spread the voice as much as possible because Shopify still did not made any official statement on this, and many store owners have no idea at all about this.

Let's make sure those scammers get banned and get no more money from store owners.