Главная страница / Советы / Сжатие CSS файлов шаблона
март 08 2010

Сжатие CSS файлов шаблона

celsoft 8 марта 2010 Советы 39 109
86 комментариев
Дорогие друзья,

как вы знаете, начиная с версии 8.5, в скрипте появилась возможность сжатия javascript файлов, что позволяет до 70% уменьшить их размер и тем самым существенно ускорить их загрузку в браузер. В данной статье я хочу вам рассказать о том, что данную возможность можно применить для файлов стилей CSS вашего шаблона. Для этого необходимо изменить их подключение в шаблон, допустим ваши стили подключаются в шаблоне строчками:
<link rel="stylesheet" type="text/css" href="/templates/Default/css/style.css" />
<link rel="stylesheet" type="text/css" href="/templates/Default/css/engine.css" />

для включения сжатия для этих файлов, эти строки необходимо заменить на:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f=/templates/Default/css/style.css,/templates/Default/css/engine.css" />

Собственно и все, теперь ваши стили будут автоматически объединены и сжаты, и в браузер будут отдаваться уже сжатые файлы, существенно экономя ваш траффик. При этом нужно будет помнить лишь одну особенность, если вы захотите изменить содержание этих файлов, то после внесения изменений, вам необходимо будет обязательно зайти в админпанель скрипта и сделать очистку кеша в админпанели скрипта, а также сделать очистку кеша в браузере.
115

