Разное

Повышение результатов 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 1536000 seconds"
    ExpiresByType image/x-icon "access plus 1536000 seconds"
    ExpiresByType image/jpeg "access plus 1536000 seconds"
    ExpiresByType image/png "access plus 1536000 seconds"
    ExpiresByType image/gif "access plus 1536000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 1536000 seconds"
    ExpiresByType text/css "access plus 1536000 seconds"
    ExpiresByType text/javascript "access plus 1536000 seconds"
    ExpiresByType application/javascript "access plus 1536000 seconds"
    ExpiresByType application/x-javascript "access plus 1536000 seconds"
    ExpiresByType text/html "access plus 1536000 seconds"
    ExpiresByType application/xhtml+xml "access plus 1536000 seconds"
</ifModule>

Подробнее https://snipp.ru/view/39

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');

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

3

CSS

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

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

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>

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

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

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

5

Preload

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

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

Изображения

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

2. Сожмите png и jpg программами PNGGauntletFileOptimizer или 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

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

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

<?php if (stripos(@$_SERVER['HTTP_USER_AGENT'], 'Lighthouse') === false): ?>
    <!-- Код счетчиков -->
<?php endif; ?>
04 апреля 2019
В случаи смены хостинга 1С-Битрикс позволяет легко сформировать резервную копию проекта и восстановить его.
В данной статье представлены примеры вывода информации на странице записи WordPress.
Стандартного функционала WordPress не хватает для разработки сайтов уровнем выше блога, требуются дополнительные поля,...