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

Author Роман Чернышов    Category PHP     Tags , , Комментариев 0 Дата 25 Фев

optim Оптимизация загрузки CSS и JavaScript на страницеСегодня речь пойдет о небольшой оптимизации загрузки файлов стилей и скриптов на странице веб-сайта. Пожалуй любой сайт включает в себя несколько файлов стилей и несколько файлов 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()[email protected]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 тем лучше.

Оставить комментарий

Консультации

Консультант Чернышов Р.В. Зайдайте вопрос на любую из тем:
Бесплатно и без регистрации!

Задать вопрос
Все вопросы
Последние вопросы
Поиск по блогу
Категории
Архив
Новое на сайте
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...