Погружаясь в мир веб-разработки, создание мощного кэша для вашего сайта становится ключом к повышению производительности и отзывчивости веб-ресурса. Этот метод не просто ускоряет загрузку страниц — он создает удивительный пользовательский опыт, оптимизируя работу вашего сайта.
Если ваш веб-проект основан на CMS (например, OpenCart, WordPress), стоит обратить внимание на популярные плагины управления кэшем, предназначенные специально для данной CMS.
Кэширование целой страницы и откладывание загрузки JS скриптов
Данный метод сокращает получение первого байта от сервера и добавляет в отложенную загрузку js скрипты.
Однако возникает вопрос о применимости данного подхода, если ваш сайт не использует AJAX для обновления элементов корзины в шапке и тд. В этом случае необходимы доработки сайта для динамического получения данных.
Эффективное кэширование и обход ссылок через сайтмап могут значительно улучшить скорость загрузки и общую производительность вашего веб-ресурса.
Этот фрагмент кода необходимо вставить в .htaccess файл:
Для добавления кэша в планировщик CRON используйте следующую команду:
Однако возникает вопрос о применимости данного подхода, если ваш сайт не использует AJAX для обновления элементов корзины в шапке и тд. В этом случае необходимы доработки сайта для динамического получения данных.
Эффективное кэширование и обход ссылок через сайтмап могут значительно улучшить скорость загрузки и общую производительность вашего веб-ресурса.
## Перед началом, убедитесь, что у вас на сайте есть sitemap.xml и создан полный бэкап сайта
Этот фрагмент кода необходимо вставить в .htaccess файл:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{DOCUMENT_ROOT}/cache%{REQUEST_URI} -d
RewriteRule ^(.*)$ /cache/%{REQUEST_URI} [L]
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}/cache/index.html -f
RewriteRule ^$ /cache/index.html [L]
Вариант .htaccess для WordPress:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache%{REQUEST_URI} -d
RewriteRule ^(.*)$ /wp-content/cache/%{REQUEST_URI} [L]
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/index.html -f
RewriteRule ^$ /wp-content/cache/index.html [L]
Приведенный ниже код представляет собой пример создания кэша веб-сайта. В данном случае, мы используем сайтмап, для обхода ссылок. Прежде чем внедрять подобные решения, важно адаптировать их под специфику вашего проекта
file: /cache.php
file: /wp-content/cache.php //для WordPress
$limit = 5; //сколько обходов за одну загрузку
//для WordPress
include "../wp-config.php";
//для OpenCart
//include "config.php";
//для WordPress
$servername = DB_HOST;
$username = DB_USER;
$password = DB_PASSWORD;
$db = DB_NAME;
//для OpenCart
//$servername = DB_HOSTNAME;
//$username = DB_USERNAME;
//$password = DB_PASSWORD;
//$db = DB_DATABASE;
$conn = new mysqli($servername, $username, $password, $db);
if ($conn->connect_error) {
die("Error: " . $conn->connect_error);
}
//таблицу можно создать в базе и удалить этот блок из кода
$results = mysqli_query($conn, "SHOW TABLES LIKE 'cache_urls'");
if (!$results->num_rows) {
try {
$sql = "CREATE TABLE IF NOT EXISTS `cache_urls` (
`url` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci;";
mysqli_query($conn, $sql);
} catch (Exception $ex) {}
}
//
$limit_c = 0;
foreach (parse_xml("https://$_SERVER[HTTP_HOST]/sitemap.xml") as $link) {
foreach (parse_xml($link) as $l) {
$folder = substr(parse_url(rtrim($l,'/'), PHP_URL_PATH), 1);
$results = mysqli_query($conn, "SELECT * FROM `cache_urls` WHERE `url`='{$folder}'");
if ($results->num_rows) continue;
if ($folder == '' && file_exists('cache/index.html')) continue;
$html = file_get_contents($l);
//получение скриптов из хтмл в $matches
preg_match_all('/src=["|\'](http.*?\.js)/', $html, $matches, PREG_PATTERN_ORDER);
$html = preg_replace('/(<(script)\b[^>]*>).*?(<\/\2>)/is', '', $html);
$links = "";
//вставка скрипта с отложенной загрузкой перед </body>
$html = substr_replace( $html, $links, strpos($html,'</body>'), 0 );
@mkdir("cache", 0755);
$path = '';
foreach(explode('/',$folder) as $f) {
$path .= $f.'/';
if (!file_exists("/cache/" . $path . "/")) {
@mkdir("cache/" . $path, 0755);
}
}
$fp = fopen("cache/" . $folder . "/index.html", 'w');
fwrite($fp, ($html));
fclose($fp);
mysqli_query($conn, "INSERT INTO `cache_urls` (`url`) VALUES ('{$folder}')");
$limit_c++;
if ($limit_c > $limit) exit;
}
}
function minify_html($html) {
$search = array(
'/(\n|^)(\x20+|\t)/',
'/(\n|^)\/\/(.*?)(\n|$)/',
'/\n/',
'/\<\!--.*?-->/',
'/(\x20+|\t)/',
'/\>\s+\</', '/(\"|\')\s+\>/',
'/=\s+(\"|\')/');
$replace = array(
"\n",
"\n",
" ",
"",
" ",
"><", "$1>",
"=$1");
$html = preg_replace($search,$replace,$html);
return $html;
}
function parse_xml($filename) {
$html=@file_get_contents($filename);
$dom = new DOMDocument('1.0', 'UTF-8');
@$dom->loadXML($html);
if(!$dom) return [];
$root=$dom->documentElement;
$nodelist=$root->childNodes;
$links = [];
foreach ($nodelist as $child) {
if ($child->nodeType==XML_ELEMENT_NODE){
$loc=$lastmod=false;
foreach ($child->childNodes as $child2)
if ($child2->nodeType==XML_ELEMENT_NODE){
if ($child2->nodeName=='loc')$loc=$child2->nodeValue;
}
if(!$loc)continue;
$links[] = $loc;
}
}
if (empty($links)) return [$filename];
else return $links;
}
Помимо оптимизации кэширования, важным аспектом поддержания производительности вашего веб-сайта является систематическая очистка кэша. Это необходимо для обновления устаревших данных и предотвращения возможных конфликтов.
Ниже представлен пример кода для очистки кэша. Этот код может быть интегрирован в ваши скрипты обслуживания или вызываться по расписанию, в зависимости от требований вашего проекта.
file: /cache_delete.php
file: /wp-content/cache_delete.php //для WordPress
//для WordPress
include "../wp-config.php";
//для OpenCart
//include "config.php";
//для WordPress
$servername = DB_HOST;
$username = DB_USER;
$password = DB_PASSWORD;
$db = DB_NAME;
//для OpenCart
//$servername = DB_HOSTNAME;
//$username = DB_USERNAME;
//$password = DB_PASSWORD;
//$db = DB_DATABASE;
$conn = new mysqli($servername, $username, $password, $db);
if ($conn->connect_error) {
die("Error: " . $conn->connect_error);
}
mysqli_query($conn, "DELETE FROM `cache_urls` WHERE 1");
rrmdir('cache');
function rrmdir($dir) {
if (is_dir($dir)) {
$objects = scandir($dir);
foreach ($objects as $object) {
if ($object != "." && $object != "..") {
if (filetype($dir."/".$object) == "dir")
rrmdir($dir."/".$object);
else unlink ($dir."/".$object);
}
}
reset($objects);
rmdir($dir);
}
}
## Важное предупреждение: Каждый сайт уникален, поэтому необходимо вносить правки в код и удалять из отложенной загрузки скрипты, от которых зависит работа вашего сайта. Может быть не совместимо с некоторыми плагинами.
Для добавления кэша в планировщик CRON используйте следующую команду:
*/5 * * * * wget -O - https://mukosei.com/cache.php >/dev/null 2>&1
Оптимизация стилей: Устранение блокирующих ресурсов
Одним из подходов к оптимизации загрузки стилей на веб-странице является размещение критически важных стилей непосредственно в HTML-документе в виде инлайн-стилей в секции head, тогда как остальные стили загружаются асинхронно в футере страницы. Это позволяет ускорить первоначальный рендеринг страницы.
ExpiresByType: Задает время жизни кэша для конкретного типа контента. В приведенном примере, изображения (JPEG, PNG, GIF) кэшируются на 30 дней, а стили CSS — на 7 дней.
Установка заголовков кэширования — это эффективный метод оптимизации, который существенно улучшает производительность веб-сайта и обеспечивает более быстрый и отзывчивый пользовательский опыт.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ваша страница</title>
<-- Критически важные стили в инлайн-формате -->
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #fff;
}
.header {
color: #333;
font-size: 24px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="style.css" media="none" onload="this.media='all'">
<script async src="scripts.js"></script>
</body>
Установка правильных заголовков кэширования на сервере позволяет браузерам сохранять копии ресурсов на стороне клиента, уменьшая необходимость их повторной загрузки при каждом запросе. Это существенно снижает время загрузки веб-страницы и улучшает общую производительность сайта.
Пример заголовков кэширования в файле .htaccess (для сервера Apache):
# Включение модуля для управления кэшированием
<IfModule mod_expires.c>
# Включение использования заголовков Expires и Cache-Control
ExpiresActive On
# Установка времени кэширования для изображений на 30 дней
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 30 days"
# Установка времени кэширования для стилей CSS на 7 дней
ExpiresByType text/css "access plus 7 days"
</IfModule>
ExpiresActive On: Включает использование заголовка Expires.
ExpiresByType: Задает время жизни кэша для конкретного типа контента. В приведенном примере, изображения (JPEG, PNG, GIF) кэшируются на 30 дней, а стили CSS — на 7 дней.
Установка заголовков кэширования — это эффективный метод оптимизации, который существенно улучшает производительность веб-сайта и обеспечивает более быстрый и отзывчивый пользовательский опыт.