PHP CSS - быстрая / хорошая практика для загрузки внешнего файла или эха в голову? - PullRequest
Новая
       11

PHP CSS - быстрая / хорошая практика для загрузки внешнего файла или эха в голову?

2 голосов
/ 14 января 2011

Хотелось бы узнать, лучше ли

A) включает внешние CSS-файлы, используя <link> или

B) echo / flush / print CSS прямо в <head>.

Лично мне нравится вариант B, поскольку он позволяет

  • удаление комментариев / минирование
  • с использованием css, расположенного над корневым каталогом
  • сжатие нескольких CSS-файлов = меньше HTTP-запросов

Прежде чем применить это на практике, есть ли серьезная причина, по которой я должен (не)?

Ответы [ 6 ]

5 голосов
/ 14 января 2011

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

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

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

2 голосов
/ 14 января 2011

Если вы планируете веб-сайт с очень большим трафиком, то выберите B (как прокомментировано ниже, это не очень хорошая идея, если ваш html почти никогда не меняется, как на главной странице Google).Мне лично нравится A, так как он позволяет вам сохранить стиль подальше от HTML и позволяет использовать конкретные таблицы стилей для разных медиа или даже легко переключаться с одного на другой.Также его легко поддерживать (с версиями) и расширять.

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

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

my 5cents.

1 голос
/ 14 января 2011

Короткий ответ: вы не должны использовать метод B. Вы можете прочитать ниже, почему я думаю, что вы не должны делать это таким образом.

Размер файла основного HTML-файла должен быть как можно меньше, посколькуневозможно кэшировать этот файл (в большинстве случаев из-за его динамического характера).

Не следует выполнять преждевременную оптимизацию при локальном тестировании.Но когда вы развертываете свой код, вы должны минимизировать CSS и объединить все файлы в один файл.Также не забудьте дать CSS-файлу заголовок с истекшим сроком действия в будущем (кеширование очень важно).

рекомендаций от Yahoo !.(большая часть моего ответа основана на этом чтении), как ускорить ваш сайт и очень хорошо читается.

1 голос
/ 14 января 2011

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

Если вы беспокоитесь о минимизации таблицы стилей, вы можете сделать это с помощью ряда инструментов - см. Любые рекомендации по минимизатору CSS? для множества рекомендаций.

1 голос
/ 14 января 2011

Лучше всего использовать опцию (A) для целей кэширования, НО не бойтесь, вы также можете воспользоваться преимуществами варианта B! Просто назовите свой CSS-файл с расширением php, а затем включите его с тегом ссылки. Затем PHP проанализирует этот файл перед отправкой в ​​браузер, чтобы вы могли удалить комментарии / свернуть его или включить файл css, который находится где угодно на вашем сервере. Что касается вашего третьего пункта, если браузер кэширует его, то это 2 запроса в первый раз, а затем только 1 запрос во второй раз, поэтому в целом вы получаете меньше запросов.

0 голосов
/ 14 января 2011

Правильный ответ зависит от цели страницы и от того, как структурированы стили.

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

У вас также редко бывает только один файл CSS,общей настройкой может быть: файл сброса css файл template.css с общим стилем сайта, общим для всех страниц, и файл css на страницу, определяющий конкретные правила для страницы, которые не нуждаются в кэшировании файла IEfix css для совместимости с Internet Explorer

файлы css reset, template.css и IRfix являются хорошим кандидатом для минимизации как один внешний файл, который будет кэшироваться.

Файл css на странице является хорошим кандидатом для включения втег, так как он не предназначен для повторного использования, а стоимость HTTP-запроса обычно выше, чем временная стоимостьПереданные байты.

Если у вас есть страницы с определенным стилем, не распространяемые по всему сайту, вставьте все.

...