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. 

Before starting the process make sure you are using the same serial code of the Minified version to fix the issue. Belo the steps I have provided some major occurred minified version file 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

https://cdnjs.cloudflare.com/ajax/libs/template7/1.4.0/template7.js	Unminified
https://cdnjs.cloudflare.com/ajax/libs/template7/1.4.0/template7.min.js	Minified

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js	Unminified
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js	Minified

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js	Unminified
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js	Minified

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.js	Unminified
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js	Minified

https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/da.js	Unminified
https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/da.min.js	Minified

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

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css	Unminified
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css	Minified

https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css	Unminified
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css	Minified

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css	Unminified
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css	Minified

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.css	Unminified
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css	Minified

https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css	Unminified
https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css	Minified

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css	Unminified
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css	Minified