CSS сокращение для быстрой загрузки / меньшая пропускная способность

9

Стоит ли сжимать CSS / удаление неиспользуемых правил для конкретной страницы с точки зрения пропускной способности, или мы можем полагаться на кэширование (заголовки / последние изменения), чтобы устранить эти издержки в открытом доступе?

ура

Кроме того, удачи всем с бета-версией!

optimization css bandwidth

— Эйден Белл
источник

8

Уменьшение размера файлов, безусловно, уменьшит пропускную способность и сократит время загрузки страницы. Когда пользователь впервые заходит на ваш сайт, у него ничего не будет кэшироваться, и для большинства сайтов посетители впервые составляют большую часть трафика.

Кроме того, убедитесь, что у вас включено сжатие GZIP. Это значительно уменьшит пропускную способность.

— Мэтью Шенли
источник

1

Дело в том, что если вы уменьшаете размер файла на одной странице, выгружая его в уникальный или встроенный CSS на других страницах, вы просто сводите на нет преимущества кэширования. Лучше всего сделать один шаг вперед, чтобы предоставить своим пользователям отличный опыт на страницах 2-Х. Итак, сделайте свой CSS максимально чистым. Объедините кратные в один. Но не создавайте избыточного уникального кода, чтобы (немного) уменьшить одноразовое попадание.

— bpeterson76

2

Я не думаю, что это либо. Уменьшение размера файла поможет пользователю при первом доступе к файлу. Кэширование поможет при их втором посещении.

— jessegavin
источник

2

Существует гораздо больше потенциальных мест для оптимизации, которые будут иметь большее влияние ...

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

Избыточное смещение в исходном коде CSS при первой загрузке таблиц стилей будет незначительным. Кэширование должно решить эту проблему с тех пор.

— Эван Плейс
источник

1

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

— Джейсон
источник

Например, основной файл theme.css, где каждая страница использует только около 30% правил ... но сочетание может привести к тому, что разделить исправление будет совсем немного.

— Эйден Белл

0

Я подозреваю, что это зависит от динамики вашего сайта. Если у вас много постоянных посетителей и не так много новых посетителей, кеширования вполне достаточно. Однако если у вас много новых посетителей (и особенно если вы хотите произвести хорошее первое впечатление), я думаю, вам следует максимально уменьшить размер вашего CSS.

— Трэвис Норткатт
источник

0

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

Помните, что сжатие CSS - самый эффективный способ ускорить загрузку CSS. Разница между одним файлом со всем внутри и другим с несколькими удаленными ненужными блоками незначительна после gzip.

— DisgruntledGoat
источник

0

Даже если производительность снижается за счет удаления неиспользуемого CSS для каждой страницы (и я вполне уверен, что кеширование перевесит это, если вы не говорите о радикально разных страницах), вам необходимо учитывать время обслуживания, необходимое для этого. , Если вы не Google, вероятно, не стоит тратить несколько дней на жизнь сайта, чтобы сэкономить каждому пользователю одну десятую секунды.

Многое из этого связано с профилем использования вашего сайта. Если вы действительно липкий, то кеширование выигрывает. Однако, если у вас высокий показатель отказов, вам может быть лучше с оптимизированным CSS (или тратить время на оптимизацию CSS, делая ваш сайт более липким!).

Один из подходов, который вы можете использовать, если у вас есть разметка для конкретной страницы, - это иметь общий CSS-файл для всего сайта и встраивать правила для каждой страницы в заголовок HTML-документа.

— JasonBirch
источник

0

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

во-первых: используйте htaccess, чтобы сказать apache, что нужно обрабатывать все css-файлы как php-скрипты и сжимать выходные данные типа text / css

в .htaccess AddHandler php5-cgi .css AddType text / css .css AddOutputFilterByType DEFLATE text / css

второе: использовать буферизацию вывода с функцией обратного вызова, чтобы минимизировать код css перед началом загрузки, а также установить время истечения, чтобы файл кэшировался

в вашем файле CSS

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

В-третьих: прибыль?

— Дезинтегратор
источник