Форум русской поддержки Joomla!® CMS
05.12.2016, 16:32:56 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Оптимизация скорости загрузки Joomla (css, js)

 (Прочитано 704 раз)
0 Пользователей и 1 Гость смотрят эту тему.
ruslan13
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 42


« : 25.04.2016, 10:28:20 »

Для пользователей со слабым интернетом критично количество запросов к серверу. У меня на Joomle на каждый обращение идет скачивание порядка 30 CSS и js файлов, и штук 50 запросов за Google fonts за двумя шрифтами. Даже если всё это закэшировано в браузере локально или на прокси сервере, запросы за 302 кодом идут. Все это (установление соединений) сильно тормозит загрузку.

Возникла идея плагина, который будет на сервере в момент запроса отключать вывод всех CSS и js, собирать их в один файл и выдавать гзипом.
Можно ли перехватить вывод всех выводимых скриптов и стайлшитов?
Записан
SDKiller
Dev Team
******

Репутация: +325/-5
Offline Offline

Пол: Мужской
Сообщений: 2749


...ergo sum


« Ответ #1 : 25.04.2016, 17:29:58 »

У меня на Joomle на каждый обращение идет скачивание порядка 30 CSS и js файлов, и штук 50 запросов за Google fonts за двумя шрифтами.

К гадалке не ходи - у вас клубный шаблон, есть у них такая беда, поскольку им пофиг на оптимизацию, лишь бы красиво продаться.

Возникла идея плагина, который будет на сервере в момент запроса отключать вывод всех CSS и js, собирать их в один файл и выдавать гзипом.

Смысл? Лишний оверхед на обработку событий плагинов.

Просто собирайте все css-js, комбинируйте-минимизируйте и правьте шаблон чтобы выводить то что накомбинировали.

Что касается шрифтов - смотрите - может они и не используются по факту
(по опыту - большинство подключаемых в клубных шаблонах шрифтов банально не имеют кириллицы и фактически подменяются чем-нибудь типа Arial - а тогда нафиг их грузить вообще).
Записан
flyingspook
Профи
********

Репутация: +226/-9
Offline Offline

Сообщений: 3525


« Ответ #2 : 25.04.2016, 17:42:22 »

(по опыту - большинство подключаемых в клубных шаблонах шрифтов банально не имеют кириллицы и фактически подменяются чем-нибудь типа Arial - а тогда нафиг их грузить вообще).
Чтоб иконки не рисовать и в спрайты не собирать  Grin и то их там десяток от силы используется.
Записан
SDKiller
Dev Team
******

Репутация: +325/-5
Offline Offline

Пол: Мужской
Сообщений: 2749


...ergo sum


« Ответ #3 : 25.04.2016, 17:45:57 »

Чтоб иконки не рисовать и в спрайты не собирать  Grin и то их там десяток от силы используется.

Ладно бы иконки - с ними проще (де-факто сейчас либо FA либо Material).
А я неоднократно видел что какой-нибудь экзотический шрифт грузится ради одного слова из трёх букв в логотипе - в таком случае проще логотип сделать картинкой вообще.
Записан
zomby6888
Живу я здесь
******

Репутация: +168/-3
Offline Offline

Пол: Мужской
Сообщений: 1538


« Ответ #4 : 25.04.2016, 21:09:55 »

Скрипты и стили можно пожать и объеденить. Есть плагины для этого. Такое кол-во скриптов на одной странице - это уже плохо. Уверен что большая часть из них не используется. Если шаблон тянет все это, плохой значит шаблон.
Записан
shurakana
Живу я здесь
******

Репутация: +48/-6
Online Online

Сообщений: 861



« Ответ #5 : 26.04.2016, 02:48:46 »

Кол-во запросов не влияет на скорость, по вашим словам, если на странице будет 1000 картинок(это отдельный запрос каждая) то можно будет пойти покурить пока загрузится..

Дело не в стилях и скриптах, дело в вашем шаблоне который делает черти че, фреймворк внутри двух других, которые объединяет еще один..

Если у вас возникла идея сделать плагин, почему в начале не возникла идея включить отладку и посмотреть что там происходит?

