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 作业来每天检查文件是否有变化，如果有变化就下载新版本。

1. 在wp-content下创建一个目录来存放库

   mkdir wp-content/uploads/libraries

2. 复制库

   cd wp-content/uploads/libraries

   wget https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js

3. 更改加载脚本的 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 Drive 上：

• 小心获取最新代码（here 在撰写本文时）
• 将示例 JS 和 CSS 代码复制到单独的文件中
• 使用-例如-this服务来缩小文件
• 在您的 Google 云端硬盘上创建一个公共文件夹
• 将缩小后的 JS 和 CSS 文件上传到文件夹中
• 公开分享 JS 和 CSS 文件
• 从 Google 云端硬盘获取每个文件的链接
• 使用-say-this服务将其转换为下载链接
• 在主 HTML 文件顶部附近的某处引用生成的链接，记住替换“download&ID=”之间的与号。

最终的 JS 和 CSS 链接应如下所示：

<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 帖子中。