Асинхронная загрузка CSS и JS

Тема в разделе "OpenCart", создана пользователем cereberlum, 28 дек 2013.

  1. cereberlum

    cereberlum

    Регистрация:
    26 май 2013
    Сообщения:
    740
    Симпатии:
    266
    Друзья, кто-нибудь решал вопрос асинхронной загрузки? Сайт жутко тормозит, в первую очередь из-за кучи скриптов и таблиц стилей, Сделал асинхронную загрузку через скрипт гугла
    Код:
    <script src="http://extsrcjs.googlecode.com/svn/trunk/extsrc.js"></script>
    <script type="text/javascript" extsrc="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
    Но во-первых это решило только вопрос с загрузкой js а стили все так же тормозят. Во-вторых, джаваскрипт все-равно грузится достаточно долго, грузятся последовательно и png загружаются все так же после загрузки всех js, хотя скорость в целом выросла, но хотелось бы результат лучше.
    Скрипты и стили сжимал, все что определил как лишнее и ненужное удалил.
    1)Как подгружать css асинхронно?
    2)Может быть есть другие варианты борьбы с тормозами такого плана?
    3)Почему png все-равно грузятся после загрузки js?
    Вообще, есть подозрение что в js много левоты, которая не используется на сайте вообще. К примеру я удалил процентов 70 jquery.colorbox.js (кажется) - и все работает так же как и работало, так же и скрипт меджикзум+ имеет просто огромный размер, но при этом подключается на все страницы, хотя и используется только на странице товара. Да и само содержимое скрипта наверняка не все используется.
     
  2. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Исправьте ссылки для jquery и jqueryUI на ссылки с Google Hosted Libraries.
    Можно подгрузить css для colorbox и другие чуть позже, с помощью чистого JavaScript либо скрипта http://yepnopejs.com/ (с js он тоже работает)
    Объедините css файлы, которые используются на всех страницах, в один.
    Чтобы меджикзум+ загружался только на странице продукта нужно открыть контроллер catalog/controller/product/product.php в самой первой функции index() добавить
    PHP:
    $this->document->addScript('catalog/view/javascript/jquery/tabs.js');
    # только путь смените
    Вопрос по png - они из стилей или скриптов? или со страницы (img) ?
     
    HPlus и cereberlum нравится это.
  3. cereberlum

    cereberlum

    Регистрация:
    26 май 2013
    Сообщения:
    740
    Симпатии:
    266
    Спасибо за ответ, итак по порядку:
    1) тоже наткнулся на скрипт yepnope, интересно описывается все, попробую им воспользоваться.
    2) тоже решил объединить css + нашел плагин Dust Me Selrctors для лисы - который помогает удалить неиспользуемые селекторы из css - у него есть один минус - если используется кроссплатформенная верстка то может отметить как лишние нужные поля. Надо аккуратно удалять.
    3) Меджикзум вынес только на страницу продукта таким образом
    Код:
    <?php echo $header; ?>
    <link type="text/css" href="admin/controller/module/magictoolbox/magiczoomplus.css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="admin/controller/module/magictoolbox/magiczoomplus.js"></script>
    т.е. в макет, но предложеный способ нравится больше, попробую, спасибо.
    4) картинки png из стилей
     
  4. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Картинки можно кодировать в data:base64 и вставить прямо в css, это избавит Вас от лишних запросов к серверу.
    --- Добавлено, 29 дек 2013 ---
    Кстати, если сервер Apache и он настолько слабый, что приходится все оптимизировать могу посоветовать настойки .htaccess.
     
    Последнее редактирование: 29 дек 2013
    HPlus и cereberlum нравится это.
  5. cereberlum

    cereberlum

    Регистрация:
    26 май 2013
    Сообщения:
    740
    Симпатии:
    266
    На самом деле желание все оптимизировать вызвано желанием освоить этот процесс, в первую очередь, процентов 60 сайтов в сети работают еще медленнее, и не парятся. Итак, подведу промежуточный итог, все стили слил в один мегадокумент, в него же записал картинки через base64. Надо сказать что премиум шаблоны, перегружены стилями и скриптами, что тормозит нереально работу сайта. На входе было штук 12 css после того как слил в один файл, пробежался плагином Dust Me Selrctors - про него хочу сказать что он божественен. на самом деле им надо просто правильно пользоваться, надо побегать по сайту, так чтобы он зацепил все задействованные стили, в результате он выдает файл, в котором все лишние селекторы закомментированы - полученный файл прогоняем сервисом сжатия css и на выходе получил файл в 2 раза меньший чем изначальный.
    Уже сами манипуляции с css дали прирост скорости.
    Изменения в конфигурационном файле не дали изменений, у меня джино, скорее всего там запрещено сжатие.
    Прошу немного растолковать как использовать yepnope - в сети не нашел ни одного примера с готовым кодом, вот так сейчас у меня выглядит содержание хедера
    Код:
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/stylesheet/dw.css" />
    <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/fast_order.js"></script>
    <script type="text/javascript" src="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/js/jquery.selectbox-0.2.js"></script>
    <script type="text/javascript" src="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/js/jquery.elastislide.js"></script>
    <script type="text/javascript" src="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/js/AC_RunActiveContent.js"></script>
    <script type="text/javascript" src="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/js/custom.js"></script>
        <!--[if !IE]><!-->
        <script>if([email protected]_on!@*/false){document.documentElement.className+='ie10';}</script>
        <!--<![endif]-->
        <!--обратный звонок-->
        <script type="text/javascript" src="/callme/js/callme.js"></script>
    - Буду признателен если покажете пример внедрения, у меня что-то не получилось.
    Проводил эксперимент со сваливанием js в один файла - получается фигня, такой файл грузится еще дольше. когда прикручивал асинхронную загрузку через гугловский скрипт, выяснилось что далеко не все скрипты можно отсрочить, например у меня товары в категории выводятся через скрипт js - который не показывает товары при асинхронной загрузке пока не сделать в категории действий (смена сортировки, типа отображения) при этом самые тяжелые скрипты убрать в асинхронную не получается, например библиотеку jq. насколько я понял yepnope решает эту проблему?