How to compress + minify MailChimp’s mc-validate.js for faster loading and better PageSpeed Insight Scores

Compress + Minify MailChimp mc-validate.js

MailChimp has been far from cooperative with helping developers speed up website loading by simply minifying their mc-validate.js file. There’s a growing thread on Twitter started over two — yes, 2! — years ago.

Here’s what i did to stop receiving poor grades on GT Metrix and Google’s PageSpeed Insights.

Look through your unique MailChimp embed code you got from MailChimp -> Signup Forms, which should look like this:

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://yourlist.us12.list-manage.com/subscribe/post?u=abc123&amp;id=xyz123" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
	<label for="mce-LNAME">Last Name </label>
	<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d4a91c4c387c8464988f3cf74_7f68da84c4" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Replace the red code towards the bottom of the embed code inside the <script> tag

//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js

in src in the default MailChimp embed code with the code in my gist. When you save the code from my gist, name it local-mc-validate.js and then upload it to your server. An example to put it is somewhere like yoursite.com/js/local-mc-validate.js. Or, if you’re on WordPress, it will be yoursite.com/wp-content/themes/yourtheme/js/local-mc-validate.js.

Notice, i prepended “local” to the default file name like so local-mc-validate.js and serve it on my own server.

I took the MailChimp mc-validate.js file and minified it via https://javascript-minifier.com/ to produce this

The bottom of the code should now look like this

<script type='text/javascript' src='https://yourwebsite.com/local-mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

You’ll also need to supply a local, minified version of the .css file MailChimp uses horizontal-slim-10_7.css. Rename it to something like local-horizontal-slim-10_7.css just like the .js file.

Here’s the gist.

Hope that helps you speed up your websites. And if there’s any confusion, please email me [email protected] or drop a comment on this post.

Be sure to check out the two sister posts on leveraging browser caching and gzip compression.

Cheers and peace.

If you found this post useful ...

Buy Me a Coffee logo
Wondering why you keep seeing lower-cased 'i' in my posts? Read -> Why ‘i’ is not capitalized

7
Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Dadvar Javad
Guest

Thank you very much Macario!

I could manage to upload the .js file to the server and make the change in the script.

The last question is where should I supply the CCS file? Should I upload it also to the server? to which address?
I am Newbee in the WordPress world without any coding knowledge.

Thanks again for your time and explanation

Best regards
Javad

Javad Dadvar
Guest

Hej Macario!

I found this article very useful.
I was wondering if you could possibly explain this procedure a bit easier, as I am just a beginer in this era and have no idea how to do that.
Maybe add some picture, and more explanation!

I could find the script, but need more help.

Best regards
Javad

testing
Guest
testing

Thanks for this. But, one question. Where can I find it? The call to this script. /s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js