» » Сжатие CSS и яваскрипт в CMS DLE

Сжатие CSS и яваскрипт в CMS DLE

Сжатие CSS и яваскрипт в CMS DLEСжатие CSS и яваскрипт в CMS DLE

  1. Сжатие файлов CSS и яваскрипт
  2. Встроенный компрессор кода в CMS DLE
  3. СжатЫе файлы (результат сжатия)
  4. Gzip-сжатие (архивирование) файлов

Сжатие файлов CSS и яваскрипт

В Сети полным-полно онлайн компрессоров и декомпрессоров. Они прекрасно сжимают и форматируют всевозможное файло. Совершенно не сложно одноразово сжать или разжать файл стилей или яваскрипт. Но, если потребуется периодическое редактирование сжатого файлика – начинаются сплошные нервы и суета. Теряется драгоценное время и авторское комментирование кода.

Сжатый код проблематично править. Сжатый текст трудночитаем. Декомпрессия сжатого файла утешает мало и ясности в тему не добавляет. Потому что, при сжатии кода, все авторские пояснения к нему – накрываются «медным тазом». За кажущейся простотой файловой компрессии и декомпрессии, просматривается существенный недостаток этой процедуры – потеря «этикеток», сделанных заметок и комментариев. Приходится изгаляться – «ныкать» и вечно хранить исходники сжатых файлов. Дурдом…

Мои любимые онлайн– компрессоры и декомпрессоры:
CSS Compressor
Format CSS Code
Compress javascript
online code beautifier
Beautify javascript or HTML

Встроенный компрессор кода в CMS DLE

В движке DLE имеется полноценный встроенный компрессор кода для системного сжатия файлов перед их отправкой потребителю. Он автоматически жмёт и прессует файлы стилей (.css) и яваскрипт (,js). По-умолчанию, сжатие кода в CMS DLE отключено. Подключение производится в секции head главного файла шаблона – main.tpl. Подключение встроенного компрессора решает все проблемы со сжатием и разжатым файлов. После подключения встроенного компрессора кода, в CMS DLE – движок начинает самостоятельно сжимать всё файло при его отправке потребителю.

Встроенный компрессор DLE – это песня. Отныне, файлы стилей и скриптов находятся в шаблоне сайта в несжатом форматированном виде, а на компьютер пользователя они отправляются уже после сжатия на сервере. Это позволяет существенно экономить трафик и ускорять загрузку страниц сайта. И, самое главное – встроенный компрессор DLE бережёт нервы верстальщика, обеспечивая ему спокойное комментирование и форматирование кода. Единственное неудобство – приходится чистить кэш скрипта DLE и браузера после редактирования файлов шаблона. К побочным эффектам сжатия файлов на сервере относится увеличение нагрузки на процессор хостера.

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

По-умолчанию, внешние файлы стилей (css) подключены в шаблоне CMS DLE, в хедере его главного файла – main.tpl. В секции head (между тегами head) находится строки:
<link rel="stylesheet" type="text/css" href="{ТНЕМЕ}/css/style.css" />
<link rel="stylesheet" type="text/css" href="{ТНЕМЕ}/css/engine.css" />
Для включения сжатия этих CSS-файлов,
вышеуказанные строки заменить на:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?charset=windows-1251&amp;f={THEME}/style/styles.css,{THEME}/style/engine.css&amp;15" />

Стили будут автоматически объединены и сжаты.
В браузер будут отдаваться уже сжатые файлы.

Пояснение к строке кода:

{THEME}/style/styles.css (через запятую)
{THEME}/style/engine.css
Пути к сжимаемым файлам CSS. Файлов стилей можно объединять, сколько годно. Если сжимаемый файл стилей находится за пределами шаблона, установленного по-умолчанию – тогда путь к файлу указывается от корня сайта.
charset=windows-1251&amp
Кодировка для файлов, содержащих кириллицу. Необязательный параметр. Если русских буквей в сжимаемом коде не наблюдается, эту часть можно не писать.
&amp;15
Количество дней хранения сжатого файла в кеше браузера. Необязательный параметр.

Сокращение строки подключения:

При сжатии, указанные файлы стилей объединяются движком. Есть смысл объединение файлов сделать самому и все стили css записать в один файл. Строка подключения для сжатия одного файла станет короче:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?charset=windows-1251&amp;f={THEME}/style/styles.css&amp;15" />

Убираем необязательный параметр &amp;15 (срок хранение сжатого файла в кэше браузера):
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?charset=windows-1251&amp;f={THEME}/style/styles.css" />

Убираем необязательный параметр charset=windows-1251&amp для файлов, содержащих русскоязычный текст:
<link rel="stylesheet" type="text/css" href="/engine/classes/min/index.php?f={THEME}/style/styles.css" />

Сжатие файлов яваскрипт в шаблоне CMS DLE

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

<script type="text/javascript" src="/engine/classes/min/index.php?charset=windows-1251&amp;f={THEME}/js/libs.js&amp;7"></script>

СжатЫе файлы (результат сжатия)

Интересно, как выглядит сжатый файл? Посмотреть его содержимое не так-то просто. Если стандартно (CTRL + S) сохранить страницу сайта на локальный компьютер то, в папке с сохранёнными файлами, сжатых – не окажется. Придётся залезать в кэш браузера.

Работа с кэшем браузеров – нудное занятие. Браузеры шифруются. Бродить по кэшу без путеводителя бесполезно. Ведут в зашифрованное хранилище пути, вида: C:\Пользователи\Имя учётной записи\AppData\Local\Yandex\YandexBrowser\User Data\Default\Cache

Выручает Мозилла.
– ввести в адресную строку: about:cache
– прокрутить открывшееся окно до раздела: disk
– в разделе disk (в самом низу) нажать ссылку: List Cache Entries
– в открывшемся окне найти адрес своего файлика и кликнуть по нему
– в открывшемся окне кликнуть по ссылке в строке: key
– на экране откроется к прочтению содержимое файла!
Прим. Перед началом работы – почистить кэш браузера.
Поиск по странице (Ctrl + F) – выполнять по имени файла.

Более простой и надёжный способ увидеть код сжатого css- или ява-скрипт файла – открыть в любом браузере исходный текст страницы и щёлкнуть по ссылке, ведущей на файл. Браузер немедленно отобразит на экране искомое содержимое.

Gzip-сжатие

Gzip-сжатие – архивирование файлов при их пересылке по Сети. Gzip-сжатие – упаковка файлов на сервере в Gzip-архив перед отправкой в браузер. После распаковки браузером полученного Gzip-архива – файлы приобретают прежний вид. Если файл был предварительно сжат на сервере компрессором DLE – он запакуется и распакуется в сжатом виде. Если файл НЕ! был предварительно сжат на сервере компрессором DLE – он запакуется и распакуется в НЕ! сжатом виде.

Это две большие разницы,
или, как говорят в Одессе –
четыре маленькие.

Google PageSpeed это понимает.
Исходники: dle-news.ru, pafnuty.name

Ключевые слова статьи: сайт интернет компьютер

Поделиться ссылкой на статью в социальной сети, добавить в избранное или распечатать:

Добавление комментария

Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив