NEW!Новая публикация в разделе WordPress Читать
OpenCart / ocStorePHPWordPress

Максимальная эффективность: Как создать мощный кэш для вашего сайта и улучшить показатели PageSpeed

3 Мин. чтения

Погружаясь в мир веб-разработки, создание мощного кэша для вашего сайта становится ключом к повышению производительности и отзывчивости веб-ресурса. Этот метод не просто ускоряет загрузку страниц — он создает удивительный пользовательский опыт, оптимизируя работу вашего сайта.
Если ваш веб-проект основан на CMS (например, OpenCart, WordPress), стоит обратить внимание на популярные плагины управления кэшем, предназначенные специально для данной CMS. 

Кэширование целой страницы и откладывание загрузки JS скриптов

Данный метод сокращает получение первого байта от сервера и добавляет в отложенную загрузку js скрипты.
Однако возникает вопрос о применимости данного подхода, если ваш сайт не использует 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, тогда как остальные стили загружаются асинхронно в футере страницы. Это позволяет ускорить первоначальный рендеринг страницы.

<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 дней.

Установка заголовков кэширования — это эффективный метод оптимизации, который существенно улучшает производительность веб-сайта и обеспечивает более быстрый и отзывчивый пользовательский опыт.
Популярные статьи
Мои работы

belmotors.by - Автозапчасти из Европы

1 Мин. чтения
Подписка на рассылку статей и обновлений плагинов

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии