большая таблица стилей или меньшая версия с запросами http

Question

Недавно я внес изменения, чтобы включить в свой CSS строки URI данных base64 вместо запросов изображений к внешним файлам изображений.

Проблема, которую это вызвало, заключается в увеличении размера таблицы стилей без данных uri от 7 КБ до 200 КБ + с ними. Однако у меня значительно меньше http запросов.

Это нормально - подход больших таблиц стилей лучше, чем с несколькими запросами изображений?

Answer 1

Сравните размер таблицы стилей с общим размером изображений, которые вы base64'd.Если он такой же или меньше, использование URI base64 занимает меньше места (и время загрузки).Как правило, один большой запрос предпочтительнее нескольких меньших запросов, если извлекаемые данные идентичны и указанные запросы не являются параллельными.

Answer 2

Как насчет того, чтобы вы держали одну таблицу стилей в верхней части документа (в заголовке), которая содержит все, кроме ваших данных base64. Это быстро загрузится, и тело документа начнет загружаться / отображаться с этими начальными стилями.

Затем создайте вторую таблицу стилей внизу документа (прямо перед закрывающим тегом / телом), которая содержит изображения в виде данных base64. Таким образом, когда это начинает загружаться, по крайней мере, контент виден и в основном структурирован так, как вы этого хотите.

Беспроигрышная ??

Удачи!

Answer 3

200Kb довольно большой для таблицы стилей. Убедитесь, что вы подаете его сжатым, если вы еще этого не сделали. Если некоторые / большинство изображений строк данных не используются на большинстве страниц, лучше разделить их на отдельную таблицу стилей и включить их только на страницы, где это необходимо.

Answer 4

Меньше запросов, тем лучше. Однако хостинги ограничивают скорость соединения определенного потока загрузки. Таким образом, если ваш файл размером 200 КБ можно загрузить за 2 секунды, возможно 2 файла размером 100 КБ можно загрузить за 1 секунду. Остальное на тебе.

ДОБАВЛЕНО : Вы не можете получить никакого уменьшения размера, используя сжатие. Данные вашего изображения не могут быть сжаты.