Оптимизация загрузки CSS и JavaScript на странице

Автор: Роман Чернышов    Опубликовано: 25 февраля 2013

Сегодня речь пойдет о небольшой оптимизации загрузки файлов стилей и скриптов на странице веб-сайта. Пожалуй любой сайт включает в себя несколько файлов стилей и несколько файлов JS скриптов, на загрузку которых уходит как драгоценное время, так и ресурсы сервера отдающего статику. А что делать если файлов стилей и скриптов несколько десятков? (на моей памяти их бывало с пол сотни). Предлагаю рассмотреть мой вариант оптимизирования (мой не в смысле — мой мегауникальный, а в смысле тот, которым пользуюсь я, придумал и написал сам, но и без меня выдумщиков хватает).

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

Пример подключения стилей и JS:

<script src="js/.alljs.php" type="text/javascript"></script>
<link href="css/.allcss.php" rel="stylesheet" type="text/css" />

Листинг скрипта .allcss.php собирающего стили воедино

// посылаем заголовок браузеру, сообщая что это text/css
header("Content-type: text/css; charset: UTF-8");
 
$url='css'; 
$crc=md5($url); //название файла кеша
$modif=time()-@filemtime("cache/$crc"); //узнаем время кеша
 
  if($modif<60000) { //ести кеш не устарел
	include ("cache/$crc"); //подгружаемся из кеша
  } else {
	ob_start ();  //иначе, собираем новый файл стилей из кучи отдельных файлов лежащих в папке со скриптом
        $files1 = scandir('./'); //содержимое папки
	foreach($files1 as $file) { //перебор всех файлов стилей
		if($file=='.'||$file=='..'||strpos($file, '.php')||!strpos($file, '.css')) continue;
		echo file_get_contents($file); //вывод в буфер
	       }
	$cache = ob_get_contents();
	ob_end_clean (); //очистка буфера
	echo $cache; // вывод в файл(браузер)
 
	$fp = @fopen ("cache/$crc", "w"); //сохраняем кеш
	@fwrite ($fp, $cache);
	@fclose ($fp); 
   }

Аналогичным методом организуем работу по сборке JavaScript в единый файл. Добавляем ко всему вышеописанному кеширование браузером, что еще придаст пару ms скорости. К скрипты на PHP можно добавить еще оптимизацию в виде вырезания лишних пробелов, комментариев и табуляции из файлов стилей и JS, уменьшив тем самым их вес и при этом сохранив читаемость для самого разработчика. Для гурманов — можно обфусцировать содержимое файлов до запредельной не узнаваемости, защитив их таким образом от плагиата и сторонних глаз.

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

При объединении во едино, мы снижаем кол-во запросов браузера к серверу, увеличиваем скорость загрузки, снижаем нагрузку на сервер. По разным тестам на разных моих проектах, такая оптимизация дала прирост скорости загрузки страницы от двух до четырех раз. При этом нагрузка на сервер от дополнительной работы PHP скрипта не возросла, очевидно из-за кеширования.

СЕО. По мимо скорости, такой метод полезен для СЕО, т.к. чем меньше на странице всевозможных вызовов JS скриптов, самих скриптов и CSS тем лучше.

PHP     css, js, php