Как ускорить загрузку гифки 22Кб со своего же сервера (используется JS)?

Question

[coderisimo]

https://dl.dropboxusercontent.com/u/19954007/asks/...

из анализа загрузки страницы видно что самый длинный запрос это загрузка небольшой картинки.
в теле страницы загрузка этой картинки стоит в $(document).ready( function()....
привожу кусок JS в теле страницы . Нас интересует вот эта строка :
COT("https://www.kiddies-kingdom.com/img/cot_evssl.gif", "SC3", "none"); Подскажите куда копать? Спасибо.

$(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"]);

еще одно место в разметке , где есть упоминание этой картинки :

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

[Юрий]

Если я все правильно понял - львиная доля времени уходит на установление SSL-соединения.
Сам при таких ситуациях первым делом полез бы в настройки веб-сервера, чтобы посмотреть, что там не так с секцией с параметрами SSL (рекомендаций по ускорению SSL в nginx в интернетах - вагон с тележкой).
Вторым делом - убедился бы, что файлы gif отдаются с помощью nginx, а не проксируются на апач в бэкенде.

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

Либо, если, кровь из носа, надо обрабатывать gif апачем - ну хотя бы proxy_cache туда впилить, чтобы каждый раз к нему не лазить.
Судя по заголовкам сервера - у вас nginx стоит фронтендом, а судя по таймингу - либо запросы на gif действительно уходят на apache, либо у вас ооочень медленный (либо загруженный) диск.

Comments

[coderisimo]

файл отдается nginx - проверил в браузере. а вот насчет настроек SSL надо покопать!
а как можно проверить диск? посмотреть свободное место? соррри за ламерские вопросы.

[Юрий]

coderisimo: А как ты понял, что файл отдается nginx? Браузером это не увидеть - nginx его в любом случае отдаст. Другое дело - кто читает этот файл с диска - сам nginx (это быстро) или nginx передает твой запрос бэкенду (обычно апач), и потом уже бэкенд считывает с диска файл и отдает по цепочке обратно (это медленно)?
Я привел выше пример секции конфига nginx для отдачи всех урлов, имеющих в составе /img/ напрямую с диска.
Возможно, секция будет выглядеть по-другому, например:
location ~ .+\.(git|png|jpg|css|js) {
root /var/www/.... ;
expires 1y;
}
И то, будет ли оно работать, зависит от местоположения location в конфиге.

Как почти стопроцентный вариант узнать, отдает ли nginx файл сам или проксирует запрос на него в апач - сделать свой logformat, например:

log_format useragent '$remote_addr - [$time_local] "$host" "$request" $status ($bytes_sent) "$http_referer" '
        '[$request_time] gzip:"$gzip_ratio" cache:"$upstream_cache_status" "$content_length" '
        'agent:"$http_user_agent" "upstream: $upstream_addr time:$upstream_response_time sec.";

и к директиве access_log у сервера приписать формат лога useragent... В таком случае в логах запись будет формата:

80.60.50.12 - [02/Dec/2015:16:45:34 +0300] "trololo.com" "GET /Feed/Games?lng=ru HTTP/1.1" 200 (5343) "https://trololo.com/games/" [0.019] gzip:"-" cache:"EXPIRED" "-" agent:"Mozilla/5.0 (Windows NT 6.3; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0" "upstream: 127.0.0.1:80 time:0.018 sec."

Обрати внимание, что здесь указан адрес апстрима (т.е. куда nginx направил запрос) и время его ответа. Здесь явно видно, что запрос GET /Feed/Games?lng=ru HTTP/1.1 был отправлен на апстрим, находящийся на адресе 127.0.0.1:80 и апстрим ответил за 0.018 секунд. А сам nginx отработал запрос за 0.019 секунд (значение в квадратных скобках).
А, например, запрос на файл, который отдавался самим nginx-ом будет выглядеть примерно так:

80.60.50.12 - [02/Dec/2015:16:52:21 +0300] "trololo.com" "GET /img/76.png HTTP/1.1" 200 (1870) "https://trololo.com/" [0.000] gzip:"-" cache:"-" "-" agent:"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0" "upstream: - time:- sec." "UA=-"

Т.е. указания апстрима нет, как и его времени ответа, как и многих других полей. Здесь можно точно сказать, что файл отдался nginx-ом. (Кстати, время обработки запроса при отдаче статики обычно такое, как здесь - [0.000])

Подозреваю, что диск у тебя ни причем. Поскольку с самого твоего сервера отдается не так много ресурсов... MaxCDN используется? Да и файл бы уже попал в дисковый кеш и не читался бы с диска каждый раз. С 99% уверенностью могу утверждать, что дело у тебя как раз в том, что вместо того, чтобы отдать файл напрямую, nginx проксирует запрос на него в и так загруженный апач (ну или что там в качестве бэкенда). Дело осложняется тем, что, судя по заголовкам, у тебя установлен Plesk, а с ним у меня довольно сложные взаимоотношения :) Мы с ним никак не можем договориться, кто ответчает за конфиги - сисадмин или Plesk :)

