Как убрать подключение лишних JS и CSS файлов в jQuery.extend

Аватар пользователя Technician Technician 8 апреля 2012 в 23:30

Пишу сайт на D7+AT Commerce. Работает вроде бы довольно быстро, но заметил такую проблемку. Когда заходишь на сайт в первый раз - очень долгая пауза (секунд 5) перед появлением первой страницы. Затем уже все работает довольно шустро, задержка по полсекунды на страницу в среднем. Хотя в некоторых местах и бывают неожиданные тормоза.

По сайту сделано некоторые вещи в плане оптимизации, в том числе в настройках производительности включены все галочки (т.е. JS и CSS по идее должны объединяться и сжиматься).

Полез в генерируемый HTML и возникло много вопросов (код буду разбивать на части и комментировать):

1. Подгружается объединенный и разбитый на несколько частей CSS. Тут все ОК.

<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/default/files/css/css_CKoWqiBj9gVXhP7DSnNphuEB0b0... media="all" />
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/default/files/css/css_cYhR_18_lDvkyKAZdelZY6JDv5H... media="all" />
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/default/files/css/css_5dGfRqgc7C6AKXGUYyiPe6-Zx7U... media="all" />
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/default/files/css/css_nFcBdFZpgTrrlsz5yr_Vj34s5tZ... media="all" />
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/default/files/css/css_JDGN2tj7-5rv5Ms9iPiy4ZeQPSf... media="screen" />
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/default/files/css/css_BxuDEykWghfZVC4C4LkwcQqG-so... media="all" />


2. Подгружается выбранный в настройках темы шрифт. Ссылка именно такая, как написано. Практически уверен, что отсутствие http в ссылке - это ошибка.

<link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans" media="all" />


3. Для разных версий ослика подгружаются свои хаки. Все ОК, но всегда хотел спросить, что означает в данном случае код m264pg после имени файла? Много раз встречал различные коды в этом месте. Зачем они нужны, если файл можно запросить и напрямую?

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/all/themes/at-commerce/css/ie-6.css?m264pg" media="all" />
<![endif]-->

<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/all/themes/at-commerce/css/ie-lte-7.css?m264pg" media="all" />
<![endif]-->

<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/all/themes/at-commerce/css/ie-8.css?m264pg" media="all" />
<![endif]-->

<!--[if lte IE 9]>
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/all/themes/at-commerce/css/ie-lte-9.css?m264pg" media="all" />
<![endif]-->

<!--[if lte IE 8]>
<link type="text/css" rel="stylesheet" href="http://mysite.ru/sites/all/themes/at-commerce/css/ie-htc.css?m264pg" media="all" />
<![endif]-->

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

И опять почему-то "неправильная ссылка" (без http) на гугловский сервис. Или это я что-то не догоняю?



4. Подгружается JS по аналогии с CSS. Тут все понятно.


5. А вот теперь самое интересное. Код дальше был без переносов, я его привел к читаемому виду. Комменты мои.

