СТАТИЧЕСКИЙ КОНТЕНТ ПРОТИВ ДИНАМИЧЕСКОГО КОНТЕНТА
Статическое содержимое остается неизменным на веб-страницах для всех пользователей. Владелец веб-сайта может обновить его, но после этого новый контент по-прежнему будет статичным для всех пользователей. Статическое содержимое включает такие файлы, как HTML, CSS, JavaScript, изображения и видео.
Пример статического контента — это сообщение в блоге, которое вы читаете. Поскольку статический контент не часто меняется (или не меняется вообще), его кеширование и доставка очень просты.
Статический контент одинаков для всех пользователей
Динамический контент на веб-страницах не одинаков для всех пользователей. Он настраивается для каждого пользователя на основе нескольких факторов, таких как местоположение, устройство, время дня, настройки профиля пользователя и т. Д. Динамические веб-страницы также могут изменяться на лету в зависимости от ввода пользователя. Это делает веб-сайты более интерактивными, интересными и персонализированными для каждого пользователя.
Динамический контент персонализирован для каждого пользователя
Большинство современных веб-сайтов в некоторой степени динамичны. Они используют серверные скрипты для создания всех ресурсов, необходимых для рендеринга веб-страницы. Браузер компилирует эти ресурсы, чтобы показывать каждому пользователю уникальный персонализированный контент.
Различные виды кеширования
Техника кеширования заключается в сохранении копии полученного ресурса для возврата этой копии в ответ на дальнейшие запросы. Запрос на ресурс, уже имеющийся в веб-кеше, перехватывается, и вместо обращения к исходному серверу выполняется загрузка копии из кеша. Таким образом снижается нагрузка на сервер, которому не приходится самому обслуживать всех клиентов, и повышается производительность — кеш ближе к клиенту и ресурс передаётся быстрее. Кеширование является основным источником повышения производительности веб-сайтов. Однако, кеш надо правильно сконфигурировать: ресурсы редко остаются неизменными, так что копию требуется хранить только до того момента, как ресурс изменился, но не дольше.
Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надёжности, производительности и масштабируемости веб-сайтов и веб-приложений.
Приватный кеш предназначен для отдельного пользователя. Вы, возможно, уже видели параметры кеширования в настройках своего браузера. Кеш браузера содержит все документы, загруженные пользователем по HTTP. Он используется для доступа к ранее загруженным страницам при навигации назад/вперёд, позволяет сохранять страницы, или просматривать их код, не обращаясь лишний раз к серверу. Кроме того, кеш полезен при отключении от сети.
Кеш совместного использования — это кеш, который сохраняет ответы, чтобы их потом могли использовать разные пользователи. Например, в локальной сети вашего провайдера или компании, может быть установлен прокси, обслуживающий множество пользователей, чтобы можно было повторно использовать популярные ресурсы, сокращая тем самым сетевой трафик и время ожидания.
W3 Total Cache
W3 Total Cache – мощный плагин включает несколько функций, которые могут сразу положительно повлиять на скорость вашего сайта. Поскольку он предлагает много вариантов, может показаться, что плагин сложен в использовании.
Функция, которая вас заинтересует – включение кеширования страниц. W3 Total Cache позволит сохранять и обслуживать кешированные страницы.
При тестировании скорости своего веб-сайта вы наверняка заметили рекомендацию – обслуживать сжатые страницы. Это означает, что пользователь будет запрашивать страницу сайта. Ваш сайт отвечает, отправляя gzip-версию вашей страницы. Поскольку он сжат, размер страницы уменьшается и загружается быстрее. Как только страница достигает пользователя, она распаковывается и нормально отображается.
Чтобы найти эту функцию, щелкните по Производительность >> Кэш браузера. Вы увидите включение сжатия HTTP. Выберите этот вариант, и все готово. Хотя это не самый простой плагин в использовании из-за его расширенных функций, он предлагает все необходимое для повышения скорости страницы с точки зрения кэширования.
Простое кеширование ETag
Самый простой способ кеширования статических ресурсов — использование .
Достаточно включить соответствующую настройку сервера (для Apache включена по умолчанию) — и к каждому файлу в заголовках будет даваться — хеш, который зависит от времени обновления, размера файла и (на inode-based файловых системах) inode.
Браузер кеширует такой файл и при последующих запросах указывет заголовок с ETag кешированного документа. Получив такой заголовок, сервер может ответить кодом 304 — и тогда документ будет взят из кеша.
Выглядит это так:
- Первый запрос к серверу (кеш чистый)
-
GET /misc/pack.js HTTP/1.1 Host: javascript.ru
Вообще, браузер обычно добавляет еще пачку заголовоков типа User-Agent, Accept и т.п. Для краткости они порезаны.
- Ответ сервера
- Сервер посылает в ответ документ c кодом 200 и ETag:
HTTP/1.x 200 OK Content-Encoding: gzip Content-Type: text/javascript; charset=utf-8 Etag: "3272221997" Accept-Ranges: bytes Content-Length: 23321 Date: Fri, 02 May 2008 17:22:46 GMT Server: lighttpd
- Следующий запрос браузера
-
При следующем запросе браузер добавляет : (кешированный ):
GET /misc/pack.js HTTP/1.1 Host: javascript.ru If-None-Match: "453700005"
- Ответ сервера
-
Сервер смотрит — ага, документ не изменился. Значит можно выдать код 304 и не посылать документ заново.
HTTP/1.x 304 Not Modified Content-Encoding: gzip Etag: "453700005" Content-Type: text/javascript; charset=utf-8 Accept-Ranges: bytes Date: Tue, 15 Apr 2008 10:17:11 GMT
Альтернативный вариант — если документ изменился, тогда сервер просто посылает 200 с новым .
Аналогичным образом работает связка + :
- сервер посылает дату последней модификации в заголовке (вместо )
- браузер кеширует документ, и при следующем запросе того же документа посылает дату закешированной версии в заголовке (вместо )
- сервер сверяет даты, и если документ не изменился — высылает только код 304, без содержимого.
Эти способы работают стабильно и хорошо, но браузеру в любом случае приходится делать по запросу для каждого скрипта или стиля.
Кэширование выборок из баз данных
Запросы к базе данных — наиболее распространенный пример. На основе Мemcache реализуется очень просто:
$q = mysql_query($sql);
while ($row = mysql_fetch_assoc($q)) $list[] = $row;
memcache_set('online_users', $list, 60*60);
}
return $list;
}
$list = get_online_users();
...
Запрос на получение пользователей кэшируется на 1 час
Обновление данных
Если Вы кэшируете данные, которые могут обновляться, необходимо очищать кэш после каждого обновления:
memcache_connect('localhost', 11211);
function get_user($id)
{
if ( !$data = memcache_get('user' . $id) )
{
$sql = 'SELECT * FROM users WHERE id= ' . intval($id);
$q = mysql_query($sql);
$data = mysql_fetch_assoc($q);
memcache_set('user' . $id, $data, 60*60);
}
return $data;
}
function save_user($id, $data)
{
mysql_query('UPDATE users SET ... WHERE id = ' . intval($id));
memcache_delete('user' . $id);
}
Кэширование списков
Допустим, Вы кэшируете данные каждого пользователя, как в примере, а также их списки (например, список online пользователей). При обновлении данных пользователя, Вы удаляете данные из кэша только для указанного пользователя. Но его данные могут также присутствовать в списке online пользователей, которые тоже лежат в кэше. Сбрасывать списки при каждом обновлении данных любого пользователя не эффективно. Поэтому обычно используют такой подход:
- Кэшируют списки, которые состоят только из ID пользователей.
- Для вывода списка отправляют отдельный запрос для получения данных каждого пользователя.
Реализация выглядит так:
$q = mysql_query($sql);
while ($row = mysql_fetch_assoc($q)) $list[] = $row;
memcache_set('online_users', $list, 60*60);
}
return $list;
}
$list = get_online_users();
foreach ( $list as $id )
{
$user = get_user($id);
...
}
Получим список ID пользователей и для каждого из них получим актуальные данные
Для получения данных сразу нескольких объектов можно использовать Multiget.
Трассировка
Ни один из советов выше не поможет ускорить работу вашего сайта. К сожалению, информация о кэшировании сейчас не предоставляется в DevTools, поэтому наиболее надёжный способ выяснить, какие из сценариев вашего сайта кэшируются, — использовать чуть более низкий уровень .
![Кэширование сайта [айти бубен]](https://luxe-host.ru/wp-content/uploads/e/6/7/e676f4fe085f536f71f1a36a744f1d3b.jpeg)
записывает инструментальные трассировки Chrome в течение некоторого периода времени с такой визуализацией :
Трассировка записывает поведение всего браузера, включая другие вкладки, окна и расширения, поэтому она лучше всего работает, когда выполняется в чистом профиле пользователя, с отключёнными расширениями и без открытия других вкладок браузера:
При записи вы должны выбрать, какие категории трассировать. В большинстве случаев вы можете просто выбрать набор категорий «Web developer» (Веб-разработчик), но категории можно выбрать и вручную. Важная категория для кэширования кода — .
После записи с категорией найдите фрагменты в трассировке (в качестве альтернативы вы можете ввести в поле поиска интерфейса). Эти компоненты показывают компилируемый файл и некоторые метаданные о компиляции.
При холодном запуске сценария информация о кэшировании кода отсутствует. Это означает, что сценарий не участвовал в создании или использовании данных кэша.
При тёплом запуске есть две записи на сценарий: одна для фактической компиляции (как указано выше) и одна (после выполнения) для создания кэша. Вы можете узнать последнюю, так как она имеет поля метаданных и .
При горячем запуске вы увидите запись для использования кэша с полями метаданных и . Все размеры выражены в байтах.
Для большинства разработчиков кэширование кода должно «просто работать». И работает это лучше всего (как и любой кэш), когда всё остаётся неизменным, и с использованием эвристики, которая может меняться между версиями. Тем не менее, кэширование кода имеет особенности, которые можно использовать, и ограничения, которых стоит избегать. Тщательный анализ с использованием chrome://tracing может помочь вам настроить и оптимизировать использование кэша вашим сайтом.
Перевод статьи «Code caching for JavaScript developers»
Как работает альтернативный PHP Cache
Кэши APC часто получают доступ к файлам и кодам PHP в формате, который является промежуточным кодом из проанализированных и скомпилированных сценариев PHP. Кэшированные коды операций находятся в разделяемой памяти и обслуживаются по мере необходимости, что снижает необходимость повторного анализа и компиляции PHP-кодов. В отличие от других систем кэширования, таких как APC, хранятся как код операции, так и данные. Memcached хранит только те данные, к которым приложения получают доступ через TCP. Поэтому обычно (есть исключения), если у вас установлен и работает APC, он вам не нужен .
Демонстрация
Мы уже обсуждали, что библиотека PhpFastCache поддерживает различные адаптеры, когда дело доходит до кэширования. В этом разделе мы продемонстрируем использование файловой системы и адаптеров Redis.
Кэширование с использованием файлового адаптера
Двигаемся дальше и создаем файл file_cache_example.php со следующим содержимым. Я предполагаю, что вы используете рабочий процесс Composer и, следовательно, каталог vendor находится на том же уровне, что и файл file_cache_example.php. Если вы установили вручную PhpFastCache, вы можете соответствующим образом изменить структуру файла.
Давайте рассмотрим это, чтобы понять, что означает каждая часть кода. Первое очевидное — подключаем файл autoload.php и импортируем пространство имен, которое мы намерены использовать.
Когда вы используете кеш файлов, вы должны указать путь к каталогу, содержащий файлы, сгенерированные системой кеширования. И именно это мы настроили в следующем фрагменте.
Конечно, нам нужно убедиться, что каталог cache существует, и он доступен для записи через веб-сервер.
Затем мы создаем экземпляр объекта кэша и пытаемся загрузить кешированный элемент с помощью ключа welcome_message.
Если элемент не существует в кеше, мы добавим его в кеш на 60 секунд и отобразим его из кеша. С другой стороны, если он существует в кеше, мы просто его извлечем!
Это была довольно простая настройка, не так ли? Фактически, вы можете пойти и запустить файл для проверки результатов!
Когда вы запускаете его в первый раз, вы должны увидеть следующий вывод:
В следующем прогоне вывод выглядит примерно так:
Итак, это было кеширование в файлы. В следующем разделе мы воспроизведем тот же пример, используя адаптер кэша Redis.
Кэширование с использованием адаптера Redis
Прежде чем двигаться дальше, я предполагаю, что вы уже установили сервер Redis, и он работает на порте 6379, который является портом по умолчанию для Redis.
С этой настройкой давайте продолжим и создадим файл redis_cache_example.php со следующим содержимым.
Как вы можете видеть, файл почти такой же, кроме раздела, который инициализирует конфигурацию, специфичную для адаптера Redis.
Конечно, вам нужно будет изменить настройки хоста и порта в соответствии с вашими требованиями, если вы используете сервер Redis, отличный от localhost.
Перейдите и запустите файл redis_cache_example.php, чтобы узнать, как он работает. Вы также можете подтвердить это, проверив вывод в CLI Redis.
Итак, это все, что вам нужно для использования адаптера Redis. Я бы посоветовал вам попробовать разные адаптеры и различные опции!
Использовать минификацию HTML, CSS и JS
Еще один способ уменьшить код — сократить его. В коде часто остаются комментарии, ненужные фрагменты, разрывы строк, разделители блоков и лишние пробелы, библиотеки JavaScript, которые не используют. Ненужные символы можно удалить, для этого проводят минификацию CSS, JS, HTML-файлов.
Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение «.min». После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.
Бесплатные инструменты для минификации CSS, JS, HTML-файлов
Собрали несколько бесплатных онлайн-инструментов для сокращения кода.
- minifycode.comПростой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
- willpeavy.com/minifierДругой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
- letteros.com/compressor
- Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
- htmlcompressor.comИнструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
- jscompress.comИнструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
- askapache.com/online-tools/compress-cssИнструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
-
csscompressor.com
Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.
Использовать кэш браузера для ускорения
Ускорить загрузку страницы помогает кэширование в браузере пользователя. При первой загрузке страницы файлы помещаются в кэш браузера с меткой времени, а при повторных посещениях они загружаются из кэша, а не с хостинга. Когда указанный промежуток времени пройдет, файлы обновятся с хостинга. Для кэширования подойдут файлы, которые изменяются не постоянно, иначе пользователь не увидит важных изменений. Статические объекты можно кэшировать от года и дольше.
![Оптимизация php [colobridge wiki]](https://luxe-host.ru/wp-content/uploads/6/0/1/6011b12db081209ab66406c6a12ee362.png)
Google рекомендует настроить сервер так, чтобы он возвращал ответ с HTTP-заголовком Cache-Control, например:
Cache-Control: max-age=31536000
Директива «max-age» указывает, как долго браузер должен кэшировать ресурс в секундах. Значение 31536000 соответствует году: 60 секунд * 60 минут * 24 часа * 365 дней = 31536000 секунд.
Google советует применять «no-cache» для объектов, которые могут обновляться: тогда браузер по-прежнему будет кэшировать ресурс со значением «no-cache», но сначала проверит актуальность на сервере.
Кэширование для Nginx
Для сервера Nginx подходит модуль expires в файле конфигурации. Нужно перечислить форматы файлов для кэширования и указать время хранения кэша:
location ~* .(js|css|png|jpg|jpeg|gif)$ { expires 86400s; log_not_found off; }
Время можно указать в любом формате: секунды — s, часы — h, дни — d и месяцы — m, обозначение «max» указывает на кэширование навсегда.
Вместо времени хранения файла можно указать дату следующего обновления файла в кэше:
expires Fri, 24 Nov 2017 01:01:01 GMT;
Строка log_not_found off нужна для снижения нагрузки на сервер, она отключает ведение лога сообщений с ошибкой 404 для перечисленных файлов.
Метод Cache-Control
Метод позволяет указать для кэширования файлы конкретных форматов. В файле .htaccess в конструкции FilesMatch нужно указать расширения файлов для кэширования и время сохранения файла в кэше в секундах:
# 1 Month for most static assets <filesmatch «.(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$»=»»> Header set Cache-Control «max-age=2592000» </filesmatch>
С помощью другого кода можно запретить кэшировать какие-то отдельные файлы по форматам, обычно это используют для динамических файлов. Для этого в файл .htaccess нужно вставить заголовок и форматы файлов, кэширование которых запрещено:
<filesmatch «.(pl|php|cgi|spl|scgi|fcgi)$»=»»> Header unset Cache-Control </filesmatch>
Кэширование по времени
Другой способ — расписать отдельно разное время сохранения в кэш для разных форматов. Для этого нужно добавить код с директивами в начало файла .htaccess, указать, какие файлы сохранять в кэш и как долго:
## EXPIRES CACHING ## <ifmodule mod_expires.c=»»> ExpiresActive On ExpiresByType image/jpg «access 1 year» ExpiresByType image/jpeg «access 1 year» ExpiresByType image/gif «access 1 year» ExpiresByType image/png «access 1 year» ExpiresByType text/css «access 1 month» ExpiresByType text/html «access 1 month» ExpiresByType application/pdf «access 1 month» ExpiresByType text/x-javascript «access 1 month» ExpiresByType application/x-shockwave-flash «access 1 month» ExpiresByType image/x-icon «access 1 year» ExpiresDefault «access 1 month» </ifmodule> ## EXPIRES CACHING ##
Внимательно подойдите к выбору сроков хранения контента, определите временные промежутки, которые подойдут файлам. Если вы планируете изменять какие-то элементы, а в кэш указали долгий срок хранения, то пользователь не увидит обновления, если не будет чистить кэш браузера.
После сохранения нужно обновить страницу.
Проверить кэширование в Google Chrome можно с помощью веб-инспектора Chrome DevTools. Столбец Size в Chrome DevTools поможет убедиться, что ресурс в кэше:
Столбец Size в Chrome DevTool. Источник — Google
Вкладка Headers покажет, как установлен Cache-Control:
Проверка заголовка Cache-Control. Источник — Google
Установка APC
Для начала надо установить необходимые пакеты:
# apt-get install apache2-threaded-dev php5-dev php5-pear make gcc g++
Затем установить APC при помощи pecl:
# pecl install apc
Отредактировать конфигурационный файл:
#vi /etc/php5/apache2/php.ini
Добавить в него следующую строку:
extension = apc.so apc.shm_size = 64 Количество выделяемой оперативной памяти в МБ. apc.enabled=1 APC включен. Довольно очевидная настройка, но очень важная. Отключение APC может привести к уменьшению производительности на рабочем сервере.
apc.shm_segments=1 apc.shm_size=32
Эти настройки показывают сколько памяти выделять под APC. APC.shm_segments=1 — показывает что выделяется один сегмент памяти, а apc.shm_size=32 показывает, что размер этого сегмента 32 мегабайта. Вы можете поменять размер сегмента, скажем на 64 мегабайта и перезапустить Apache. Потом если количество MISS не будет сведено к 1% сделать размер 128 МБ и так далее. Это основной параметр для работы с APC.
apc.cache_by_default=1
apc.filters= Работа APC для всех php скриптов. При этом мы можем закомментировать строчку с apc.filters. apc.stat=1
Этот параметр напрямую влияет на производительность. При включенной настройке кэш в APC остается там пока не будет удален. В случае когда настройка отключена, то APC будет сравнивать время выполнения скрипта и время последнего изменения файла и добавлять в кэш новую версию. Эта настройка необходима для рабочего сервера, однако для разработки эту настройку лучше всего отключить. И еще при включенной настройке apc.stat необходимо очистить кэш APC при обновление модулей и ядра Drupal.
apc.ttl=0
Эта настройка показывает через сколько миллисекунд очистить кэш. При 0 кэш не очищается. Поэтому мы ставим 0, мы же не хотим чтобы каждый час нужный нам кэш очищался (по умолчанию 7200, то есть 2 часа).
apc.num_files_hint=2048
Эта настройка может быть очень нужна, когда на сервере несколько сайтов, несколько Drupal. Потому что один Drupal может забивать в кэш более 500 файлов. Чтобы кэш одного сайта не затирал в кэше файлы другого, лучше включить эту настройку побольше (по умолчанию 1024).
Для вступления настроек в силу необходимо перезапустить веб-сервер.
#/etc/init.d/apache2 restart
Чтобы этого избежать, необходимо использовать специальную методику дублирования.Атомарные операции
Иногда в кэше хранятся счетчики (например, количество пользователей). При добавлении новых пользователей, вместо сброса счетчика и повторной выборки, можно просто увеличить значение кэша на единицу. Но сделать это через приложение нельзя, т.к. это приведет к потере данных от двух одновременно выполненных запросов:
---$count = memcache_get('count');
$count++;
memcache_set('count', $count);---
Memcache поддерживает две атомарные операции увеличения и уменьшения чисел:
memcache_increment('count');
Увеличит счетчик на 1, функция memcache_decrement() уменьшает счетчик
КЕШИРОВАНИЕ ДИНАМИЧЕСКОГО СОДЕРЖИМОГО С ПОМОЩЬЮ WP ROCKET
Расширенные плагины кеширования, такие как WP Rocket, могут разумно определять, какие активы являются статическими или динамическими, и кэшировать только статический контент. Он также автоматически обновляет кеш всякий раз, когда обновляется статический контент.
WP Rocket также по умолчанию отключает кеширование для динамических страниц, таких как корзина, касса, профили пользователей и т. Д. Он также позволяет вручную отключить кеширование для страниц.
Если у вас есть страницы с большим количеством статического содержимого и несколькими динамическими элементами, вы все равно можете кэшировать эти страницы, обслуживая динамические элементы через JavaScript / AJAX. Поскольку JS работает на стороне клиента (или в браузере), динамические элементы будут обновляться на кэшированной странице, обслуживаемой пользователем.
Вы можете прочитать это пошаговое руководство по AJAX, чтобы узнать, как динамически обновлять контент на своем веб-сайте WordPress.
WooCommerce также предоставляет простой способ оптимизировать просмотрщик корзины , добавив простой фрагмент кода.
Заключение
Гибкое кэширование Apache позволяет варьировать уровень сложности кэша в зависимости от потребностей сервера. Любой из перечисленных выше типов кэширования может значительно улучшить производительность сайта, однако перед запуском рекомендуется выполнить предварительную проверку настроек кэша, чтобы убедиться, что именно этот метод подходит вашему сайту.
Кроме того, важно осознавать последствия неправильно настроенного кэша. После внедрения кэширования нужно убедиться, что кэш не откроет публичный доступ к конфиденциальным данным
Документация Apache содержит довольно много советов по настройке кэширования.
ApacheApache 2.2CacheLockmod_cachemod_disk_cachemod_file_cachemod_mem_cacheVPS