[coderisimo]

Спасибо за развернутый ответ! После таких ответов ощущаешь всю глубину собственной тупости )))))
Я с nginx пока на уровне осторожно включить, да добавить в конфиг что-то несложное типа gzip :) . не подскажешь где почитать с примерами для дубов про настройку/оптимизиацию nginx ? Простым языком ? Каждый раз как в первый))) Сейчас вот экстренно его вырубили ибо надо настраивать работу с CDN шрифтами (которые перестали отображаться) и урлами на престашопе- на сайте перестал работать поиск. Правда нужные для конфига данные я уже нашел в справке престашопа и на конфе CDN, но все равно это на уровне "вот это надо вставить туда и будет хорошо" . Понимания, увы, ноль (
Еще раз спасибо за ответ.

[Юрий]

Сложно выдать какой-то ресурс, в котором бы все было описано. К тому же, nginx инструмент довольно мощный и вряд ли какой-то ресурс в красках и живописно охватит все аспекты его применения и способов конфигурации.
Скажем так - для начала неплохо было бы почитать официальную документацию на nginx.ru (nginx.org). Не надо читать прямо сейчас, когда жёппа в огне. Дома, не спеша, пройтись два-три раза, чтобы хотя бы иметь представление, что и где искать в случае надобности.
Дальше - начать применять nginx по-частям. Не сразу с корабля на бал с конфигом в 30 файлах, с адскими регулярками, проверкой куков и прочее... А, например, на каком-то простом проекте начать с простого

upstream local {
  server 127.0.0.1:81;
}

server {
  
listen 80;
  server_name www.trololo.com;

  location / {
    proxy_pass http://local;
  }
}

Т.е. просто спрятать все за nginx, заставив его просто проксировать все на бэкенд.
Затем, включить локейшн для отдачи картинок, чтобы не терзать ими апач.

location ~ \.(jpg|png|gif) {
  root /var/www/trololo.com;
}

Затем включить gzip (ну, видимо уже сталкивался), ну а дальше наворачивать и наворачивать :)

Если интересно - пиши, помогу, чем смогу, если время будет :)

[coderisimo]

xtreme: спасибо!
Кстати, там, насколько я помню, есть галочка в настройках gninx есть галка. что-то типа "отдавать статический контент". это же оно? насчет gif и прочей статики?

[Юрий]

coderisimo: К сожалению, я не знаю, что имели ввиду авторы Plesk под данной опцией. Предпочитаю контролировать конфиг самостоятельно. Возможно она действительно поможет.

Answer 2

[Dmitry Pavlov]

Можно распараллелить всякие загрузки в $(document).ready - оформив блоки кода как асинхронный вызов функций. А если надо дождаться окончания каки-то их них - можно использовать $.when( $.ajax( .... ), $.ajax( ... ) ) .then( myFunc, myFailure ); https://api.jquery.com/jquery.when/

А вообще, в чем проблема с загрузкой этой картинки? Чем это вам мешает?

Comments

[coderisimo]

Проблема в том, что загрузка картинки занимает самое большое время из всех загрузок на данной странице ,что видно на скриншоте. Причем , сама картинка небольшая. Вот и хочу разобраться и ускорить по возможности.

[coderisimo]

иногда все происходит даже дольше https://dl.dropboxusercontent.com/u/19954007/asks/...

[Dmitry Pavlov]

coderisimo: а картинка /img/cot_evssl.gif физически там лежит или как-то процессится? можно попробовать предзагрузить stackoverflow.com/questions/476679/preloading-imag...

[Dmitry Pavlov]

по идее второй раз должно уже браться из кеша если не отключен

[coderisimo]

на картинке есть расшифровка времени/процессов. Процесс загрузки не самый долгий. есть там вещи подлиннее.