Комментарии

  1. 0

    vikdo (Клиенты)

    12 марта 2010 14:42 16 комментариев
    У меня не понятная проблема. Поставил сжатие, все нормально но только в IE. В других браузерах что то работало - а что то нет. Не работала (выводилась не нормально) форма добавления комментов (там bb код разъхался вертикально), не работал рейтинг, вывод календаря.

    Только когда продублировал BB из CSS в файл стилей тогда только они стали нормально отображаться. Почему так может быть?
    Жалоба
  2. 0

    Master-of-photo (Посетители)

    13 марта 2010 16:21 2 комментария
    ... сделать очистку кеша в админпанели скрипта, а также сделать очистку кеша в браузере

    А для пользователей все автоматом обновиться? (имею ввиду очистка кеша в браузере) winked
    Жалоба
  3. 0

    celsoft (Администраторы)

    13 марта 2010 20:34 4 033 комментария
    Цитата: Master-of-photo
    А для пользователей все автоматом обновиться? (имею ввиду очистка кеша в браузере)

    зависит от браузера и настроек браузера, это написано для администраторов, чтобы они мгновенно увидели эти изменения. Делать очистку кеша браузера нужно и без использования сжатия, т.к. браузеры также кешируют очень хорошо CSS.
    Жалоба
  4. 0

    portal13 (Клиенты)

    15 марта 2010 23:50 4 комментария
    Цитата: Master-of-photo
    А для пользователей все автоматом обновиться? (имею ввиду очистка кеша в браузере)

    при добавлении к ссылке ?что-нибудь должны перезагрузиться у пользователей, это как вариант :)
    например style.css?v1.2
    Жалоба
  5. 0

    hotdj (Клиенты)

    29 марта 2010 02:18 11 комментариев
    а у меня вот всё что от тегов <head> до </head>

    Внимание!

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


    как нада правильно всё уместить ?? ксс уже сделал одно, а нада все ксс которые там прописанны и js файлы тоже не помешало бы.
    Жалоба
  6. 0

    WWW.ZEOS.IN (Клиенты)

    22 мая 2010 12:04 32 комментария
    Кому интересно, можете посмотреть статью: http://forum.dle-news.ru/index.php?showtopic=51296
    Тут написано про эффективность сжатия. А также Вы можете узнать во сколько раз сжались ваши файлы winked
    Жалоба
  7. 0

    zgr (Клиенты)

    26 мая 2010 02:27 4 комментария
    Подскажите, пожалуйста, нигде найти не могу: можно ли из стороннего модуля подключить css-файл? или для этого нужно обязательно править переменную скрипта {headers}, либо шаблон своей темы?

    Как не изворачивался, но из модуля не получается в хидер сайта засунуть:

    <link rel="stylesheet" type="text/css" href="путь/css.css" />

    Эх, не хотелось бы людям усложнять жизнь, да и себе тоже - лишний мануал по установке клепать :)

    --------------------------

    П.С. как-то смущают точные копии этого сайта в сети, уже на второй наткнулся - один в один или у ДЛЕ несколько официальных сайтов? Еще и смайлы в Мозиле не работают: нажимаю - перелистывает страницу наверх.
    Жалоба
  8. 0

    valet (Посетители)

    17 ноября 2010 16:50 29 комментариев
    Цитата: xoxmalv
    После таво как поставил поивилась в php логе следушая ошибка:

    PHP Notice: Undefined index: charset in /home/www/site/engine/classes/min/config.php on line 158, referer:


    Где 158 строка: if ( $_GET['charset'] ) {

    Какие идеи?


    Аналогично.
    Могу даже уточнить, что в логи пишется:
    PHP Notice: Undefined index: charset in /var/www/мойсайт/engine/classes/min/config.php on line 158


    Что-то не так в файле двига engine/classes/min/config.php в 158-ой строке.

    Не хотелось бы забивать лог даже нотисами. Ждем исправления от разработчика.

    Заранее спасибо.

    Еще такой вопрос: если внести изменения в css-файлы, как их заново пережать?
    Жалоба
  9. 0

    celsoft (Администраторы)

    17 ноября 2010 22:26 4 033 комментария
    Цитата: valet
    Еще такой вопрос: если внести изменения в css-файлы, как их заново пережать?

    Очистить кеш скрипта в админпанели на главной, а также очистить кеш браузера.
    Жалоба
  10. 0

    ando (Посетители)

    19 ноября 2010 07:01 2 комментария
    <style type="text/css" media="all">
    @import url({THEME}/css/style.css);
    </style>
    <style type="text/css" media="all">
    @import url({THEME}/css/engine.css);
    </style>


    был такой код, заменил на код:
    <link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/style.css,{THEME}/css/engine.css" />


    Но у меня сместились рисунки в BBCODES .
    Жалоба
  11. 0

    celsoft (Администраторы)

    19 ноября 2010 10:53 4 033 комментария
    ando,
    У вас невалидный CSS, поэтому при сжатии он становится нерабочим. Смотрите пропущенные скобки или ;
    Жалоба
  12. 0

    ando (Посетители)

    19 ноября 2010 11:07 2 комментария
    У вас невалидный CSS, поэтому при сжатии он становится нерабочим. Смотрите пропущенные скобки или ;


    это в стилях смотреть?
    Жалоба
  13. 0

    celsoft (Администраторы)

    19 ноября 2010 11:22 4 033 комментария
    Цитата: ando
    это в стилях смотреть?

    да
    Жалоба
  14. 0

    valet (Посетители)

    29 ноября 2010 13:59 29 комментариев
    Уважаемый celsoft.
    Ответьте пожалуйста на мой вопрос по поводу:
    PHP Notice: Undefined index: charset in /var/www/мойсайт/engine/classes/min/config.php on line 158
    Жалоба
  15. 0

    celsoft (Администраторы)

    29 ноября 2010 14:32 4 033 комментария
    valet,
    Добавьте указание кодировки в URL, например:
    <link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/style.css,{THEME}/css/engine.css&charset=windows-125

    1" />
    Жалоба
  16. 0

    FruitzZ (Посетители)

    4 августа 2012 21:13 2 комментария
    Сжатие использовать еще актуально?
    Жалоба
  17. 0

    celsoft (Администраторы)

    5 августа 2012 15:11 4 033 комментария
    Цитата: FruitzZ
    Сжатие использовать еще актуально?

    А почему оно может быть не актуально?
    Жалоба
  18. 0

    FruitzZ (Посетители)

    6 августа 2012 21:22 2 комментария
    celsoft,
    Я просто посмотрел на дату и вышла такая мысль.
    Спасибо за ответ!
    Жалоба
  19. 0

    Yagami (Клиенты)

    1 декабря 2013 21:46 2 комментария
    Цитата: celsoft
    Цитата: FruitzZ
    Сжатие использовать еще актуально?

    А почему оно может быть не актуально?


    <script type="text/jаvascript" src="/engine/classes/min/index.php?f={THEME}/js/share42.js"></script>
    <script type="text/jаvascript" src="/engine/classes/min/index.php?f={THEME}/script/reflection.js"></script>
    <script type="text/jаvascript" src="/engine/classes/min/index.php?f={THEME}/js/flash.js"></script>
    <script type="text/jаvascript" src="/engine/classes/min/index.php?f={THEME}/js/common.js"></script>
    <script charset="utf-8" src="/engine/classes/min/index.php?f={THEME}/jrt-run.js"></script>

    всё правильно сделал? дле версии 10.1
    Жалоба
  20. 0

    Yagami (Клиенты)

    1 декабря 2013 22:14 2 комментария
    и это помогите если можно сжать , у меня не получается.. заранее спасибо!

    <style type="text/css" media="all">
    @import url(/templates/animeonline/css/style.css);
    </style>
    <style type="text/css" media="all">
    @import url(/templates/animeonline/css/engine.css);
    </style>
    Жалоба
  21. 0

    Simur (Посетители)

    10 декабря 2013 04:13 48 комментариев
    А есть ли в этом способе какие-то минусы? Например нагрузка на хостера или может еще что? И когда следует применять это способ?
    Жалоба
  22. 0

    celsoft (Администраторы)

    10 декабря 2013 11:35 4 033 комментария
    Цитата: Simur
    А есть ли в этом способе какие-то минусы? Например нагрузка на хостера или может еще что? И когда следует применять это способ?

    Нагрузка на CPU конечно увеличивается, потому как процессору нужно сжать контент, прежде чем отдать его в браузер.
    Жалоба
  23. 0

    anatoly86 (Посетители)

    15 октября 2014 00:19 11 комментариев
    А можно ли как-то обжимать и mediaelementplayer.min.css?
    mediaelementplayer.min.css выводится не во всех новостях, а только в тех где есть видео.
    Жалоба
  24. 0

    anatoly86 (Посетители)

    15 октября 2014 01:13 11 комментариев
    Код в статье немного устарел - сейчас в DLE другие пути к шаблонам.

    Было:
    <link rel="stylesheet" type="text/css" href="{THEME}/css/style.css" />
    <link rel="stylesheet" type="text/css" href="{THEME}/css/engine.css" />
    заменить на:
    <link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/
    style.css,{THEME}/css/engine.css" />

    Актуальный код для DLE 10.3:
    <link href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
    <link href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
    заменить на:
    <link href="/engine/classes/min/index.php?f={THEME}/styl
    e/styles.css,{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
    Жалоба
  25. 0

    celsoft (Администраторы)

    15 октября 2014 02:54 4 033 комментария
    anatoly86
    В принципе ничего не изменилось. Пути к файлам CSS прописываются в самом шаблоне, а не скрипт DLE их выводит. В каждом шаблоне они могуть быть какими угодно и это решает вебмастер при вёрстке собственно шаблона. Поэтому к версии DLE это не имеет отношения. Это имеет отношение непосредственно к используемому шаблону.

    Цитата: anatoly86
    А можно ли как-то обжимать и mediaelementplayer.min.css?mediaelementplayer.min.css выводится не во всех новостях, а только в тех где есть видео.

    Нет, потому как он не имеет постоянного расположения на всех страницах сайта.
    Жалоба
  26. 0

    mentirosso (Клиенты)

    14 июня 2016 11:35 2 комментария
    А как быть при этом с гугл ботом? Они трактуют что б в разделе "посмотреть как гугл бот" робот видел страницу так же как и человек http://joxi.ru/nAyY6Zxt370jAZ вот, что же тогда в роботс занести в allow ? если папка engine закрыта от индексации
    Жалоба
  27. 0

    celsoft (Администраторы)

    14 июня 2016 11:49 4 033 комментария
    Цитата: mentirosso
    А как быть при этом с гугл ботом? Они трактуют что б в разделе "посмотреть как гугл бот" робот видел страницу так же как и человек http://joxi.ru/nAyY6Zxt370jAZ вот, что же тогда в роботс занести в allow ? если папка engine закрыта от индексации

    Какое отношение имеет сжатие CSS к гугл ботам? гугл не индексирует CSS файлы, он вообще отбрасывает визуальное оформление, и когда вы выбираете такой просмотр вы видите то как видит робот для индексации контент. Для индексирования текста вашей страницы, гугл роботу не нужны "красивости" вашего сайта. И когда речь идет о том что контент который видит робот, должен совпадать с тем что видит человек, это речь исключительно о контенте вашего сайта, а не о том как оформлен ваш CSS. Сжатый он или не сжатый робот абслютно все равно. Более того доступ к папке и индексирование папки это вещи принципиально разные. Доступ к CSS робот имеет независимо от того включено сжатие или нет. В robots.txt идет речь о индексации содержимого, для выдачи в результатах поиска. Содержимое CSS никогда не выдается в результатах поиска на сайтах поисковиков.
    Жалоба
  28. 0

    mentirosso (Клиенты)

    14 июня 2016 12:59 2 комментария
    Цитата: celsoft
    Цитата: mentirosso
    А как быть при этом с гугл ботом? Они трактуют что б в разделе "посмотреть как гугл бот" робот видел страницу так же как и человек http://joxi.ru/nAyY6Zxt370jAZ вот, что же тогда в роботс занести в allow ? если папка engine закрыта от индексации

    Какое отношение имеет сжатие CSS к гугл ботам? гугл не индексирует CSS файлы, он вообще отбрасывает визуальное оформление, и когда вы выбираете такой просмотр вы видите то как видит робот для индексации контент. Для индексирования текста вашей страницы, гугл роботу не нужны "красивости" вашего сайта. И когда речь идет о том что контент который видит робот, должен совпадать с тем что видит человек, это речь исключительно о контенте вашего сайта, а не о том как оформлен ваш CSS. Сжатый он или не сжатый робот абслютно все равно. Более того доступ к папке и индексирование папки это вещи принципиально разные. Доступ к CSS робот имеет независимо от того включено сжатие или нет. В robots.txt идет речь о индексации содержимого, для выдачи в результатах поиска. Содержимое CSS никогда не выдается в результатах поиска на сайтах поисковиков.


    Тут речь идет о том что роботу должны быть доступны все скрипты в том числе css и js https://support.google.com/webmasters/answer/6066468 - как тогда правильно в DLE разрешить роботу индексации содержимого без нечего лишнего, учитывая только скрипты который сжаты хаком?
    Жалоба
  29. 0

    celsoft (Администраторы)

    17 июня 2016 09:17 4 033 комментария
    Цитата: mentirosso
    Тут речь идет о том что роботу должны быть доступны все скрипты в том числе css и js support.google.com/webmasters/answer/6066468 - как тогда правильно в DLE разрешить роботу индексации содержимого без нечего лишнего, учитывая только скрипты который сжаты хаком?

    Они и доступны. Даже при сжатии. Вы не путайте доступность файлов и индексирование файлов. Это совершенно разные понятия. В robots.txt вы не управляете доступностью файлов. В нем вы управляете тем что нужно выводить в результатах поиска на страницах поисковика, а что нет. CSS файлы не выводятся в результатах поиска в любом случае. В CSS файлах нет содержимого подлежащего индексации, индексируется контент сайта, т.е. тексты ваших новостей, а не коды его визуального отображения.
    Жалоба
  30. 0

    arthuro (Клиенты)

    22 февраля 2018 20:27 1 комментарий
    на версии 12.1 не работатет
    Жалоба
1 2 3

Информация

Комментирование публикаций доступно только пользователям имеющим действующую лицензию на скрипт. Если вы уже приобретали скрипт, то вам необходимо зайти на сайт под своим клиентским аккаунтом.

Разделы

Календарь

«    Апрель 2024    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930 

Опрос на сайте

Совершаете ли вы покупки в интернет?

Облако тегов

Cloudflare Nginx Монетизация Плагины Релизы Советы Шаблоны

Популярное