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

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

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

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>
htaccess
На некоторых хостингах (Timeweb, Beget) данный способ не будет работать т.к. статические файлы отдаются через Nginx.

Сжатие 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

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

Весь код нужно сжать, есть много сервисов, например CSSO.

Далее возможны три варианта оптимизации 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>.

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.

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

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

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
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
Второй вариант – запустить коды метрик с задержкой, но тогда увеличатся показатели отказов.
<script>
setTimeout(function(){
	// JS-код метрики...
}, 1000);
</script>
HTML
04.04.2019, обновлено 08.10.2020
10223

Комментарии 1

Андрей Глызин Андрей Глызин
6 августа 2020 в 18:58
0
Один из пунктов оптимизации является новый формат графики WebP. Сам формат способен сжимать до 60% картинки без заметной потери качества. А если на странице этих картинок много, это сильно сокращает загрузку сайта. Вот только вручную конвертировать все свои картинки сайта это не удобно, еще ведь нужно и в коде править что бы в разных браузерах открывались поддерживаемые форматы. Собственно ранее я так и поступал, но потом набрел на хостинг провайдера https://asko.host, как оказалось там все это автоматизированно. Закачиваешь картинку, сервер ее конвертирует на лету, кладет в специальную папку. Когда браузер посетителя запрашивает ее, если он поддерживает этот формат ему отдается webp, иначе оригинал. Самое главное не нужно ни чего делать руками и лезть в код.

, чтобы добавить комментарий.

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

Сжатие gzip и кэш браузера в htaccess
При оптимизация скорости работы сайта инструменты типа Google PageSpeed Tools рекомендуют использовать кэш браузера и...
5738
+1
Запись в лог-файл в PHP
Несколько вариантов как быстро организовать запись данных в лог-файл.
43968
+9
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
21991
+25
Автоматическое сжатие и оптимизация картинок на сайте
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
15871
+8
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
32193
+13
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
11784
+3