Я не говорю что сжимать и объединять скрипты не нужно, нужно, очень даже, но никак не на лету..
Записан
ruslan13
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 42


« Ответ #6 : 26.04.2016, 04:04:13 »

Шаблон написан "с нуля" мной конкретно под сайт, ничего лишнего. Грузятся бутстреп, jquery, jcemediabox, Lightbox, несколько модульных, fa, свои - всё только нужное, неубираемое.
Гугл фонт - робото 300,400,500, подключен css-ом по методу на сайте Google. Грузятся 40 файлов по 15 кб. Из них какие-то "вьетнамские" и еще черт знает что.
Проследите у себя за обращениями, увидите то же самое.

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

shurakana
Сядьте на edge или перегруженный g3 и потом говорите мне, что количество запросов не влияет на скорость загрузки страницы. У моего сайта такая аудитория.
Записан
shurakana
Живу я здесь
******

Репутация: +48/-6
Online Online

Сообщений: 861



« Ответ #7 : 26.04.2016, 04:39:46 »

https://goo.gl/aM2qOt
Записан
ruslan13
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 42


« Ответ #8 : 27.04.2016, 04:51:57 »

По поводу оптимизации загрузки Google fonts нашел очень интересные статьи, может кому пригодится:
http://css-live.ru/articles-css/bystraya-zagruzka-veb-shriftov-na-adaptivnyx-sajtax.html
https://htmlacademy.ru/blog/61
Записан
flyingspook
Профи
********

Репутация: +226/-9
Offline Offline

Сообщений: 3525


« Ответ #9 : 27.04.2016, 10:23:50 »

Как обычно очередной бред описан.
Цитировать
... достаточно подключать веб-шрифты лишь для тех браузеров, которые поддерживают WOFF или WOFF2 форматы
Зачем тогда вообще их подключать, там еще есть фраза на счет если не поддерживаются то будут применены стандартные шрифты.
Записан
ruslan13
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 42


« Ответ #10 : 06.05.2016, 21:07:48 »

В общем, поймать все стайлшиты и скрипты из шаблона оказалось невозможно, а из плагина вполне красиво вышло:

Код:
public function onBeforeCompileHead() {
        foreach (JFactory::getDocument()->_styleSheets as $strSrc => $strAttr) {
            unset(JFactory::getDocument()->_styleSheets[$strSrc]);
            if (strrchr($strSrc, "?")!== false) {
                $strSrc = substr($strSrc, 0, strpos($strSrc, "?"));
            }
            $txt = $txt . "\n\n" . file_get_contents(JPATH_SITE . "/" . $strSrc);
        }
        file_put_contents(JPATH_SITE . '/templates/' . JFactory::getDocument()->template . "/css/style.css", $txt);
    }

В итоге все стили в одном файле.
Бутстрепы, мутулзы и прочее ненужное так же модно отключать.
Может кому пригодиться.
Записан
dialit
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 71


« Ответ #11 : 07.05.2016, 00:39:27 »

а из плагина вполне красиво вышло
какой плагин?
Записан
SDKiller
Dev Team
******

Репутация: +325/-5
Offline Offline

Пол: Мужской
Сообщений: 2749


...ergo sum


« Ответ #12 : 07.05.2016, 00:45:37 »

для данного события должен быть системный
Записан
ruslan13
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 42


« Ответ #13 : 07.05.2016, 05:25:58 »

SDKiller

Тоже так думал, но добавил эту функцию в свой контентный плагин, и она заработала.
Записан
Филипп Сорокин
Живу я здесь
******

Репутация: +120/-3
Offline Offline

Пол: Мужской
Сообщений: 1447


« Ответ #14 : 07.05.2016, 05:43:21 »

JS прекрасно чувствует себя при загрузке с атрибутом defer, поэтому фанатизм в вырубании всех скриптов не оправдан. Можно спокойно оставить до 10 скриптов, если они загружаются в режиме отложенной загрузки. А вот с CSS и шрифтами сложнее — их действительно заколебёшься оптимизировать, при том что компоненты Joomla могут выводить стили в разном количестве и порядке.
« Последнее редактирование: 07.05.2016, 05:50:03 от Филипп Сорокин » Записан
ruslan13
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 42


