Pregunta Mailchimp necesita 140kb para ser cargado


Uso mailchimp para permitirles a los usuarios firmar un boletín informativo en mi sitio web. Me acabo de dar cuenta de que mailchimp necesita 140kb para eso, que es casi el 10% de mis cargas en la página de destino.

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

Este es solo un código normal que simplemente copié de su sitio web e hice algunos cambios CSS. ¿Alguna posibilidad de minimizar esta cantidad de datos a cargar?


5
2018-04-20 04:30


origen


Respuestas:


Parece que se está descargando la API de JQuery desde aquí:

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

Entonces, si su sitio web ya usa JQuery, tal vez no tenga que poner este. Pero parece que lo han modificado (no sé exactamente qué se modifica, pero parece que si miras a través de todo el código).

No puedo pensar de otra manera para reducir el tamaño en este momento: /


5
2018-04-20 04:39



Me encontré con este mismo problema. Acabo de copiar su archivo mc-validate.js en mi sitio de wordpress y cargar la copia local en lugar de la remota. Como tengo la compresión activada en Apache de forma predeterminada, la biblioteca se comprime automáticamente.

Luego escribí un trabajo cron para verificar diariamente si el archivo ha cambiado y descargo la nueva versión si ha cambiado.

  1. Crea un directorio debajo wp-content para almacenar la biblioteca

    mkdir wp-content/uploads/libraries

  2. Copia la biblioteca

    cd wp-content/uploads/libraries

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

  3. Cambie la URL donde carga la secuencia de comandos

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

(Dependiendo de la configuración de su servidor, es posible que necesite sudo para lograr lo anterior).


3
2017-11-24 01:07



No es mi trabajo, pero es posible que desee mirar este artículo:

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

Este enfoque reduce mc-validate.js de 140kb (minified) a 9kb (minified) - "15.5 × más pequeño que la versión que proporciona MailChimp".

El HTML reemplaza su código existente de MailChimp. Los archivos JS y CSS pueden, por otro lado, alojarse en (digamos) Google Drive:

  • tenga cuidado de recoger el último código (aquí en el momento de escribir)
  • copie el código JS y CSS de ejemplo en archivos separados
  • minimice los archivos utilizando, por ejemplo, esta Servicio
  • crea una carpeta pública en tu Google Drive
  • cargue los archivos JS y CSS minificados a la carpeta
  • compartir los archivos JS y CSS como públicos
  • obtener un enlace a cada archivo de Google Drive
  • convertirlo en un descargar enlace usando -say- esta Servicio
  • haga referencia a los enlaces generados en algún lugar cerca de la parte superior de su archivo HTML principal, recuerde reemplazar el signo "entre & download = ID".

Los enlaces finales de JS y CSS deberían tener un aspecto similar a:

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

Funciona bien para mí, permitiéndome colocar un formulario de registro de Mailchimp en cada publicación de Google Blogger simplemente agregando el bloque HTML.


2
2017-07-18 21:10