How Does The Javascript & CSS Minification Work For Developers?

We're developers too so have worked hard to make Plug in Speed developer friendly.

Our principles are:

• Do not break or dirty hack any Shopify features
• Do not make extra work for shop owners or developers
• Be clear and verbose where we modify the theme
• 100% compatibility with apps
• Give developers extra power to work with the app (APIs and power user tools)

Theme modifications

Looking in your theme you may see something like this:

{% comment pluginspeed replaced-js DON'T CHANGE %}{{ 'slider.js' | asset_url | script_tag }}{% endcomment %}{%- include 'pluginspeed-minify-asset', asset: 'slider.js', tag: 'script' -%} 

This is a script that is being minified by Plug in Speed. The original script_tag has been commented out and replaced by the snippet pluginspeed-minify-asset.

How it works

Plug in Speed minifies slider.js and saves it as an asset and snippet called pluginspeed.min.slider.js. When a user visits the page they are served the minified asset.

How to edit

The good news is that you simply edit slider.js as normal. No extra steps required. The minification will take place automatically.

It's important to note that as soon as you edit slider.js your edit is immediately live on the shop. The minification may take some seconds, during which time the non-minified version is served. This means at no time is out-of-date code live on your shop.

Adding new scripts and stylesheets

If you're making a bunch of edits to a shop we don't want Plug in Speed to get in your way, modifying your theme at the same time you are trying to.

Because of that, let's say you add a:

{{ 'parallax.js' | asset_url | script_tag }}

Plug in Speed will be aware of it but will not minify it straight away.

Simply go into the Plug in Speed app and you will see a prompt that some unoptimized code is detected. Push the button and this will be minified for you now and automatically whenever you edit parallax.js in future.

Stop a script or stylesheet from being minified

If you want to stop a script or stylesheet from being minified you can just remove the modification made by Plug in Speed.

For example: 

{% comment pluginspeed replaced-js DON'T CHANGE %}{{ 'slider.js' | asset_url | script_tag }}{% endcomment %}{%- include 'pluginspeed-minify-asset', asset: 'slider.js', tag: 'script' -%} 

Here, if we want to not minify slider.js:

1. Remove the comment around the script_tag
2. Remove the pluginspeed-minify-asset include

This will leave us with:

{{ 'slider.js' | asset_url | script_tag }} 

As noted above, Plug in Speed will not automatically minify this again. There will be a prompt in the app to optimize new scripts. Push this and then repeat the steps to stop the script from being minified again.  

Questions?

Email help@pluginspeed.com. We're not afraid to get technical.