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.

(Visited 738 times, 1 visits today)

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
5 1 vote
Article Rating
Subscribe
Notify of
guest

14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
testing
testing
4 years ago

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

Javad Dadvar
4 years ago

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

Dadvar Javad
4 years ago

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

Sarah
Sarah
4 years ago

Does this solution still work?

A different Sarah... honest!
Reply to  Macario James
3 years ago

Hi there — I’d love to see if you have any updates for this. It sounds useful!

Trevor Hartman
Trevor Hartman
3 years ago

I don’t use WordPress, but I did need this same file for my MailChimp integration. If you want to make this file even better, you can use js-beautify or something like it to expand the minimized version, then completely remove the super OLD jQuery 1.9 library that makes up the first 3000 lines or so if your site already loads jQuery, like mine and most of WordPress. Then you can update their super old jQuery plugins as well by cutting them out and replacing them, and finally re-compact it using terser or the tool mentioned in this article. Or you can just download mine: https://gist.githubusercontent.com/viable-hartman/2abef0fd3368668b1379ca1e80074d83/raw/98c4264816ba46d0ca7e727cc7341e6c0ba55352/mc-validate.min

Financial Freedom Countdown
3 years ago

Hi Macario, thank you for the solution. It did increase my speed but I noticed a 404 in my Developer Tools when loading my page.

VM5045 rocket-loader.min.js:1 is the initiator causing it when invoking local-mc-validate.js. Feel free to send me an email if you need more details on the issue.

Again, thank you for this great resource

Viola
3 years ago

It worked and the site speed has increased, thank you Macario!

I’ve noticed that it redirects uses to the ‘thank you for subscribing page’ from Mailchimp.

Is it possible to just show “Thank you for subscribing!” message right under or over the form instead instead of opening a new window?

Happy
Happy
2 years ago

Thank you – fantastic solution!

14
0
Would love your thoughts, please comment.x
()
x