1. Переведите сайт на PHP 7, по сравнению с PHP 5 работает гораздо быстрей, сокращается время отклика сервера.
2. Включите gzip в .httacess:
#Сжатие gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>3. Включите кэширование статических файлов:
#Включение кэширования
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/html "access plus 1 year"
ExpiresByType application/xhtml+xml "access plus 1 year"
</ifModule>Сжатие HTML кода не дает особых результатов, но сделать можно.
function clean_html($html)
{
// Табуляция и переносы строк
$html = str_replace(array("\t", "\r", "\n"), ' ', $html);
// Двойные пробелы
$html = mb_ereg_replace('[\s]+', ' ', $html);
return $html;
}
ob_start('clean_html');Из-за удаления пробелов и переносов строк может поехать вёрстка.
Весь код нужно сжать, есть много сервисов, например CSSO.
Далее возможны три варианта оптимизации CSS стилей:
1. Если стилей не много, без использования отдельного файла вывести их в <head> страницы.
<!DOCTYPE HTML>
<html>
<head>
<style>
...
</style>
</head>
<body>
...
</body>
</html>2. Соединить все файлы CSS в один и подключить в <head>.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
...
</body>
</html> 3. В <head> страницы помещается файл со стилями элементов верхней части страницы, у закрывающего тега <boby> подключить всё остальные.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
...
<link rel="stylesheet" href="/css/bottom.css">
</body>
</html>Также нужно исключить инлайновые стили у тегов и включения <style>...</style> внутри <body>.
1. Сжать код.
2. Вынести подключение скриптов из <head>.
<!DOCTYPE HTML>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
</body>
</html>3. Сделать задержку инициализации галерей и других плагинов.
setTimeout(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
}, 2000);Добавит пару балов «предзагрузка» ресурсов.
<link rel="preload" href="/js/bootstrap.min.js" as="script">
<link rel="preload" href="/css/style.css" as="style">1. По возможности перевести изображение в вектор (svg).
2. Сожмите png и jpg программами PNGGauntlet, FileOptimizer или TinyPNG.
3. Гугл предлагает форматы JPEG 2000, JPEG XR и WebP – очень сомнительно, первые два поддерживаются единицами, WebP не откроются в Safari (iOS) и много где еще, но есть методы вывести WebP в браузерах, где они поддерживаются.
Поддержка WebP браузерами на https://caniuse.com/#feat=webp
Яндекс.Метрика, Google Analytics, консультанты отнимают до 20 балов и с ними ни чего не сделать, но можно скрыть их от теста, проверяя $_SERVER['HTTP_USER_AGENT'].
PageSpeed Insights использует следующие user-agent:
Для мобильных:
Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Mobile Safari/537.36 Chrome-LighthouseДля компьютеров:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Safari/537.36 Chrome-LighthouseПроверка User-agent:
<?php if (stripos(@$_SERVER['HTTP_USER_AGENT'], 'Lighthouse') === false): ?>
<!-- Код счетчиков -->
<?php endif; ?><script>
setTimeout(function(){
// JS-код метрики...
}, 1000);
</script>
Андрей Глызин
