How to reduce JavaScript for better site speed without layout issues?

Adeel7
Tourist
6 0 1

How can I reduce JavaScript to optimize the speed because when I mess with the JavaScript the layout shifts and the site becomes a mess. 

Replies 8 (8)

speedboostr
Trailblazer
136 20 26

It's probably not a good idea to do this, but if you want to here's what you could do:

 

1) You probably have a single theme file, theme.js, that has all the JavaScript needed for the theme. Find a non-minified version of that (there may be one in your theme, but if not you could try reaching out to the theme developers).

2) Identify the JavaScript needed for each page template then split into multiple files so you can conditionally load the scripts where they're needed.

 

For example:

{% if template == "product" %}
<!-- Load a JS file with code that's only needed on the product page -->
{% endif %}

 

Then you would have 1 main JS file for common theme stuff (like header / footer, etc), and a few template files (theme-product.js, theme-collection.js, etc).

 

The gains will be minimal and it'll probably cost you either a lot of time or money, but it is technically doable.

 

3) One thing you can check is that your apps are employing conditionally loading too. For example, if you have a reviews app that's only used on the product page, but the script is loading on every page, you can use that same technique above and load the script only on product page instead of all pages.

 

For more info on that, see App Optimization Guide for Shopify.

 

It sounds like you're using Google PageSpeed Insights. That tool is ok to get some ideas but it's not geared towards template based ecommerce sites that use 3rd party apps, so you'll get a lot of noise in the reports.

 

If you want to optimize your site I would follow this method:

1) Use Shopify Analyzer to see the most common optimization issues you can do for Shopify sites.

 

2) After optimizing your theme / images according to that tool, look at the app optimization post I shared earlier to employ tactics that analysis tools can't pick up.

 

3) Implement preloading to make the page to page transition faster.

 

If you need professional help feel free to reach out to my team at speedboostr.com/contact. Our team are Shopify developers focused on optimization. We also make regular website edits, build features, and apps.

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
Adeel7
Tourist
6 0 1

Sir, you are exactly right but I have to sort all the files as I have to run the site as well very time consuming. I thought you can suggest me a plugin that is currently working on this website.

It's a caching plus speed optimizer, a paid plugin named as wp-rocket you can check how it minifies JavaScript and solves a lot of problems that we have to do manually is there anything like this for shopify????😏

Zworthkey
Shopify Partner
5581 642 1572

@Adeel7 

Yes , Shopify their are app which minify your js file,
and you help you to optimize your whole code.

Thank you.

Adeel7
Tourist
6 0 1

here is the example website why I cannot show you the website URL I want to show you just but it is not allowing me 😥

oscprofessional
Shopify Partner
15895 2377 3082

@Adeel7 ,

You can connect with me on via email or skype.

we will solve all your optimization issues.

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Adeel7
Tourist
6 0 1

I want to show the site why it is not allowing to place the website link?

Adeel7_0-1650456849475.png

 

AvadaCommerce
Shopify Partner
3879 839 962

Hi @Adeel7 ,

 

You can see google's suggestions to reduce your code, in this google recommend some websites to minify

https://developers.google.com/speed/docs/insights/MinifyResources

Hope it can help you

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
Adeel7
Tourist
6 0 1

Thank you I will check 😊