« Ответ #15 : 07.05.2016, 06:52:02 »

Усовершенствованный код. Теперь можно указать в отдельном файле forbidden-ss-js.txt скрипты и стайлшиты (и шрифты, привязываемые через стили), которые запрещено подключать.


Код:
   public function processResources(&$resArr, $resFileName) {
        // forbidden-ss-js.txt file in the template root dir contains file names
        // of stylesheets and javascripts, that should not be loaded.
        // each filename on a separate string without spaces
        // EXACTLY like they go in the HTML page source
        // example:    
        //      /media/jui/css/bootstrap-responsive.min.css
        //      /plugins/system/jcemediabox/js/jcemediabox.js

        $forbiddenRes = file_get_contents(JPATH_SITE . '/templates/' . JFactory::getDocument()->template . "/forbidden-ss-js.txt");
        $forbiddenArr = explode(PHP_EOL, $forbiddenRes);
        foreach ($resArr as $strSrc => $strAttr) {            
            unset($resArr[$strSrc]);
            if (strrchr($strSrc, "?")!== FALSE) {
                $strSrc = substr($strSrc, 0, strpos($strSrc, "?"));
            }
            if (in_array($strSrc, $forbiddenArr)) {
                continue;
            }
            $strSrc = str_ireplace("http://" . $_SERVER["SERVER_NAME"] , "", $strSrc);
            $strSrc = str_ireplace("https://" . $_SERVER["SERVER_NAME"] , "", $strSrc);
            $txt = $txt . "\n\n" . file_get_contents(JPATH_SITE . "/" . $strSrc);
        }
        $resFile = JPATH_SITE . '/templates/' . JFactory::getDocument()->template . "/$resFileName";
  
        //  if the ss's or js's are all the same - do not change resulting resource file
        //  (for internet caching purposes)
        if (strlen($txt)!= filesize($resFile)) {
            file_put_contents($resFile, $txt);
        }
    }

    public function onBeforeCompileHead() {
        $this->processResources(JFactory::getDocument()->_styleSheets, "css/style.css");
        $this->processResources(JFactory::getDocument()->_scripts, "js/script.js");
    }


Филипп Сорокин
Я уже писал, что для меня каждый килобайт и каждый запрос важен - такие обстоятельства.
Но оптимально пришел к решению всё-таки отдельной легкой версии сайта. Этот плагин позволит использовать тот же Joomla движок для этого легкого шаблона.
« Последнее редактирование: 07.05.2016, 08:26:18 от ruslan13 » Записан
Филипп Сорокин
Живу я здесь
******

Репутация: +120/-3
Offline Offline

Пол: Мужской
Сообщений: 1447


« Ответ #16 : 07.05.2016, 07:55:04 »

Понятно. Тогда могу порекомендовать JCH Optimize. Выполняет эту же функцию, и делает это безопасно. Может пригодится. А ещё есть Nginx + PageSpeed — самый лучший вариант для таких целей (он делает всё и ещё немного).
Записан
ruslan13
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 42


« Ответ #17 : 07.05.2016, 08:27:41 »

Да, то, что надо, спасибо. Только я ее уже, получается, написал. Минифаить, единственно, руками собирался, через сервис.

В Joomla, на самом деле, руками всё-равно много что заоптимизировать можно. Я вот на код свой посмотрел, а там ExtraVote установлен - оценка статей, звездочки. Так он в самом html'e блога от 20% до 50% текста сжирает (в зависимости от модулей). 40Кб из 150Кб. Можно его через Javascript убрать почти полностью.
Записан
Филипп Сорокин
Живу я здесь
******

Репутация: +120/-3
Offline Offline

Пол: Мужской
Сообщений: 1447


« Ответ #18 : 07.05.2016, 08:37:00 »

Цитировать
Минифаить, единственно, руками собирался, через сервис.
Через сервис неудобно, но зато качественно. Для скриптов Uglify.js — сжимает хорошо, работает безошибочно, т.к. по-моему он на Node.js сделан. Ещё можно Closure Compiler от Google на собственном серваке развернуть, который будет автоматически сжимать скрипты. Последний работает на Java.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet