C
C
coderisimo2015-12-02 14:37:51
JavaScript
coderisimo, 2015-12-02 14:37:51

How to speed up the download of a 22Kb gif from your own server (using JS)?

opty.jpg
https://dl.dropboxusercontent.com/u/19954007/asks/...
from the page load analysis, it can be seen that the longest request is to load a small image.
in the body of the page, the download of this picture is in $(document).ready( function()....
I give a piece of JS in the body of the page. We are interested in this line:
COT(" https://www.kiddies-kingdom.com/ img/cot_evssl.gif ", "SC3", "none"); Tell me where to dig? Thanks.

$(document).ready( function() {

  $('#payment_paypal_express_checkout').click(function() {
    $('#paypal_payment_form').submit();
    return false;
  });
  //бла бла бла......

//.......................................................
        $(window).load(
          function() {
            time_start = new Date();
          }
        );
        $(window).unload(
          function() {
            var time_end = new Date();
            var pagetime = new Object;
            pagetime.type = "pagetime";
            pagetime.id_connections = "154464";
            pagetime.id_page = "1";
            pagetime.time_start = "2015-12-02 11:26:35";
            pagetime.token = "ec0e5e89b3a4f6c0c9fcd18b869b8eba5f1f6139";
            pagetime.time = time_end-time_start;
            $.post("https://www.kiddies-kingdom.com/index.php?controller=statistics", pagetime);
          }
        );
var page = 'homepage';  // #TYPE DE PAGE#
  var order_amt = ''; // #MONTANT COMMANDE#
  var order_id = ''; // #ID COMMANDE#
  var product_ids = ''; // #ID PRODUCT#
  var basket_products = ''; // #LISTING PRODUCTS IN BASKET#
  var ssl = 'false';
  var id_categorie = ''; // #ID CATEGORIE EN COURS#
//*******************************************************************************************************
// ВОТ СТРОКА ГДЕ ВСЕ ПРОИСХОДИТ 
//******************************************************************************************************
COT("https://www.kiddies-kingdom.com/img/cot_evssl.gif", "SC3", "none");
google_custom_params = window.google_tag_params;
var gts = gts || [];

  gts.push(["id", "477109"]);
  gts.push(["badge_position", "BOTTOM_LEFT"]);
  gts.push(["locale", "en_GB"]);
  
      
 
  gts.push(["google_base_subaccount_id", "1402959"]);
  gts.push(["google_base_country", "GB"]);
  gts.push(["google_base_language", "en"]);

one more place in the markup, where there is a mention of this picture:
<div id="cot_tl_fixed">
<a onclick="return cot_tl_bigPopup('http://www.trustlogo.com/ttb_searcher/trustlogo?v_querytype=W&amp;v_shortname=SC3&amp;v_search=www.kiddies-kingdom.com&amp;x=6&amp;y=5')" 
href="http://www.instantssl.com">
<img border="0" onmouseout="Ovr2=setTimeout('cot_tl_toggleMiniPOPUP_hide()',3000);clearTimeout(Ovr)"
onmouseover="Ovr=setTimeout('cot_tl_toggleMiniPOPUP_show()',1000);clearTimeout(Ovr2)"
alt="SSL Certificate" src="https://www.kiddies-kingdom.com/img/cot_evssl.gif"></a></div>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Y
Yuri, 2015-12-02
@coderisimo

If I understood everything correctly, the lion's share of the time is spent on establishing an SSL connection.
Himself in such situations, the first thing I would do was get into the web server settings to see what was wrong with the section with SSL parameters (recommendations for speeding up SSL in nginx on the Internet - a wagon with a cart).
The second thing would be to make sure that gif files are served using nginx, and not proxied to Apache in the backend.

location /img/ {
  root /var/www/...... ;
  expires 2y;
}

Or, if, blood from the nose, you need to process the gif with Apache - well, at least stick proxy_cache there so that you don’t climb to it every time.
Judging by the server headers, you have nginx as a frontend, and judging by the timing, either gif requests really go to apache, or you have a very slow (or loaded) disk.

D
Dmitry Pavlov, 2015-12-02
@dmitry_pavlov

You can parallelize any downloads in $(document).ready - by formatting code blocks as asynchronous function calls. And if you need to wait for some of them to finish, you can use $.when( $.ajax( .... ), $.ajax( ... ) ) .then( myFunc, myFailure ); https://api.jquery.com/jquery.when/
In general, what's the problem with loading this image? What's stopping you?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question