How can I manually remove unused CSS and Javascript from my online store?

[Malek3]

My Online store have so much unused css and java script codes and i'm trying to remove it manualy.
can someone tell how can i remove unused codes from my shopify store to get best performance and store speed please?
by the way i can't hire freelancer or shopify expert because im new and i just started with my business so i've no money to hire someone, that's why i need best way to remove unused codes 
My Shopify Store: www.dreamlandspet.com

[flareAI]

Hello @Malek3,

I am Gina from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot.

-> Before you start removing any codes, be sure to make a backup of your theme. This will help you to restore your site if anything goes wrong.

-> If you are not sure where to start, it is best to start small. Remove a few unused codes at a time and test your site after each change. This will help you to identify any problems that may arise.

-> To identify unused CSS and JavaScript codes, analyze your store's theme files and look for included CSS and JavaScript files that are not being utilized. You can utilize your browser's developer tools for this analysis.

-> Once you have identified unused CSS code, manually delete it from the corresponding CSS file in your theme. Take caution to avoid deleting any important code and keep track of the changes you make for easy rollback if needed.

-> Similarly, locate unused JavaScript code in your theme's JavaScript files and delete it, ensuring that necessary functionality is not removed. Be mindful of dependencies between different scripts and test the store's functionality after making changes.

-> After removing unused code, further optimize your store's performance by minifying the CSS and JavaScript files. Minification reduces file sizes by removing unnecessary characters and spaces, resulting in faster loading times. Online tools are available to assist with this process.

-> Thoroughly test your store after making changes to ensure that everything functions correctly. Check different pages, features, and responsiveness on various devices and browsers to optimize performance.

->If you are not familiar with editing code, it is best to hire a professional to help you. There is a risk of breaking your site if you make changes to the code incorrectly.

Let me know if you have any further questions.

Gina

[oscprofessional]

Hello @Malek3 

Double Loaded Scripts, Due to App

We can check if the app scripts are loading and whether the scripts are double-loaded.

As an example, We have the Social Media App – Facebook, which shows two scripts loaded through the app.

In this case, the scripts were probably added twice to theme.liquid, product.liquid, collection.liquid and index.liquid, so we will check the liquid files to confirm and remove one of the scripts.

In the other case, if there is a further Facebook pixel on your site that you didn’t add, it was probably added through an app on your site. so we have no control over these types of scripts because Facebook is a third-party app and this app doesn’t allow you to change or modify their script. Here you need to identify the app responsible for the pixel code and uninstall that app.

Solution

• To remove an app, go to the admin dashboard and check if it’s been uninstalled.
• Look at GSI: Reducing the impact of third-party code for third-party apps.
• In liquid files, remove the code of the apps and remove any additional files added by the apps.
• Check the View source for duplicate pixels, and either modify Liquid or uninstall the app that caused this JS inline insert.

Apps when installed may inject a few files into your Shopify theme. When removing unnecessary apps, you should also remove Shopify app files from your theme that were added. third-party code can Significantly impact load performance.

-- Inline critical css

-- Preload to CSS file

If anything needs to be included or clarified then feel free to ask.  We will surely help you.

[alfiyaa]

I am a Shopify developer. If anyone wants to hire a Shopify developer, please contact. I have created this website. https://pandacraftstudio.in/

https://pandacraftstudio.in/