Ускорение сайта – Сжимаем CSS

admin

8 лет назад

Все современные CMS работают с использованием шаблонов. Как правило, при разработке шаблона удобно пользоваться набором CSS фалов (reset.css, typography.css, main.css, system.css и т.д.) но вот объединить их в один и сжать ни как не получается, потому что постоянно что-то меняется, переделывается, допиливается и т.д. Тем временем очень хочется чтобы сайт работал быстро!

Способы ускорения:

Объеденить все CSS файлы в один;
Убрать лишнее – комментарии, табы, пробелы;
Сжать в GZIP;
Прописать заголовки для кеширования браузером.

Статический способ

Самый простой и рекомендуемый для тех сайтов на которых не потребуются изменения таблицах стилей. Первый пункт делается вручную, далее идем на http://www.cleancss.com – чистим код. Потом с помощью консоли сжимаем полученный CSS:

gzip -c styles.css -> styles.css.gz

И наконец настраиваем web-сервер:

Если это nginx:

gzip_static on;

Если это apache:

AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

<FilesMatch .*\.css.gz$>
ForceType text/css
Header set Content-Encoding: gzip
Header set Cache-control: private
</FilesMatch>

Динамический способ (на лету)

И так по порядку, очистить CSS и объеденить в один файл можно с помощью PHP скрипта:

<?php
class jCSS
{
private $_path;
private $_css;

public function __construct($include) {
$this->_path = dirname(__FILE__);
$this->_css = $include;
}

public function render()
{
ob_start();
foreach ($this->_css as $file)
{
$cssFile = $this->_path.DIRECTORY_SEPARATOR.$file;
if (file_exists($cssFile)) include($cssFile);
}
$ok = ob_get_contents();
ob_end_clean();
header(‘Content-type: text/css’);
header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
echo $this->compress($ok);
}

public function compress($buffer)
{
$buffer = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $buffer);
$buffer = str_replace(array(“\r\n”, “\r”, “\n”, “\t”, ‘ ‘, ‘ ‘, ‘ ‘), ”, $buffer);
$buffer = str_replace(‘{ ‘, ‘{‘, $buffer);
$buffer = str_replace(‘ }’, ‘}’, $buffer);
$buffer = str_replace(‘; ‘, ‘;’, $buffer);
$buffer = str_replace(‘, ‘, ‘,’, $buffer);
$buffer = str_replace(‘ {‘, ‘{‘, $buffer);
$buffer = str_replace(‘} ‘, ‘}’, $buffer);
$buffer = str_replace(‘: ‘, ‘:’, $buffer);
$buffer = str_replace(‘ ,’, ‘,’, $buffer);
$buffer = str_replace(‘ ;’, ‘;’, $buffer);
return $buffer;
}
}

$css = new jCSS(array(‘base.css’,’grid.css’,’typography.css’,’_styles.css’));
$css->render();
?>

Что этот класс делает и как им пользоваться. Копируем код и кладем его в папку с CSS файлами. При создании экземпляра класса jCSS перечисляем наши файлы которые надо объединить и сжать. Подключается этот файл как обычный CSS прямо в шаблон.

Далее настраиваем сервер:

для nginx это будет деректива

gzip on;

Описание директивы gzip для nginx

для Apache конфигурируем mod_deflate

Описание mod_deflate

Плюсы такого подхода налицо: