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

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

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代码复制到单独的文件中
使用-for example- this service
在您的Google云端硬盘上创建公用文件夹
将缩小的JS和CSS文件上传到文件夹
将JS和CSS文件共享为公共
从Google云端硬盘获取每个文件的链接
使用-say- this服务将其转换为下载链接
在主HTML文件顶部附近的某处引用生成的链接，记住要替换'download＆amp; 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帖子中。

Mailchimp需要140kb才能加载

2 个答案: