Mailchimp 需要 140kb 才能加载

Question

我使用 mailchimp 让用户在我的网站上签署时事通讯。我刚刚意识到 mailchimp 需要 140kb，这几乎是我的目标网页加载量的 10%。

<!-- 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>

这只是普通代码，我只是从他们的网站上复制并做了一些 css 更改。有机会尽量减少要加载的数据量吗？

Answer 1

似乎有 JQuery API 从这里下载：

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

所以，如果您的网站已经使用 JQuery，也许您不必放置这个。但他们似乎已经修改了它（我不知道具体修改了什么，但如果你查看所有代码，似乎是这样）。

我现在想不出其他方法来减小尺寸：/

Answer 2

我运行遇到了同样的问题。我只是将他们的 mc-validate.js 文件复制到我的 wordpress 站点并加载本地副本而不是远程副本。因为我在 Apache 中默认打开了压缩，库会自动压缩。

然后我写了一个cron作业来每天检查文件是否有变化，如果有变化就下载新版本。

在wp-content下创建目录存放库

mkdir wp-content/uploads/libraries
复制库

cd wp-content/uploads/libraries

wget https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js
更改 URL 加载脚本的位置

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

（根据您的服务器设置，您可能需要 sudo 才能完成上述操作。）

Answer 3

不是我的作品，但你可能想看看这篇文章：

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

这种方法将 mc-validate.js 从 140kb（缩小）减少到 9kb（缩小）——“比 MailChimp 提供的版本小 15.5 倍”。

HTML 替换您现有的 MailChimp 代码。另一方面，JS 和 CSS 文件可以托管在（比如）Google 驱动器：

注意获取最新的代码（here 在撰写本文时）
将示例 JS 和 CSS 代码复制到单独的文件中
使用-例如-this服务
在您的 Google 驱动器上创建一个 public 文件夹
将缩小后的 JS 和 CSS 文件上传到文件夹
将 JS 和 CSS 文件共享为 public
从 Google 驱动器
使用-say- this服务

下载

在主 HTML 文件顶部附近的某个位置引用生成的 links，记住替换 'download&ID='.

最终的 JS 和 CSS link 应该类似于：

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

对我来说效果很好，允许我通过添加 HTML 块将 Mailchimp 注册表单放入每个 Google Blogger post。

Mailchimp 需要 140kb 才能加载

Mailchimp needs 140kb to be loaded

performance

jquery

mailchimp