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

Author Роман Чернышов    Category PHP     Tags , , Комментариев 2 Дата 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 тем лучше.

2 комментария to “Оптимизация загрузки CSS и JavaScript на странице”

  • Юрий 12.04.2018 в 7:28 дп

    gulp, wepback. не, не слышал…

    у такого способа много минусов:

    — при разработке в дев режиме сложно обновить файлы (надо удалять этот кеш)
    — в прод режиме даже при обновлении файлов — у юзеров останется старая неактуальная версия, и если html менялся — все может сьехать.
    — кеш обновляется зачем то каждые 10 мин, даже если ничего не менялось.
    — и самый эпик — файлы склеиваются порядке по алфавиту, то есть надо мухлевать с названиями чтобы склеились в нужном порядке.
    — если в директории есть не актуальные css файлы — они тоже склеятся.
    — нужно все ассеты держать в одной папке и свои файлы и фреймворк и библиотеки…
    — для каждого запроса css/js запускается php.

    из плюсов пожалуй только то что это php-only и обновляется хоть как то автоматом.
    но если у вас http v2 то вся эта бодяга не нужна..

    чтобы не только хейтить — могу предложить пару улучшений:
    вместо echo file_get_contents и include лучше использовать readfile он сразу читает и в поток выводит.
    лучше добавить заголовки для времени кеширования этого склееного файла.

    • Роман Чернышов 12.04.2018 в 1:19 пп

      Добрый день, спасибо за конструктивную критику и рекомендации!

      Да, на момент написания поста(2013 год), я действительно не знал про webpack(он только вышел) и gulp(который вышел позже).

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

      Безусловно gulp и webpack, стоит по возможности применять в своих проектах, эти технологии имеют шикарный функционал который позволит увеличить продуктивность любого веб-разработчика. Но они также имеет некоторые недостатки, в глазах новичков (на кого собственно и рассчитан пост):
      — не на каждый хостинг можно установить. Gulp и webpack требует NodeJS, а он не везде есть, а самому часто установить нельзя или сложно (для новичка);
      — не подходит новичкам в веб-разработке;
      — сначала принцип работы с CSS-файлами, изображениями и другими не JS ресурсами кажется запутанным;
      — документация могла быть и лучше;
      — часто изменяется, уроки устаревают.

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

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

Последние вопросы
Меню

Archive

Портфолио Все работы


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