Google Pagespeed Insights - в погоне за скоростью загрузки сайта...

Обновлено: 27.04.2021 18186

Статья о том, как проверить скорость загрузки сайта в Гугл, с помощью инструмента PageSpeed Insights...

Скорость загрузки сайта Google Page speed insights: проверка и оптимизация

Время прочтения:

В поисковой системе Google - скорость загрузки важный фактор ранжирования документов в системе сильно коррелирует с позициями сайта (следует также учесть релевантность документа интенту запроса).

Важным инструментом при проведении технической оптимизации сайтов под Google - считать 2 инструмента: "Проверка оптимизации для мобильных" и "PageSpeed Insights".

Скорость загрузки и мобильная адаптация - то, что сильно влияет на поведенческие характеристики сайта, восприятие информации.

PageSpeed Insights

С помощью Гугл пейдж спид инсайт - можно проверить, насколько хорошо оптимизирован сайт с точки зрения загрузки клиентской части.

Проверяется оптимизация, как для мобильных устройств, так и для компьютеров.

После завершения проверки Google дает основные рекомендации в отчетах:

  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы;
  • Оптимизируйте загрузку видимого контента;
  • Используйте кеш браузера;
  • Включите сжатие;
  • Не используйте переадресацию с целевой страницы;
  • Оптимизируйте изображения;
  • Сократите CSS;
  • Сократите HTML;
  • Сократите JavaScript;
  • Сократите время ответа сервера.

Рассмотрим каждый пункт отдельно чуть позже.

Проверка оптимизации для мобильных устройств

Про этот инструмент расскажем немного вскользь...

Основная цель инструмента - показать, насколько эффективно отображается сайт на мобильных устройствах. Показывает, оптимизирована страница или нет.

Если возникают "Проблемы при загрузке страницы" - можно посмотреть подробнее что не так.

Чаще всего в этом блоке присутствуют ошибки с жалобами на то, что роботу Googlebot заблокирован доступ в файле robots.txt. Если это скрипты или файлы счетчиков, систем статистики - внешние хосты, то ничего предпринимать не надо.
А если это внутренние ресурсы, влияющие на отображение, заблокированы в robots.txt - то рекомендую их открыть для индексации. Их можно увидеть в отчете "Заблокированные ресурсы", чаще всего это скрипты, стили и картинки.

Еще особенность такого второго инструмента, то, что отображаются ошибки JS в блоке "Консоль JavaScript" - их мы тоже исправляем при наличии такой возможности.

PageSpeed Insights - 100% из 100% - миф, за которым не стоит гнаться...

Это вполне реально, если убрать счетчики, скрипты социальных сетей и другие внешние неоптимизированные ресурсы. Только стоит ли оно того?

Я выгружал по крону свой скрипт, который брал внешние скрипты, сжимал и сохранял к себе на сервер. Далее подключал кэшируемые скрипты себе на сайт. Трюк работает:

Google PageSpeed Insights

Скрипт: сохраняем внешние скрипты на свой сервер.

Поделюсь кодом этого PHP-скрипта костыля:

<?php
function downloadJs($file_url,$save_to)
{$content=file_get_contents($file_url);
// удаляем комментарии, пробелы, пустые строки в коде:
$content=preg_replace("#(;|{|}|=|:|,|<|>|\+|\|) *#i", "\\1",$content);
$content=preg_replace("# *(;|{|}|=|:|,|<|>|\+|\|)#i", "\\1",$content);
$content=preg_replace("#\+\+new#i", "+ +new",$content);
$content=preg_replace("#(;|{|}|\t|\s)//.*#i", "\\1",$content);
$content = preg_replace('#(\r|\n)//.*#i','',$content);
$content = preg_replace("#\s*?\r?\n\s*?(?=\r\n|\n)#i","",$content);
file_put_contents($save_to,$content);}
downloadJs('https://mc.yandex.ru/metrika/watch.js', realpath("./metrika") . '/watch.js');
downloadJs('https://mc.yandex.ru/metrika/tag.js', realpath("./metrika") . '/tag.js');
downloadJs('https://top-fwz1.mail.ru/js/code.js', realpath("./js") . '/code.js');
downloadJs('https://st.top100.ru/top100/top100.js', realpath("./top100") . '/top100.js');
downloadJs('https://www.google-analytics.com/analytics.js', realpath("./js") . '/analytics.js');
downloadJs('https://vk.com/js/api/openapi.js', realpath("./js/api") . '/openapi.js');
// Указываем URL, затем папку от корня сайта и имя файла с расширением.
// Проверьте, чтобы на папке были права на запись 777/755
?>

