АКЦИЯ!Два месяца SEO-продвижения по цене одногоПодробнее
OpenCart / ocStorePHPWordPress

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

3 Мин. чтения
1EmJggdR91xD6 uNHJXJHPA

Погружаясь в мир веб-разработки, создание мощного кэша для вашего сайта становится ключом к повышению производительности и отзывчивости веб-ресурса. Этот метод не просто ускоряет загрузку страниц — он создает удивительный пользовательский опыт, оптимизируя работу вашего сайта.
Если ваш веб-проект основан на 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.by/cache.php >/dev/null 2>&1
Снимок экрана 2023 11 20 в 04.53.27
До применения кэширования
Снимок экрана 2023 11 20 в 04.53.21
С кэшированием

Оптимизация стилей: Устранение блокирующих ресурсов

Одним из подходов к оптимизации загрузки стилей на веб-странице является размещение критически важных стилей непосредственно в 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 Мин. чтения
Подписка на рассылку статей и обновлений плагинов

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *