Mailchimp necessita di 140kb per essere caricato

Question

Uso mailchimp per consentire agli utenti di firmare per una newsletter sul mio sito web. Ho appena realizzato che mailchimp ha bisogno di 140kb per quello che è quasi il 10% dei miei caricamenti della pagina di destinazione.

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

Questo è solo il codice normale che ho semplicemente copiato dal loro sito Web e fatto alcune modifiche CSS. Qualche possibilità di minimizzare questa quantità di dati da caricare?

Answer 1

Sembra che ci sia JQuery API essere scaricato da qui:

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

Quindi, se il vostro sito già utilizzato Forse JQuery non devi metterlo. Ma sembra che lo abbiano modificato (non so esattamente cosa viene modificato ma sembra che si guardi attraverso tutto il codice).

Non riesco a pensare un altro modo per ridurre le dimensioni in questo momento:/

Answer 2

mi sono imbattuto in questo stesso problema. Ho appena copiato il loro file mc-validate.js sul mio sito wordpress e caricato la copia locale invece di quella remota. Dato che per impostazione predefinita è attivata la compressione in Apache, la libreria viene compressa automaticamente.

Ho quindi scritto un cron job per controllare ogni giorno se il file è cambiato e scaricare la nuova versione se è cambiata.

1. Creare una directory sotto wp-content per memorizzare la libreria

   mkdir wp-content/uploads/libraries

2. Copia biblioteca

   cd wp-content/uploads/libraries

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

3. Modificare l'URL in cui si carica lo script

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

(A seconda delle impostazioni del server, potrebbe essere necessario sudo per realizzare quanto sopra.)

Answer 3

Non

il mio lavoro, ma si potrebbe come a guardare a questo articolo:

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

questo approccio r educes mc-validate.js da 140kb (minified) a 9kb (minified) - "15.5 × inferiore alla versione fornita da MailChimp".

L'HTML sostituisce il codice MailChimp esistente.I file JS e CSS possono, d'altra parte, essere ospitati su (ad esempio) di Google Drive:

• stare attenti a prendere il codice più recente (here al momento della scrittura)
• copiare l'esempio JS e il codice CSS in file separati
• minify i file utilizzando -per esempio- this servizio
• creare una cartella pubblica sul tuo Google drive
• caricare i file JS e CSS minified alla cartella
• condividere i file JS e CSS come pubblico
• ottenere un link per ogni file da Google Drive
• ce l'ha trasformata in una scaricare collegamento mediante -say- this servizio
• riferimento i link generati da qualche parte vicino alla parte superiore il tuo file HTML principale, ricordando di sostituire la e commerciale tra 'download & ID ='.

La finale JS e CSS collegamenti dovrebbe essere simile:

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

funziona bene per me, che mi permette di mettere un modulo di iscrizione Mailchimp in ogni post di Google Blogger semplicemente aggiungendo il blocco HTML.