Повышение результатов PageSpeed Insights

Сборник советов как поднять оценку в PageSpeed Insights.
1

Настройки сервера

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>

#Включение кэширования
<ifModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 31557600 seconds"
	ExpiresByType image/x-icon "access plus 31557600 seconds"
	ExpiresByType image/jpeg "access plus 31557600 seconds"
	ExpiresByType image/png "access plus 31557600 seconds"
	ExpiresByType image/gif "access plus 31557600 seconds"
	ExpiresByType application/x-shockwave-flash "access plus 31557600 seconds"
	ExpiresByType text/css "access plus 31557600 seconds"
	ExpiresByType text/javascript "access plus 31557600 seconds"
	ExpiresByType application/javascript "access plus 31557600 seconds"
	ExpiresByType application/x-javascript "access plus 31557600 seconds"
	ExpiresByType text/html "access plus 31557600 seconds"
	ExpiresByType application/xhtml+xml "access plus 31557600 seconds"
</ifModule>
2

HTML

Сжатие 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');
PHP

Из-за удаления пробелов и переносов строк может поехать вёрстка.

3

CSS

Весь код нужно сжать, есть много сервисов, например https://snipp.ru/tools/css-compress

Далее возможны три варианта оптимизации CSS стилей:

1. Если стилей не много, без использования отдельного файла вывести их в <head> страницы.

<!DOCTYPE HTML>
<html>
<head>
	<style>
	...
	</style>
</head>
<body>
   ...
</body>
</html>
HTML

2. Соединить все файлы CSS в один и подключить в <head>.

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" href="/css/style.css">
</head>
<body>
   ...
</body>
</html>
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>
HTML

Также нужно исключить инлайновые стили у тегов и включения <style>...</style> внутри <body>.

4

JS

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>
HTML

3. Сделать задержку инициализации галерей и других плагинов.

setTimeout(function(){ 
	$('.bxslider').bxSlider({
		mode: 'fade',
		captions: true,
		slideWidth: 600
	});
}, 2000);
JS

Также повышает скорость использование библиотек из CDN Яндекс, Google.

5

Preload

Добавит пару балов «предзагрузка» ресурсов.

<link rel="preload" href="/js/bootstrap.min.js" as="script">
<link rel="preload" href="/css/style.css" as="style">
PHP
6

Изображения

1. По возможности перевести изображение в вектор (svg).

2. Сожмите png и jpg программами PNGGauntlet, FileOptimizer или TinyPNG.

3. Гугл предлагает форматы JPEG 2000, JPEG XR и WebP – очень сомнительно, первые два поддерживаются единицами, WebP не откроются в Safari (iOS) и много где еще, что критично.

Поддержка WebP браузерами на https://caniuse.com/#feat=webp

7

Счетчики и виджеты

Яндекс.Метрика, 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
TEXT

Для компьютеров:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Safari/537.36 Chrome-Lighthouse
TEXT

Проверка User-agent:

<?php if (stripos(@$_SERVER['HTTP_USER_AGENT'], 'Lighthouse') === false): ?>
	<!-- Код счетчиков -->
<?php endif; ?>
PHP
04.04.2019, обновлено 27.08.2019 964

Поделится

Другие публикации

Описание значений глобального массива $_SERVER с примерами.
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
Примеры как зарегистрировать бота в Телеграм, описание и взаимодействие с основными методами API.
PHP функции для перевода текста, ЧПУ, ссылок и имен файлов в транслит.