Кладем этот скрипт в корень сайта и настраиваем крон, к примеру, раз в 3 дня. Если будут изменения в скриптах - они учтутся в локальной копии на нашем сайте.

Такой небольшой хак - результат 99%.

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Переместите все CSS-стили и JavaScript-файлы в самый низ сайта, после контента.

Оптимизируйте загрузку видимого контента

Используйте следующие методы оптимизации:

Атрибуты для подключаемых скриптов:

  • onload="async" - для первоочередных ресурсов, без которых сайт будет некорректно работать, это позволит загружать страницы асинхронно. Рекомендуется для: jquery, lazyload;
  • async - для скриптов, которые могут загружаться асинхронно и не особо влияют на функционал сайта. Рекомендуется для: скриптов социальных сетей, кнопок поделиться, скриптов, не влияющих на отдельные части сайта.
  • defer - применяйте для скриптов, которые должны включиться после рендеринга страниц и сильно зависимы от выше стоящих скриптов jquery, lazyload...

Функции для встроенных скриптов:

$(document).ready(function(){
Встроенный скрипт с отложенным выполнением, который выполняется тогда, когда документ загружен. Подобен атрибуту defer.
});

Используйте кеш браузера

Настроить кеширование браузером можно через корневой файл .htaccess на веб-сервере.

Expires

Более простой вариант кеширования страниц с помощью браузеров.

Пример кода:

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 60 seconds"
ExpiresByType text/html "access plus 3600 seconds"
ExpiresByType text/php "access plus 3600 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType font/truetype "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType audio/mp3 "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType text/x-component "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 3600 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 3600 seconds"
ExpiresByType application/json "access plus 0 seconds"
</IfModule>

Cache-Control

Метод позволяет получить больше контроля над процессом кэширования страниц браузерами. Можно совмещать с Expires.

Пример:

<filesMatch "\.(ico|jpg|jpeg|png|svg|gif|swf|ogg|ogv|svgz|eot|otf|woff|mp4|ttf|rss|atom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|js|css)$">
Header set Cache-Control "max-age=31622400, public"
</filesMatch>
<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=60, private, must-revalidate"
</filesMatch>

Включите сжатие

Включаем gzip-сжатие - необходимо убедиться, что сервер поддерживает такую технологию.

Пример. Вначале прописываем DEFLATE:

<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
AddOutputFilterByType DEFLATE text/html text/css text/javascript text/plain text/xml text/x-component
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/json application/x-javascript application/javascript application/rss+xml application/atom+xml application/vnd.ms-fontobject application/x-font-ttf
AddOutputFilterByType DEFLATE image/svg+xml font/opentype
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

Далее, gzip:

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_update_static No
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|xml)$
mod_gzip_item_exclude file \.(jpg|png|gif)$ 
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^application/x-httpd-php
mod_gzip_item_include mime ^application/xml
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include mime ^text/html$
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_maximum_file_size 100000 
mod_gzip_minimum_file_size 300 
mod_gzip_maximum_inmem_size 100000
</IfModule>

И активируем сжатие:

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>

Не используйте переадресацию с целевой страницы

К примеру, если ваш сайт перенаправляет на поддомен "m." при использовании мобильных устройств, то такому сайту понижают баллы. А если сайт имеет несколько перенаправлений - то он не годиться для мобильных пользователей. Пример:

