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

Compress + Minify MailChimp mc-validate.js
0 0 vote
Article Rating

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="//" 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. */
<div id="mc_embed_signup">
<form action=";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">
<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>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
<div class="mc-field-group">
	<label for="mce-LNAME">Last Name </label>
	<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
	<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>
<script type='text/javascript' src='//'></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


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 Or, if you’re on WordPress, it will be

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 to produce this

The bottom of the code should now look like this

<script type='text/javascript' src=''></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.

0 0 vote
Article Rating

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
Notify of

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

Oldest Most Voted
Inline Feedbacks
View all comments
February 26, 2020 3:58 pm

Does this solution still work?

A different Sarah... honest!
May 15, 2020 12:49 am
Reply to  Macario James

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

Dadvar Javad
October 18, 2019 5:09 pm

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 Dadvar
October 13, 2019 6:50 am

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

July 9, 2019 3:46 am

Thanks for this. But, one question. Where can I find it? The call to this script. /

Would love your thoughts, please comment.x