Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 553
Dribel Avatar asked Apr 20 '15 04:04

Dribel


1 Answers

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

like image 174
Write Avatar answered Oct 25 '22 22:10

Write