3 способа ускорить загрузку CSS на Вашем сайте

CSS — это уже неотъемлемый атрибут любого хорошего сайта. Использовать данную возможность просто профессиональная обязанность каждого верстальщика. Но с ростом технологии верстки данные инструкции становятся все объёмней и объёмней. А если еще и проект немаленький, с огромным количеством шаблонов, то само собой разумеется встает вопрос о сжатии CSS-файлов, точнее, каждый разработчик стремится сделать так, чтобы его страницы грузились чем можно быстрее. Для себя я выделил 3 способа сжать CSS файл с помощью PHP.

Первый и самый древний.

Способ хороший и нетрудоемкий, а главное работающий.
Добавляем к расширению файлов «.php». Теперь вызов файла css из нашей страницы будет выглядеть так:

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

В начало файла style.css.php добавляем такую строчку

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Последней строчкой файла пишем следующее:

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Все. Более ничего делать не требуется — способ 100% рабочий.

Способ 2 — редактируем только начала файлов.

Переименовываем файлы как и в первом способе.
Добавляем в начало каждого файлы следующий код:

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Способ удобней первого тем, что не нужно редактировать еще и последнюю строку файла.

Способ 3 — сложный, но удобный.
Переименовывать файл не нужно. Вместо этого создадим новый, например styles.php и включим его в шаблон

<link rel="stylesheet" type="text/css" media="screen" href="/styles.php"/>

Код файла styles.php

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* все ваши CSS файлы */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');

  ob_end_flush();
?>

Данный способ можно еще и докрутить, чтобы например передавать параметрами какие файлы вызывать и тому подобное.

Эти способы я выделил так как они самый быстрые и по-моему удобные, естественно за исключением настроек, которые мы можем сделать в .htaccess.
Мой третий пост за неделю. Интересно, насколько меня еще хватит, как думаете?!

3 способа ускорить загрузку CSS на Вашем сайте: 6 комментариев

  1. а насколько быстрее по сравнению с обычным подключением ?
    просто как то сомнительно все это
    хотелось бы график загрузки файлок при обычном добавлении и ваши примеры …

    тогда бы я и себе применил такой способ 🙂

    • Ваш комментарий чуть не стал поводом для моего следующего поста, но отвечу тут:
      берем для примера файл весом чтуь более 6кб. Первым и вторым способ они получаются примерно равны и весят по 1кб при отдаче клиенту, третьим файл весит чуть меньше 5Кб

  2. спс, если напишете планируемый пост будет здорово

    зашел на сайт и благодаря этой статье стал rss подписчиком так что будим почитывать , пишите еще 🙂

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

    • Тогда я бы посоветова Вам включить в .htaccess такую строку — это позволит сжимать и css и js и текстовый контент средствами apache

      AddOutputFilterByType DEFLATE text/html text/plain text/xml text/javascript text/css application/javascript

  4. Благодарю, за советы. При новых алгоритмах ранжирования, каждая секунда дорога.

Обсуждение закрыто.