Mailchimp needs 140kb to be loaded

问题

I use mailchimp to let users sign for a newsletter on my website. I just realized that mailchimp needs 140kb for that which is almost 10% of my landing page loadings.

<!-- Begin MailChimp Signup Form -->
<div class=" col-sm-8 col-sm-offset-2 col-xs-12 onewayDistance" ng-class="{'col-md-8 col-md-offset-2': !newsletterModal,'col-md_8':newsletterModal}" >
  <!--link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"-->
  <div id="mc_embed_signup" >
    <form action="//tripdelta.us8.list-manage.com/subscribe/post?u=9a2a27b15c44950e3ba360a28&amp;id=9b656d6732" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div class="row">
        <div class="col-xs-12 " id="stayInformed">
          {{'STAY_INFORMED'|translate}} <span>{{'NEWSLETTER'|translate}}</span>
        </div>
        <div class="col-xs-9 col-md-4 col-md-offset-3 mc-field-group ">
          <input type="email" ng-model="userEmail" placeholder="{{'ENTER_EMAIL'|translate}}" name="EMAIL" class="required email" id="mce-EMAIL">
          <div id="mce-responses" class="clear" style="background-color: rgba(255,255,255,0.6)">
            <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;">
            <input type="text"  name="b_9a2a27b15c44950e3ba360a28_9b656d6732" tabindex="-1" value="">
          </div>
        </div>
        <div class="col-xs-3 col-md-2" id="newsletterButton">
          <button type="submit" name="subscribe" id="mc-embedded-subscribe" ng-class="{'newsletterModalColor':newsletterModal}" class="button">{{'SUBSCRIBE'|translate}}</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';
    }(jQuery));
  var $mcj = jQuery;
  </script>
</div>

This is just normal code which i simply copied from their website and did some css changes. Any chance to minimize this amount of data to be loaded?

回答1:

It seems there's JQuery API being downloaded from here:

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

So, if your website already use JQuery maybe you don't have to put this one. But it seems they've modified it (i don't know exactly what is modified but it seems if you look trough all the code).

I can't think an other way to reduce the size right now :/

回答2:

I ran into this same problem. I just copied their mc-validate.js file to my wordpress site and load the local copy instead of the remote one. Since I have compression turned on in Apache by default, the library gets compressed automatically.

I then wrote a cron job to check daily if the file has changed, and download the new version if it has changed.

Create a directory under wp-content to store the library

mkdir wp-content/uploads/libraries
Copy the library

cd wp-content/uploads/libraries

wget https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js
Change the URL where you load the script

<script type='text/javascript' src='https://yourwordpresssite.com/uploads/libraries/mc-validate.js'> </script>

(Depending on your server settings, you may need sudo to accomplish the above.)

回答3:

Not my work, but you might like to look at this article:

https://css-tricks.com/form-validation-part-4-validating-mailchimp-subscribe-form/

This approach reduces mc-validate.js from 140kb (minified) to 9kb (minified) - "15.5× smaller than the version MailChimp provides".

The HTML replaces your existing MailChimp code. The JS and CSS files can, on the other hand, be hosted on (say) Google Drive:

be careful to pick up the latest code (here at the time of writing)
copy the example JS and CSS code into separate files
minify the files using -for example- this service
create a public folder on your Google Drive
upload the minified JS and CSS files to the folder
share the JS and CSS files as public
get a link to each file from Google Drive
have it converted into a download link using -say- this service
reference the generated links somewhere near the top of your main HTML file, remembering to replace the ampersand between 'download&ID='.

The final JS and CSS links should look something like:

<link href='https://drive.google.com/uc?export=download&amp;id=IDBLAHBLAHBLAHBLAHBLAHBLAHID' rel='stylesheet' type='text/css'/>
<script async='async' src='https://drive.google.com/uc?export=download&amp;id=IDBLAWBLAWBLAWBLAWBLAWBLAWID' type='text/javascript'></script>

Works fine for me, allowing me to put a Mailchimp signup form into every Google Blogger post simply by adding the HTML block.

来源：https://stackoverflow.com/questions/29739369/mailchimp-needs-140kb-to-be-loaded

标签

jquery

performance

mailchimp