Очень часто бывает необходимость запустить определённые JS-скрипты только лишь на определённых страницах нашего сайта. Либо только для определённых IP-адресов. К примеру, определённая JavaScript-библиотека требуется только лишь для одного раздела, либо даже для одной страницы. И загружать её на каждой странице сайта вообще нет смысла, ведь наша задача - максимально быстро отобразить контент для пользователя. И каждый лишние 100 Кб требуют дополнительного времени для загрузки. Особенно это будет актуально для пользователей с медленным интернетом (например, через 3G, либо с мобильных устройств с нестабильным Интернетом). Всё это можно сделать с помощью PHP, причём эта задача делается довольно просто и она очень эффективна для многих сайтов.
С этой задачей коррелирует ещё одна - загрузка стилей также выборочно. Ведь часто при установке библиотек в комплекте идут стили. Типичный пример - установка слайдера для главной страницы сайта, либо карусели с примерами работ. Любая библиотека подобного типа потребует установки стилей и скриптов, причём суммарно всё это может весить в районе 200 Кб.
Итак, рассмотрим запуск скриптов и стилей для определённых страниц сайта
Чтобы, к примеру, для выбранного раздела (либо страницы) загрузить стили, в области <head> нашего сайта пишем PHP код:
<? if(preg_match("/url_нужной_страницы_или_раздела/", $_SERVER['REQUEST_URI'])) : ?>
<link rel="stylesheet" href="путь_на_отдельный_файл_стилей.css">
<? endif ?>
В примере выше мы используем PHP функцию preg_match(), которая первым параметром принимает регулярное выражение, а вторым - строку поиска. Т.е. мы в текущем URL (его мы получаем через $_SERVER['REQUEST_URI']) ищём вхождение url_нужной_страницы_или_раздела. Причём, обратите внимание на то, что косые слэши "/" - это часть регулярного выражения, а не часть URL. Т.е. регулярное выражение мы всегда вписываем между символами /. Если мы хотим указать конкретное вхождение, например, корень конкретной папки, тогда символы / нужно будет экранировать, с помощью обратной косой черты "\". Давайте рассмотрим это на примере:
<? if(preg_match("/\/folder_name\/$/", $_SERVER['REQUEST_URI'])) : ?>
<link rel="stylesheet" href="путь_на_отдельный_файл_стилей.css">
<? endif ?>
В примере выше мы используем регулярное выражение, которое подходит только для корня указанной папки (с именем folder_name). Например, https://адрес_сайта/folder_name/
Для вложенных URL это уже не подойдёт, поскольку мы используем символ $, который говорит, что последним символом должен идти конец URL. Если нам нужны вложенные URL для данной папки (например https://site.ru/folder_name/filename.html), тогда просто убираем знак $.
Вообще - регулярные выражения - это то, что я очень люблю и использую в каждом проекте. Ведь никаким иным способом мы не можем охватить нужные строки и создать нужные нам условия, подходящие под массу требуемых нам параметров. Мой любимый ресурс для тестирования регулярок - это regexr.com. Здесь можно поучиться написанию регулярных выражений, а также протестировать в реальном времени свои RegExp. Рекомендую!
Тот же самый принцип относится и к скриптам. Вот пример скрипта, который можем вызвать на определённой странице сайта (или на определённой категории). Размещаем внизу сайта, ближе или непосредственно перед закрывающим тегом <body>>:
<? if($_SERVER['REQUEST_URI'] == '/sitemap/') : ?>
<script defer src="путь_на_отдельный_файл_скриптов.js"></script>
<? endif ?>
В данном примере мы сравниваем текущий относительный URL (получаем его через $_SERVER['REQUEST_URI']) со строкой /sitemap/. Здесь мы не используем регулярное выражение и напрямую ссылаемся на конкретную папку. Этот пример также будет прекрасно работать и загрузит скрипты (причём асинхронно, благодаря атрибуту defer), только для конкретной страницы https://адрес_сайта/sitemap/
Как загрузить JS-скрипты и CSS-стили только для определённого IP-адреса
Давайте представим ситуацию, что Вы разрабатываете веб-приложение, и Вам нужно, чтобы определённый скрипт загружался только с Вашего IP-адреса. Либо ещё пример: Вы работаете с сайтом, на котором установлены куча сторонних приложений и виджетов (типа JivoSite и прочих). И эти виджеты попросту мешают Вам своими назойливыми сообщениями, всплывающими окнами и прочими надоедающими штуками. И при заходе на сайт с Вашего рабочего IP-адреса Вы не хотите их видеть, при этом, для всего остального Интернета, разумеется, они должны работать. Вот пример скрипта, который мы можем разместить в нижней части нашего проекта (вставляем IP-адрес вместо XXX.XXX.XXX.XXX):
<? if($_SERVER['REMOTE_ADDR'] !== 'XXX.XXX.XXX.XXX') : ?>
<script>
(function() {
var dopScript = "ссылка_на_скрипт_который_НЕ_нужно_показывать_с_указанного_IP.js";
setTimeout(function() {
var dopScriptElement = document.createElement('script');
dopScriptElement.setAttribute('src', dopScript);
document.getElementsByTagName("body")[0].appendChild(dopScriptElement);
},1000);
})();
</script>
<? endif ?>
Кстати, в примере выше я привожу дополнительный бонус - функцию загрузки скриптов по тайм-ауту, через 1 секунду после загрузки сайта. Это идеальный вариант загрузки для виджетов и прочего, т.к. мгновенная их загрузка совершенно не требуется, а сайт они очень перегружают большим и увесистым файлом со скриптами.
В примере я показал, как НЕ загружать скрипт с указанного IP-адреса. Ниже приведу пример, как наоборот, загрузить файл скриптов только для указанного IP:
<? if($_SERVER['REMOTE_ADDR'] === 'XXX.XXX.XXX.XXX') : ?>
<script defer src="путь_на_отдельный_файл_скриптов.js"></script>
<? endif ?>
Надеюсь, эти знания помогут в оптимизации скорости загрузки Вашего сайта. Кстати, вот отдельная статья моего блога на тему: "Скорость загрузки сайта и как её увеличить".
Удачной оптимизации! :)
Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
Web development blog!