Оптимизация загрузки 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()-@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 тем лучше.

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

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

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы

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 сайтов...