Minify JavaScript/CSS Code in VWO Code Editor

Minification is the process of removing all the unnecessary characters from the source code without changing its functionality. The objective of minifying the code is to reduce its size, making its transmission over a network more efficient. 

In VWO, when you select the option to minify your Javascript/CSS code, VWO typically aims at removing whitespaces, stripping comments, combining files, and optimizes/shortens a few common programming patterns. Since these characters only add readability to the code and don’t execute, removal of these doesn’t hamper any functionality of your website. Everything works as is!

In VWO, you can enable Minify Javascript/CSS code option at a campaign level and workspace level. Enabling this option at the workspace level makes it applicable to all the campaigns you create in the future.

Things to Consider

• By default, the Minify Javascript/CSS code option is disabled for all the campaigns.
• You can enable the Minify Javascript/CSS code option in both the VWO code-only editor and visual editor.
• Configuring Minify JavaScript/CSS code option at the campaign level overrides the one configured at the workspace level only for the current campaign.

With the Minify JavaScript/CSS code option present in VWO Code Editor, you can choose to ship the code in a minified form for your current campaign. This not only reduces the size of the final payload that you ship but also makes it efficient in a way, that the changes to your campaigns apply a bit faster.

Enabling the “Minify JavaScript/CSS code” Option in VWO’s Code-only Mode

If your objective is only to minify the code for your current campaign while working in the code-only mode, VWO lets you do this using the VWO Code Editor.

Procedure

1. Login to your VWO account.
2. Go to TESTING and create a campaign, say A/B.
3. Enter the relevant information in the fields present on the URL(S) page. 
4. Expand the More Options section and select the option Open in Code-only Mode and click NEXT.
5. Click SETTINGS and select the option Minify Javascript/CSS code.
6. Once done, click SAVE.

Enabling the “Minify JavaScript/CSS code” Option in VWO’s Visual Editor

If your objective is only to minify the code for your current campaign, enable the Minify Javascript/CSS code option. 

To learn where and how you can enable the Minify Javascript/CSS code option in VWO’s Editor, follow this: 

Procedure

1. Login to your VWO account.
2. Go to Testing and create a campaign, say A/B.
3. Enter the relevant information in the fields present on the URL(S) page, and click Next.
4. In the Visual Editor, click on the </> Code option present at the bottom.
5. Click Settings and select the option Minify Javascript/CSS code.
6. To finalize this change, click Done.

Configuring the “Minify JavaScript/CSS code” Option at the Workspace Level

If you wish to minify the code for all your future campaigns, you can enable the code editor settings at the workspace level such that it’s applicable to all the campaigns that you create in your workspace. This typically saves a lot of effort as you do not have to configure this setting for every campaign individually.

Procedure

1. Login to your VWO account.
2. Go to Account Settings > Campaign.
3. Scroll down to the Editor Settings and from the Code Editor Settings section, enable the Minify JavaScript/CSS code option.
4. Once done, click Save.