Why did my website speed drop suddenly?

[lisahiggins]

Hi everyone,

My website has always been pretty fast, up in the 70s speed score until I started adding more content to my site. I added a photo gallery app and then more recently I added a variant app, but I don't seem to see a correlation between adding them and my page speed, I don't know what the problem is! My score dropped to 40 today after being at 48 for a week. 

Does anyone know how I can figure this out, or any insight on my store and improving the speed? I don't feel like I have anything that crazy on here..

Thank you for your time

www.westmichiganballoons.com

[ExpertRookie]

Hi @lisahiggins ,

I checked your site and see that JQuery is effecting to your pagespeed score. you should consider to remove JQuery on your store

[oscprofessional · Accepted solution]

@lisahiggins ,

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.

You need to reduce the unused JS. 

Eliminate Render Blocking Resources : 

The Opportunities section of your Lighthouse report lists all URLs blocking the first paint of your page. The goal is to reduce the impact of these render-blocking URLs by inlining critical resources, deferring non-critical resources, and removing anything unused.

-Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

• Deferring all non-critical JS/CSS
• Moving Third-party App stylesheet to the footer.
• Minify the third-party app CSS/JS file.

If there's code in a render-blocking URL that's not critical, you can keep it in the URL, and then mark the URL with async or defer attributes.

Once you've identified critical code, move that code from the render-blocking URL to an inline script tag in your HTML page. When the page loads, it will have what it needs to handle the page's core functionality.

You need to work on the following points :

• Theme Upgrade if there is a scope and upgraded theme available
• Reduce JS Payload.
• Use Critical CSS .
• Replace GIFs With Static Images
• Reduce Large Image Sizes
• Migrate Tracking Codes To Google Tag Manager
• Compress Images
• Limit Third Party JavaScript & Shopify Apps
• Preload Web Fonts. 
• I would suggest limiting to one and using a standard web font.

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

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 !

[lisahiggins]

Thank you very much

[lisahiggins]

I'm back into the 70s with just a few of your suggested changes. Thank you, THANK YOU!

[lisahiggins]

Thank you very much I'm looking into this now 

[Cedcommerce]

Hi @lisahiggins,

Based on your query, we checked your store for speed and performance. We find that your store needs considerable speed improvements and hence, you need to work on certain areas to fix the same. 

We have listed below the issues along with the solutions.

Note- You need to have the technical know-how of Shopify and liquid.code knowledge to fix this issue, else please connect with a Shopify expert agency like us who can help you fix this.

You can check your store speed using the below link: 

https://pagespeed.web.dev/report?url=http%3A%2F%2Fwww.westmichiganballoons.com%2F&use_original_url=t...

  The issues are: 

1. Remove unused JavaScript - they play a huge role in increasing the LCP score which is 9.1s for your store which is much higher than the expected LCP score of 2.5seconds. You need to lazy load the scripts coming from app widgets such as facebook, zify slider, etc.
2. Optimize the third-party scripts such as boomerang, Trekkie, zify slider app, google analytics and jquery to reduce the total blocking time(TBT).
3. Eliminate render-blocking resources - you have to work on reducing the blocking scripts and stylesheets as they increase the overall blocking time for the web page to load. Try to work with ‘async’ and ‘defer’ attributes for js scripts and preload the CSS files. 
4. Properly sized images - you have to work on image optimization for your store. The issue is with the logo as the logo image as intrinsic size is much higher than the rendered size.  
5. Reduce Javascript execution time - you need to work on the Js files optimization so that the overall time to execute JS gets reduced.
6. Avoid enormous network payloads - you need to work on image optimization and video along with the overall resources that the webpage loads. 
7. CLS - the Cumulative layout shift (CLS) score for your website is 0.104 for mobile which needs a lot of improvement. Once the CLS problem is fixed your speed score would get a significant rise. You can read more about removing CLS issues from https://web.dev/cls/. 

You can work on all the points listed above using the methods suggested. 

Also, you can look at the below points to ensure that your store maintains a good score:  

1. Image compression is important for the faster loading of web pages. Make sure your images are of good quality.
2. Avoid too many images on a single page. 
3. Prioritize fonts from the Shopify admin panel.
4. Replace GIFs with static images.
5. Remove third-party JS scripts and Shopify App which you are no longer in use.
6. Disable unused app features.
7. Clear app data while removing an unused app.
8. Avoid multiple-page redirects.
9. Use video formats for animated content.
10. Preload the LCP image.
11. Avoid large layout shifts.
12. Set width and height on image elements to reduce layout shifts and improve CLS.
13. Avoid large GIFs for animated content, consider using MPEG4/WebM videos for animations and PNG/WebP for static images.

Hope it helps, let us know if you need further help with speed optimization. 

All the best, 

CedCommerce.

[lisahiggins]

This is so much good info, I'm going to work on it today, I'll report back how it goes. Thank you so much for taking the time to reply.

[flareAI]

Hello @lisahiggins,

It's flareAI - your Fully Automated Free Sales Machine here. We are helping Shopify merchants provide solutions for the last few years in Shopify Community.

If helpful, please consider Like and Accept solution.

By following below steps, you can significantly speed up your Shopify store:

1. There are some blocked/404 files that are visible on the Network tab that is taking much time to load. Find and fix those files.

2. Reduce the HTTP requests. For example: Combine & inline your CSS scripts
3. Minimize broken links and redirects - Avoid unnecessary Redirects and fix broken links
4. Using slideshow, which are high-quality images combined with transitions, takes time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.
5. Always choose 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 slowly, consider disabling the theme features you don't need.
6. 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.
7. To reduce the initial load time, you can use Lazyload technique
8. Remove all unwanted Shopify Apps which you are not 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 the code that was added as part of the app install process.
9. Replace GIFs with static images
10. Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.
11. Themes contain CSS, JS, and HTML which can increase and affect your store speed. So disable theme features you don't use.
12. 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.
13. Use minified CSS and JS files
14. Avoid unnecessary redirects and fix broken links
15. Image compression is important and a necessity for faster loading of 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 tools like https://tinyjpg.com/

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 with, Single click start!

If you found the answer helpful consider supporting the Shopify Community by giving it a Like + Accept the solution.

Gina
flareAI