Ускорение сайта – Сжимаем CSS
Все современные 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
Плюсы такого подхода налицо:
- Не надо делать ничего в ручную;
- Достаточно сделать один раз и забыть;
- Можно оставить в проекте любимую структуру CSS файлов
