Одна из лучших оптимизаций кода со стороны клиента - сжатие CSS & JS

Я кратко расскажу, с каким перцем и солью едят, если че, давайте вопросы )))

Получается так, что когда браузер видит какую-то ссылку на внешний файл, то он подключается и качает его.

По оптимизации можно сделать так, чтобы файл скачался один раз сразу со всеми картинками один раз на 2 недели ))))

Поехали.

1. Самой главное - это верное добавление CSS файлов, так, чтобы при генерации самой страницы Вы могли ими спокойно манипулировать.
Вот моя функция для добавление CSS файла:
[PHP]
/**
* Add CSS
*/
function add_css($content = NULL, $options = 'file') {
$css = &_static(__FUNCTION__, array());

if (!$content) { return $css; }

if (!is_array($options)) {
$options = array( 'type' => $options );
}

$options += array( 'weight' => 0, 'type' => 'file' );

if (!in_array($options['type'], array('file', 'inline'))) {
return FALSE;
}

$css[!empty($options['id']) ? $options['id'] : count($css) - 1] = array(
'content' => $content,
'type' => $options['type'],
'weight' => $options['weight']
);

return $css;
}
[/PHP]

В результате, мы в конце сможет получить список весех CSS файлов, которые должны приконектится к странице.

Далее нам нужно их всех соединить в одно, при этом сделать полную оптимизацию.
Также сделаем хитро, найдем все картинки и приклеим их в этот CSS.

Это мы будем делать как раз перед выводом CSS файла для браузера.

[PHP]
/**
* Minimize css
*/
function _aggregate_css(&$css) {
boot_module('file');

$css_hash = hash('sha256', serialize($css) . variable_get('aggregate_get_key'));
$css_file_hash = 'public://css/' . $css_hash . '.css';
$css_file_hash = file_get_path($css_file_hash, FALSE);
if (is_file($css_file_hash . '.gz')) {

$css = array(array(
'content' => $css_file_hash . '.gz', //?' . variable_get('aggregate_get_key'),
'options' => array(
'weight' => 0,
'type' => 'file'
)
));

return TRUE;
}

require_once dirname(__FILE__) . '/aggregate.inc';

$css_content = '';
foreach ($css as $style) {
if ($style['type'] == 'inline') {
$css_content .= _aggregate_css_optimizer($style['content']);
}
else if ($style['type'] == 'file') {
$css_content .= _aggregate_css_load($style['content']);
}
}


if(!$css_content = gzencode($css_content, 9)) { return FALSE; }
$css_file_hash .= '.gz';
$css_dir = dirname($css_file_hash);
if (!is_dir($css_dir)) {
if (!@mkdir($css_dir, 0777, TRUE)) { return FALSE; }
}
file_put_contents($css_file_hash, $css_content);
$css = array(array(
'content' => $css_file_hash, // . '?' . variable_get('aggregate_get_key'),
'type' => 'file',
'weight' => 0
));
}
[/PHP]

И вот сами функции с файла - aggregate.inc

[PHP]/**
* Load css file & optimize
*/
function _aggregate_css_load($file) {
if (!is_file($file)) { return FALSE; }
if (!$content = file_get_contents($file)) { return FALSE; }
$content = _aggregate_css_optimizer($content);

$css_dir = dirname($file);
$content = _aggregate_css_optimizer_image($content, $css_dir);
return $content;
}


/**
* Optimize image
*/
function _aggregate_css_optimizer_image($contents, $css_dir = '') {
if (!preg_match_all('/url\(\s*(\'?.+\'?)\s*\)/Uis', $contents, $temp)) { return $contents; }

$replaced = array();
foreach ($temp[1] as $k => $path_to_image) {
$file = trim($path_to_image, '\'');
$t = explode('.', $file);
$ext = $t[count($t) - 1];
if (!in_array($ext, array('png', 'gif', 'png', 'jpg', 'jpeg'))) { continue; }
if ($ext == 'jpg') { $ext = 'jpeg'; }
if (!$file_content = @file_get_contents($css_dir . '/' . $file)) { continue; }
$file_content = "'data:image/{$ext};base64," . base64_encode($file_content) . '\'';
$replaced[$path_to_image] = $file_content;
}

return strtr($contents, $replaced);
}

/**
* Optimize css
*/
function _aggregate_css_optimizer($contents) {
// Remove multiple charset declarations for standards compliance (and fixing Safari problems).
$contents = preg_replace('/^@charset\s+[\'"](\S*)\b[\'"];/i', '', $contents);

// Perform some safe CSS optimizations.
// Regexp to match comment blocks.
$comment = '/\*[^*]*\*+(?:[^/*][^*]*\*+)*/';
// Regexp to match double quoted strings.
$double_quot = '"[^"\\\\]*(?:\\\\.[^"\\\\]*)*"';
// Regexp to match single quoted strings.
$single_quot = "'[^'\\\\]*(?:\\\\.[^'\\\\]*)*'";
// Strip all comment blocks, but keep double/single quoted strings.
$contents = preg_replace(
"<($double_quot|$single_quot)|$comment>Ss",
"$1",
$contents
);
// Remove certain whitespace.
// There are different conditions for removing leading and trailing
// whitespace.
// @see http://php.net/manual/en/regexp.reference.subpatterns.php
$contents = preg_replace('<
# Strip leading and trailing whitespace.
\s*([@{};,])\s*
# Strip only leading whitespace from:
# - Closing parenthesis: Retain "@media (bar) and foo".
| \s+([\)])
# Strip only trailing whitespace from:
# - Opening parenthesis: Retain "@media (bar) and foo".
# - Colon: Retain :pseudo-selectors.
| ([\(:])\s+
>xS',
// Only one of the three capturing groups will match, so its reference
// will contain the wanted value and the references for the
// two non-matching groups will be replaced with empty strings.
'$1$2$3',
$contents
);
// End the file with a new line.
$contents = trim($contents);
$contents .= "\n";

// Replaces @import commands with the actual stylesheet content.
// This happens recursively but omits external files.
$contents = preg_replace_callback('/@import\s*(?:url\(\s*)?[\'"]?(?![a-z]+:)([^\'"\()]+)[\'"]?\s*\)?\s*;/', '_aggregate_css_load', $contents);
return $contents;
}
[/PHP]

Далее для браузера выводим.

Но при етом нам нужно закешировать. Код .htaccess


Сорри, что коды чуть не те, да и описано мало, времени нет ((((

Пример работы видно на сайте - http://apprus.ru

Там подключается только один файл CSS сразу со всеми картинками, которые должны быть, в результате, он один раз стянет файл размеров 100 Кб и далее совсем не будет таскать другие картинки с CSS.