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&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 ...
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
Are you using a Mailchimp plugin for WordPress? Or did you copy and paste the code from the MailChimp form?
Either way, the call to the script will be where the MailChimp form is displayed on the page. If you’re having trouble finding it, right-click and do an Inspect Element on the MailChimp form and look for the call to the script.
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
Hey Javad
I’ll update the post later today or tomorrow with a better explanation.
Macario
Hey Javad. I just updated the post with some extra details. I hope it’s less confusing now. Let me know if you have any other questions. Thanks for reaching out.
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
Hey! Yeah, you’ll want to upload the CSS to your server. Preferably in your themes/yourtheme/css folder. Or even somewhere like yourdomain.com/assets/css/mailchimp.css file …
Does this solution still work?
I’m honestly not too sure. It’s over a year old and I stopped using MailChimp months ago. I’ll have to check on one of my sites and maybe update this.
Hi there — I’d love to see if you have any updates for this. It sounds useful!
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
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
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?
Thank you – fantastic solution!