How to fix issues with Unminified Javascript and CSS Files in Shopify?

What is unminified javascript and css files

JavaScript and CSS files that have not been minified have not had their size or speed improved.

When writing the code for web applications, developers frequently use descriptive variable names and comments to make the code easy to read and understand. This code, however, can be pretty extensive and take a while to load in a web browser.

Developers can use a program known as a “minifier” to compress the code and eliminate extraneous characters, whitespace, and comments to enhance performance. The leaner, more effective code that results can reduce the time it takes for pages to load.

On the other hand, unminified CSS and JavaScript files are the original, unoptimized versions of the code. They include all the whitespace, comments, and other components that speed up page load times while also making the code easier to read and understand. Although minified files normally perform better in production, developers frequently utilize unminified files for development and testing.

How to fix issues with unminified javascript and CSS files in Shopify?

Here is a step-by-step guide to fixing unminified JavaScript and CSS files. Follow the steps to fix the issue. 

To fix issues with unminified javascript and css files I will be providing two methods is some cases method 1 works and in some method 2 works so do check both methods.

Method 1:-

Before starting the process make sure you are using the same serial code of the Minified version to fix the issue. Below are the steps I have provided some major occurred minified version files hope this will help you.

Steps to fix some javascript files don’t seem to be minified.

• Login To Your Shopify Dashboard
• Click On Sales Channel which appears on the left side of the dashboard
• Select Online Store
• Click on the Theme option
• And, Choose Edit code
• Search theme.liquid
• Open the search box and search the stylesheet
• In the style sheet row, you will find the unminified version of your Javascript or CSS
• Replace it with the given Minified version

Note:- Make Sure the serial number Should matches the minified version of the file name.

 Follow the steps which are mentioned above to fix the issue. If you are still facing issues drop us an email. We will try to find a fixed solution for you.

Also Read:- Google Clarifies Title Tag Guidance

Some Minified & Unminified Files of JavaScrip

Fix: Some CSS files don’t seem to be minified

There are a few possible reasons why some CSS files might not be minified:

• The minification process was not enabled. Many tools and CMSs have a setting to enable minification for CSS and JavaScript files. If this setting is not enabled, the files will not be minified.
• There is a syntax error in the CSS file. Minification tools will often skip over CSS files that contain syntax errors.
• The CSS file is being loaded from a content delivery network (CDN). CDNs often cache minified versions of popular CSS files, but they may not cache all CSS files.
• The CSS file is being loaded dynamically. If a CSS file is being loaded dynamically using JavaScript, it may not be minified.

Some Minified & Unminified Files of CSS

Method 2:-

Second method to fix issues with unminified javascript and CSS files

What SEMrush says about the issue

Google Article link: https://web.dev/performance-optimizing-content-efficiency

If you look carefully at the resource URL you will find “theme.js” in the middle of the URL it means you need to minify the theme.js file in the directory, so for this below are the steps for it

• Open theme file edit
• Search for theme.js in the search box
• Copy the whole code and paste it into the given website box.

• Click on Minify

JavaScript Minify Website Link:- Toptal Javascript Minifier

• Once you click on Minify it will take a few seconds and will provide you the minified version of JavaScript in the below box.

• Click on the copy button and paste it into the Shopify code editor.
• Click on the Save button

Done!