jQuery.extend(Drupal.settings, {
"basePath":"/",
"pathPrefix":"",
"ajaxPageState":{
"theme":"at_commerce",
"theme_token":"NtHUBtnopWB2tm7Vixdg0GXcSE6cYXu4ILNe9bSxnVk",

"js":{
        "sites/all/themes/adaptivetheme/adaptivetheme/js/respond.js":1,
        "misc/jquery.js":1,
        "misc/jquery.once.js":1,
        "misc/drupal.js":1,
        "sites/all/modules/admin_menu/admin_devel/admin_devel.js":1,
        "public://languages/ru_HNARSMkvZa6rBKUllFT3Atm68gj0c2jD9TzWjAx9D9g.js":1,  /*  Ссылка внутренняя, и с клиента не видна. Это ошибка?  */
        "misc/vertical-tabs.js":1,
        "sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js":1,
        "sites/all/modules/colorbox/js/colorbox.js":1,                             /* нет ли здесь дублирования предыдущего файла (выше строчкой)?  */
        "sites/all/modules/colorbox/styles/default/colorbox_default_style.js":1,
        "sites/all/libraries/superfish/jquery.hoverIntent.minified.js":1,
        "sites/all/libraries/superfish/jquery.bgiframe.min.js":1,
        "sites/all/libraries/superfish/superfish.js":1,
        "sites/all/libraries/superfish/supersubs.js":1,
        "sites/all/libraries/superfish/supposition.js":1,
        "sites/all/libraries/superfish/sftouchscreen.js":1,
        "sites/all/modules/superfish/superfish.js":1,
        "sites/all/themes/at-commerce/js/jquery.flexslider-min.js":1,
        "sites/all/themes/at-commerce/js/slider.options.js":1,
        "sites/all/themes/at-commerce/js/draw.js":1
},

"css": {
        "modules/system/system.base.css":1,
        "modules/system/system.menus.css":1,
        "modules/system/system.messages.css":1,
        "modules/system/system.theme.css":1,
        "modules/field/theme/field.css":1,
        "modules/node/node.css":1,
        "modules/search/search.css":1,
        "sites/all/modules/ubercart/uc_order/uc_order.css":1,
        "sites/all/modules/ubercart/uc_product/uc_product.css":1,
        "sites/all/modules/ubercart/uc_store/uc_store.css":1,
        "modules/user/user.css":1,
        "sites/all/modules/views/css/views.css":1,
        "sites/all/modules/colorbox/styles/default/colorbox_default_style.css":1,
        "sites/all/modules/ctools/css/ctools.css":1,
        "sites/all/libraries/superfish/css/superfish.css":1,
        "sites/all/libraries/superfish/css/superfish-vertical.css":1,     /*   Вертикальные меню Superfish не использую, как отключить его стили?   */
        "sites/all/libraries/superfish/css/superfish-navbar.css":1,       /*   Тот же вопрос.   */
        "sites/all/modules/ds/layouts/ds_2col_stacked_fluid/ds_2col_stacked_fluid.css":1,
        "0":1, /*           */
        "1":1, /* Зачем эти */
        "2":1, /*  числа?   */
        "3":1, /*           */
        "sites/all/themes/adaptivetheme/adaptivetheme/css/at.base.css":1,
        "sites/all/themes/adaptivetheme/adaptivetheme/css/at.layout.css":1,
        "sites/all/themes/adaptivetheme/adaptivetheme/css/at.messages.css":1,
        "sites/all/themes/at-commerce/css/styles.base.css":1,
        "sites/all/themes/at-commerce/css/styles.modules.css":1,
        "sites/all/themes/at-commerce/css/styles.settings.css":1,
        "sites/all/themes/at-commerce/color/colors.css":1,
        "sites/all/themes/at-commerce/css/styles.custom.css":1,
        "public://at_css/at_commerce.responsive.layout.css":1,                    /*   Опять кривая ссылка?   */
        "sites/all/themes/at-commerce/css/styles.slideshow.css":1,
        "sites/all/themes/at-commerce/css/at_commerce.responsive.style.css":1,
        "sites/all/themes/at-commerce/css/at_commerce.responsive.gpanels.css":1,
        "//fonts.googleapis.com/css?family=Open+Sans":1,                          /*   И еще?   */
        "sites/all/themes/at-commerce/css/ie-6.css":1,       /*   Зачем подключать все хаки IE, если выше было избирательное подключение (см. п. 3)?  */
        "sites/all/themes/at-commerce/css/ie-lte-7.css":1,
        "sites/all/themes/at-commerce/css/ie-8.css":1,
        "sites/all/themes/at-commerce/css/ie-lte-9.css":1,
        "sites/all/themes/at-commerce/css/ie-htc.css":1
}
...
дальше неважно


В общем, много непонятного.
Непонятно, какой эффект дает объединение и сжатие CSS и JS, если они потом загружаются в jQuery.extend в несжатом виде?
Непонятно, почему в загрузку прописаны все подряд CSS и JS, а не в соответствии с используемыми фичами темы (у меня половина из этого не нужно)?
Непонятно, что это за кривые ссылки - ошибка или что-то хитрое, и оно все-таки работает? В отношении кривых ссылок у меня подозрение, что это они и дают тормоза при первом входе на сайт. Так как они прописаны в загрузке в хедере страницы, то браузер выжидает таймаут и только затем отображает страницу. А дальше он уже помнит, что эти ссылки плохие и не ждет.

Некоторые вещи я могу и сам проверить (те же кривые ссылки - работают или нет), но не успел пока, хотел запостить все это для обсуждения. Позже допишу, что накопаю.

Я в Drupal относительный новичок (но не в IT), поэтому буду признателен за разъяснения неочевидных моментов.

Комментарии

Аватар пользователя Chyvakoff Chyvakoff 9 апреля 2012 в 9:26

Посмотри какие файлы при загрузке большего времени забирают.
Казявки после расширения файла-это "антикэширование"... тоесть если подгрузить style.css а потом его изменить-то браузер может упорно подгружать файл из своего кэша.. а если написать style.css?qwerty - то файл загрузится заново.
Насчёт "кривых" ссылок-посмотри код яднекс метрики или лайвинтернета. Там аналогичные урлы и всё прекрасно работает.
Сжатие css-это подгрузка одного большого файла вместо нескольких маленьких-прирост во времени.

Аватар пользователя Technician Technician 10 ноября 2015 в 11:48

Chyvakoff, спасибо за инфу.

Вот как загружается главная страница:

Сколько бы не рефрешил, время примерно одно и то же. Т.е. файлы CSS и JS подгружаются примерно по 3 секунды. Причем, такое ощущение, что они собираются каждый раз заново. Ведь я в конфигурации сайта ничего не меняю, соответственно, сборка CSS должна оставаться той же. И загружаться за долю секунды, файлы то по 10 Кб.

Ускорение работы страниц (когда они показываются за 0,5с), я так понимаю, происходит за счет локального кэшированиях их в браузере. А полная загрузка получается около 5 секунд, как ни крути. Хотя бывает, что быстро появляется страница, на которую я до этого не заходил.

Что касается ссылок, начинающихся с двух слэшей, - действительно часто встречаются. И действительно работают. Как-то не обращал внимания раньше. А как со ссылкой "public://at_css/at_commerce.responsive.layout.css" в jQuery.Extend? Тоже сработает? И как вообще происходит загрузка упомянутых в jQuery.Extend файлов? Ни один браузер не показывает, что они загружаются.

Аватар пользователя Technician Technician 10 ноября 2015 в 11:48

Жаль, что по основному вопросу (jQuery.Extend) никто из гуру не отписался. Ну да ладно. На данный момент я решил проблему тормозов в загрузке страниц установкой модуля Boost. Страницы теперь кэшируются в статические файлы, которые отдаются клиенту очень быстро. Если страницы в кэше нет, то тогда ожидание будет 1-3 секунды (это время генерации HTML + загрузка картинок, а CSS и JS теперь кэшируются Бустом), но по крайней мере, это будет теперь происходить намного реже. Вот как теперь выглядит загрузка главной:




Отметить полноценное решение проблемы, увы, не могу, т.к. тема была посвящена не столько ускорению загрузки страницы, сколько оптимизации аргументов функции jQuery.Extend.

Аватар пользователя Technician Technician 18 апреля 2012 в 12:59

Flinblo wrote:
А boost с корзиной Drupal Commerce работает нормально?

С Commerce не пробовал, у меня Ubercart. Я запретил Бусту кэшировать cart/* и там только динамика. Проблем нет. А вообще, не успел еще просто отписаться, перешел сейчас на другой хостинг - IT-Patrol.ru. По сравнению с предыдущим хостингом скорость отображения страниц выросла в среднем на порядок (в десять раз). И Буст теперь даже уже почти и не нужен - с ним страницы всего лишь в 1,5-2 раза быстре загружаются, чем статика. Но я пока Boost оставил, хуже не будет.

Аватар пользователя vinta vinta 10 ноября 2015 в 11:48

Здравствуйте,

"Technician" wrote:
С Commerce не пробовал, у меня Ubercart.

То же пытаюсь сделать такое же, но при установке этой темы в ноде продукта маленькие картинки у меня выводятся в столбик.

а должно быть в линию. Я немного знаю CSS и в теме Bartik мне удаётся решать все проблемы, а здесь никак сколько не пытался. Как Вы, решили эту проблему? Если да, не поделитесь, какую строчку вписали в файл styles.custom.css?

Аватар пользователя misterpronin misterpronin 14 октября 2012 в 12:40

Посмотри исходный текст страницы и найди там css файл, который подключается самым последним. В него (в самый конец) и вводи изменения. Свой css-файл можешь подключить в файле .info темы (тоже в самом конце списка он должен быть).

Аватар пользователя vinta vinta 10 ноября 2015 в 11:48

Да вообще то это не мой файл, сами разработчики темы здесь пишут что для внесения изменений надо использовать styles.custom.css

и в исходном коде страницы я вообще не нашёл ни одной строки link rel="stylesheet"