site.ru => www.site.ru => m.site.ru

Используйте адаптивную верстку страниц и избегайте цепочек перенаправлений - это позволит повысить эффективность сайта в эпоху Mobile-First Indexing.

Оптимизируйте изображения

Тут важным пунктом играет вес используемых изображений - чем больше вес, тем больше загрузка страниц.

Пути и варианты решений:

  • Производить автоматический ресайз картинок под отображаемые размеры изображения (обрезка до нужных пропорций);
  • Автоматически сжимать изображения без их потери качества, либо оптимизировать вручную каждую картинку с помощью сервиса tinypng;
  • Указывать ширину и высоту изображений с помощью атрибутов width и height;
  • Обрабатывать тяжёлые фото в Photoshop - снижаем разрешение до 72 пикселей на дюйм;
  • Объединить все небольшие иконки в один файл - для их вывода использовать CSS-спрайты;
  • Использовать отложенную загрузку изображений, к примеру, с помощью плагина LazyLoad. Минус в том, что картинки не индексируются по этим специальным атрибутам, поэтому лучше применять для всех второстепенных графических элементов.

Внимание! При замене файлов картинок на предложенные оптимизированные от Google может снизиться качество их отображения. Поэтому лучше их файлы не использовать - применяйте вышеуказанные приемы оптимизации.

Сократите CSS

Лучшим вариантов будет просто скачать оптимизированные файлы, которые предлагает сам Google, либо получить сжатые файлы через GTMetrix. Еще как вариант: использовать приведенный мною выше скрипт - редактировать несжатый файл, а получать на выходе оптимизированный css-файл.

Сократите HTML

К примеру, для ModX Revo и написал плагин "miniHTML":

<?php
$output = &$modx->resource->_output;
$output = preg_replace('/(\t+)/', '', $output);
$output = preg_replace('/(\n)(\s+)/', ' ', $output);
$output = preg_replace('/(\s)(?=(\{|\}))|(?=(\{|\}))(\s)|(?=(^))(\s)|(?=\n)(\s*)(?=(\/\/))/', '', $output);
$output = preg_replace('/(\n+)/', '
', $output);
$modx->resource->set('content', $output);

Такой метод позволяет убрать дублирующиеся пробелы, лишние переносы строк, табуляции... По факту, это замедляет процесс генерации страницы, если не включено кеширование. Решать вам - тратить ресурсы сервера на сжатие страниц программным способом или пропустить этот пункт. Выгода небольшая - 0-2%.

Сократите JavaScript

Как писалось выше можно получить готовые сжатые скрипты с помощью сервисов, а можно сжимать их php-скриптами.

Сократите время ответа сервера

Тут рекомендациями могу служить следующее:

  • переход на более мощный хостинг;
  • переход на последнюю версию PHP (7.*);
  • обновление CMS и её компонентов, плагинов...;
  • оптимизация PHP-кода.

Выводы

Попробуйте начать оптимизировать загрузку вашего сайта - и вы почувствуете результат.

Совет. Проводите оптимизацию в первую очередь с самых посещаемых страниц - отчет "Страницы входа" или "Адрес страницы" в Яндекс.Метрике вам в помощь.

Еще раз напоминаю - не нужно подходить с фанатизмом к этому процессу - главное чтобы ваш сайт отдавал быстрый отклик на любом устройстве и выполнял свои функции перед потребностями посетителей.

Чтобы эффективно оптимизировать работу сайта и его загрузку - лучше всего обратиться к профессионалам, либо попробовать самому применить указанную методику. 

Есть также документация по Google PageSpeed insights (на англ. яз.).

В следующей статье я расскажу особенности оптимизации скорости загрузки сайта с помощью инструмента GTMetrix.

Пишите свои комментарии и замечания! ;))

Связаться в Telegram

Рейтинг: 5/5
3 голосов

Следующие страницы вас также могут заинтересовать:

Обновлено: 27.04.2021