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

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

celsoft 8 марта 2010 Советы 39 343
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" />

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

Комментарии

  1. 2

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

    8 марта 2010 05:15 9 комментариев
    Первая, спасибо за подарок love очень полезная вещь.
  2. 1

    pahanorlando (Клиенты)

    8 марта 2010 05:41 34 комментария
    Второй :)
    Большое Спасибо!

    а можно спросить, в каком шаблоне эти строки надо поменять? спасибо)
  3. 1

    minych (Клиенты)

    8 марта 2010 06:33 17 комментариев
    pahanorlando,
    в main.tpl
  4. 1

    Red Drag (Клиенты)

    8 марта 2010 07:09 63 комментария
    А есть ли у этого побочные следствия?
  5. 1

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

    8 марта 2010 07:46 4 132 комментария
    Цитата: Red Drag
    А есть ли у этого побочные следствия?

    зависит от ваших стилей, но не должно.
  6. 1

    Red Drag (Клиенты)

    8 марта 2010 08:46 63 комментария
    celsoft,шаблон от DLETemplates,думаю ничего страшного...
  7. 1

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

    8 марта 2010 10:04 22 комментария
    celsoft,
    спасибо (=
  8. 1

    crazy-man (Клиенты)

    8 марта 2010 10:07 5 комментариев
    DLETemplates не продлили хостинг на мирохост.нет... wink
  9. 2

    Avacore (Клиенты)

    8 марта 2010 10:59 39 комментариев
    у меня че-то стили местами некорректно стали отображаться при таком способе передачи, хотя верстка у меня валидная
  10. 1

    -=DLE=- (Посетители)

    8 марта 2010 12:28 9 комментариев
    Спасибо, возьму на заметку! lol
  11. 1

    razer85 (Клиенты)

    8 марта 2010 12:49 35 комментариев
    спасибо полезная статья
  12. 1

    ATHF (Клиенты)

    8 марта 2010 14:17 33 комментария
    celsoft, можно ли так сжимать js файлы?
  13. 1

    razer85 (Клиенты)

    8 марта 2010 14:23 35 комментариев
    ATHF,
    в скрипте есть такая возможность
  14. 0

    ATHF (Клиенты)

    8 марта 2010 14:27 33 комментария
    Это если стандартные скрипты, а если собственные?
  15. 0

    pahanorlando (Клиенты)

    8 марта 2010 16:26 34 комментария
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    {headers}
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
    <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>
    </head>
    <body>{AJAX}


    a меня так в шаблоне написано, что мне надо заменить?
  16. 0

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

    8 марта 2010 16:31 7 комментариев
    Цитата: Avacore
    у меня че-то стили местами некорректно стали отображаться при таком способе передачи, хотя верстка у меня валидная

    Если у вас валидный шаблон - это не значит что валидный файл стилей. Он проверяется отдельно на валидность.

    pahanorlando,
    <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/engi
    ne.css" />

  17. 1

    xoxmalv (Клиенты)

    8 марта 2010 17:35 41 комментарий
    После таво как поставил поивилась в php логе следушая ошибка:

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


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

    Какие идеи? tongue
  18. 1

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

    8 марта 2010 18:09 10 комментариев
    xoxmalv,
    мабыть if ( isset($_GET['charset']) ) {

    ци if ( @$_GET['charset'] ) {
  19. 0

    xoxmalv (Клиенты)

    8 марта 2010 18:20 41 комментарий
    bud77,

    Неасоба понял на каком язике ты пишеш :)
  20. 0

    Avacore (Клиенты)

    8 марта 2010 20:58 39 комментариев
    Цитата: kangalexey
    Если у вас валидный шаблон - это не значит что валидный файл стилей. Он проверяется отдельно на валидность.

    css так же валидный

    Получается вот что: при обычном способе соединения со стилями все отображается корректно, а вот при описаном в статье все работает криво, местами не воспринимает некоторые значения стилей, например: em и т.д. все баги долго перечислять, я это дело Firebug'om вылавливаю и лечу...
  21. 0

    xoxmalv (Клиенты)

    8 марта 2010 21:31 41 комментарий
    А при чом тут валидность или нет css же просто жимаются... и что за ошибка в 158 строке хотелось ответ услишить от Celsofta... :)
  22. 0

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

    9 марта 2010 00:13 4 132 комментария
    PHP Notice это не ошибка, а уведомление, если вы не хотите видеть в логах уведомления, то отключите их вывод и генерацию в php.ini
  23. 0

    Avacore (Клиенты)

    9 марта 2010 18:24 39 комментариев
    xoxmalv, валидность имела смысл т.к. я пару багов из шаба убрал и все нормально заработало
  24. 0

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

    9 марта 2010 18:26 32 комментария
    Кому интересно вот как выглядит CSS сжатый и не сжатый:

    1) Не сжатый: https://dle-news.ru/templates/DLEoffsite/css/style.css (7531 байт)

    2) Сжатый: https://dle-news.ru/engine/classes/min/index.php?f=/templates/DLEoffsite/css/style.css (6918 байт)


    Вопрос:
    Очень хотелось бы разобрать вот эти две строчки:

    1) <script type="text/javascript" src="/engine/classes/min/index.php?charset=windows-1251&амр;g=general&амр;1"></script>

    2) <link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?charset=windows-1251&амр;f=/templates/DLEoffsite/css/style.css,/templates/DLEoffsite/css/engine.css&амр;1" />



    1) Зачем вот это: charset=windows-1251 ?

    2) Какая разница между f= и g= ?

    3) Почему не амперсант ( & ), а его html сущность: &амр; ?

    4) Что за цифра: 1 ?

    5) И интересно, почему написано general, а не general.js ?

    6) При написании комментариев на этом сайте, в браузере Опера (Версия:
    10.10, Сборка: 1893), если нажать на выбор цвета для текста, то последние (нижние) кубики с цветом в два раза больше, чем остальные вверху (в других браузерах не проверял)

    Заранее спасибо за ответы winked
  25. 0

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

    9 марта 2010 20:45 4 132 комментария
    Цитата: WWW.ZEOS.IN
    Кому интересно вот как выглядит CSS сжатый и не сжатый:

    1) Не сжатый: https://dle-news.ru/templates/DLEoffsite/css/style.css (7531 байт)

    2) Сжатый: https://dle-news.ru/engine/classes/min/index.php?f=/templates/DLEoffsite/css/style.css (6918 байт)

    неверно считаете, в браузер отдаются Gzip архивы, а вы видите уже нормальный файл, т.к. браузер его распаковывает автоматически, в реальности же при сжатии вы получили файл размеров менее 2KB
    Цитата: WWW.ZEOS.IN
    1) Зачем вот это: charset=windows-1251 ?

    кодировка файла, т.к. в нем может содержаться например русский текст
    Цитата: WWW.ZEOS.IN
    2) Какая разница между f= и g= ?

    огромная, g это не указание файла, это указание название внутренней группы файлов
    Цитата: WWW.ZEOS.IN
    3) Почему не амперсант ( & ), а его html сущность: &амр; ?

    валидность еще никто не отменял
    Цитата: WWW.ZEOS.IN
    4) Что за цифра: 1 ?

    время жизни кеша, до следующей версии
    Цитата: WWW.ZEOS.IN
    5) И интересно, почему написано general, а не general.js ?

    потому что это не название файла, а название группы.
  26. 0

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

    10 марта 2010 08:15 3 комментария
    А будет ли корректно работать сжатие, если указывать media?
    <link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/reset.css" media="screen, projection" />
    <link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/css/print.css" media="print" />

    UPD: Глупый вопрос, да. Проверил, все в порядке. Спасибо, полезная фича.
  27. 0

    ATHF (Клиенты)

    10 марта 2010 14:02 33 комментария
    Подскажите можно ли сжать дополнительный (не от dle) js файл?
  28. 0

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

    10 марта 2010 15:59 4 132 комментария
    Цитата: ATHF
    Подскажите можно ли сжать дополнительный (не от dle) js файл?

    да можно
  29. 0

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

    11 марта 2010 17:02 32 комментария

    WWW.ZEOS.IN
    Кому интересно вот как выглядит CSS сжатый и не сжатый:
    1) Не сжатый: https://dle-news.ru/templates/DLEoffsite/css/style.css (7531 байт)
    2) Сжатый: https://dle-news.ru/engine/classes/min/index.php?f=/templates/DLEoffsite/css/style.css (6918 байт)

    celsoft
    неверно считаете, в браузер отдаются Gzip архивы, а вы видите уже нормальный файл, т.к. браузер его распаковывает автоматически, в реальности же при сжатии вы получили файл размеров менее 2KB

    Супер, фантастика tongue


    WWW.ZEOS.IN
    1) Зачем вот это: charset=windows-1251 ?

    celsoft
    кодировка файла, т.к. в нем может содержаться например русский текст


    WWW.ZEOS.IN
    2) Какая разница между f= и g= ?

    celsoft
    огромная, g это не указание файла, это указание название внутренней группы файлов


    WWW.ZEOS.IN
    4) Что за цифра: 1 ?

    celsoft
    время жизни кеша, до следующей версии


    WWW.ZEOS.IN
    5) И интересно, почему написано general, а не general.js ?

    celsoft
    потому что это не название файла, а название группы.

    Хотелось бы, чтобы всё это было расписано в документации к двигателю.
    Я так, например, и не понял, что за группы файлов и как мне сжимать javascript и какое еще время жизни кеша до следующей версии можно указывать или только 1 ?



    WWW.ZEOS.IN
    3) Почему не амперсант ( & ), а его html сущность: &амр; ?

    celsoft
    валидность еще никто не отменял

    Если я буду указывать просто обычные амперсанты ( & ) всё будет правильно работать?

    *************************

    javascript сжимать так:
    было:
    <script type="text/javascript" src="/путь/showhide.js"></script>

    сделать:
    <script type="text/javascript" src="/engine/classes/min/index.php?f=/путь/showhide.js"></script>

    Правильно я написал?

    Заранее спасибо за ответы winked

    *************************

    И еще один баг:
    Написал данный комментарий и когда выбираю быстрое редактирование, то не работают все кнопки редактора, текст сделать жирным так и не вышло сделать. А в полном редактировании работает. А также когда в быстром редактировании выбираешь смайлик, то он не вставляется, а просто кидает вверх страницы :(

    А еще если выбрать быстрое редактирование, то под сайтом появляется пустое белое пространство высотой где-то 700 пикселей.

    Opera 10.10
  30. 0

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

    11 марта 2010 21:01 4 132 комментария
    Цитата: WWW.ZEOS.IN
    Если я буду указывать просто обычные амперсанты ( & ) всё будет правильно работать?

    зачем?
    Цитата: WWW.ZEOS.IN
    javascript сжимать так:
    было:
    <script type="text/javascript" src="/путь/showhide.js"></script>

    сделать:
    <script type="text/javascript" src="/engine/classes/min/index.php?f=/путь/showhide.js"></script>

    Правильно я написал?

    Правильно
    Написал данный комментарий и когда выбираю быстрое редактирование, то не работают все кнопки редактора, текст сделать жирным так и не вышло сделать. А в полном редактировании работает. А также когда в быстром редактировании выбираешь смайлик, то он не вставляется, а просто кидает вверх страницы :(

    А еще если выбрать быстрое редактирование, то под сайтом появляется пустое белое пространство высотой где-то 700 пикселей.

    нет таких проблем на сайте, я не вижу ни в одном браузере
1 2 3

Информация

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

Разделы

Календарь

«    Декабрь 2024    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

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

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

Облако тегов

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

Популярное