Проверка скорости загрузки сайта в google pagespeed insights

Особенности Google Page Speed Insights

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

psi3.png

psi3.png

Показатель Page Speed (скорость страницы) демонстрирует динамику в секундах с начала первой отрисовки контента (FCP) до момента загрузки HTML и постройки DOM-дерева (DCL), т. е. полной инициализации интерфейса для работы пользователя. Чем меньше это время, тем быстрее произойдет отображение сайта в браузере. Чтобы все ресурсы были в равных условиях, сервис Google Page Speed Insights использует в качестве отправной точки усредненный показатель скорости загрузки по сети, выставляя одну из оценок:

• Slow – медленная (красный цвет);
• Average – нормальная (оранжевый);
• Fast – быстрая (зеленый).

Наличие графика распределения скорости позволяет легко выявить проблемные области по темпу загрузки и принять необходимые меры. Цветная графическая маркировка также имеет четкую смысловую нагрузку.

psi4.png	при исправлении замечаний страница будет загружаться намного быстрее
psi5.png	лучше исправить, если есть возможность
psi6.png	проблемы отсутствуют

Также онлайн-сервис Page Speed Insights использует 100-балльную шкалу для оценки веб-ресурсов по времени выдачи результатов на поисковый запрос и полной загрузке страницы. Всего предусмотрено три интервала скорости:

• Low (низкая) – 0–59 баллов;
• Medium (средняя) – 60–79;
• Good (хорошая) – 80–100.

Низкая оценка веб-ресурса практически всегда указывает на большие недочеты в организации процесса рендеринга, которые требуют обязательного устранения.

Оценка Page Speed Insights и SEO-продвижение

Google использует около 200 факторов для определения рейтинга сайта, среди которых наиболее важным является ключевое слово в начале тега title, объем и релевантность контента поисковым запросам, плотность и расположение ключевых слов, абсолютная скорость загрузки. Показатель Google Page Speed Insights непосредственно влияет на выдачу 1–3 результатов из 100. В то же время в официальных требованиях системы указано, что «сайт должен работать максимально быстро». Этот фактор благоприятно влияет на поведенческую историю веб-ресурса и значительно повышает его рейтинг. Именно поэтому эффективное СЕО-продвижение сайта требует нормальных показателей Page Speed Insights, но не обязательно со значением Good и Fast. Ярким подтверждением этому факту является мегапопулярный ресурс Amazon.com со средним уровнем оптимизации и высоким рангом.

psi7.png

psi7.png

Разработчики уделили огромное внимание функциональности и внешнему виду сайта в ущерб минимизации времени на полную загрузку картинок и стилей.

Рекомендации Google Page Speed Insights

Кроме подробного отчета о производительности веб-ресурса, сервис предлагает и различные варианты для ее улучшения. Например, сайт Amazon.com получил следующие предложения по оптимизации.

psi8.png

psi8.png

Использование кеша браузера. Практичный и полезный совет по применению заголовков кеширования для хранения копий статических файлов (не меняются от одного поискового запроса к другому) в браузере пользователя.

psi9.png

psi9.png

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

Удаление JavaScript, блокирующего рендеринг. По возможности организуйте выполнение интерактивных сценариев веб-страниц в футере сайта (footer – нижняя часть) или сделайте асинхронную загрузку шапки и JavaScript. Также часть кода можно перенести в основную HTML-разметку

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

Оптимизация Cascading Style Sheet. Существует возможность разделения CSS-кода для приоритетной выгрузки стилей оформления первого экрана в шапку сайта и добавления остальных каскадных таблиц в футер. Здесь также нужно участие верстальщика, чтобы избежать будущих проблем в работе сайта.

Сжатие изображений. Эффективным способом увеличения скорости загрузки сайта является оптимизация размера картинок и фотографий. Для этого можно использовать редактор Adobe Photoshop или специализированные онлайн-сервисы: Compressor.io, TinyPNG, Optimizilla, Web Resizer. Рекомендуемая ширина изображения в формате jpeg, gif или png – 400–600 пикселей при весе 35–75 Кб.

Installation

1. Login to your WordPress Admin page (usually http://yourdomain.com/wp-admin)
2. Navigate to the Plugins screen and then click the “Add New” button
3. Click on the “Upload” link near the top of the page and browse for the Google Pagespeed Insights for WordPress zip file
4. Upload the file, and click “Activate Plugin” after the installation completes
5. Congratulations, installation is complete; proceed to configuration.

Configuration

An extended version of the folliowing instructions as well as other documentation are included in the “documentation” folder of this plugin.

Google Pagespeed Insights requires a Google API Key. Keys are free and can be obtained from Google. In order to get a key, you will need a Google account such as a GMail account. If you do not already have a Google account you can create one here: https://accounts.google.com/SignUp.

1. Navigate to https://code.google.com/apis/console
2. Login with your Google Account (Create a Google account if you do not have one)
3. Create a new API Key and enable the Google Pagespeed Insights API* (see note about restrictions)
4. Paste your API Key into the Options page of Google Pagespeed Insights for WordPress

Try first creating the API key without any ‘restrictions’. In my testing there seems to be a bug with using restricitons with the Pagespeed API.

Задайте правила эффективного использования кеша для статических объектов

«HTTP-кэширование может ускорить загрузку вашей страницы при повторных посещениях» — такой совет даёт сервис для устранения этой неполадки. Дело в том, что когда браузер запрашивает сервер вашего сайта, тот может сообщить, как долго ему хранить те или иные данные (кэшировать его). В следующий раз такие ресурсы будут подгружаться с локальной копии на компьютере пользователя. А это значит, что страница будет загружаться быстрее.

Что нам нужно «убрать» в кэш? Название пункта гласит, что это должны быть статические объекты. Это могут быть CSS-файлы, изображения, JS-скрипты и иконки. Подробнее о кешировании мы писали в разборе плагинов в пункте . Можно обойтись и без плагинов — необходимую информацию можно внести в файл .htaccess, который лежит в корне WP у вас на сервере. В него нужно вписать следующее:

<IfModule mod_expires.c> ExpiresActive On ExpiresDefault «access plus 6 month» ExpiresByType text/css «access plus 6 month» ExpiresByType text/plain «access plus 6 month» ExpiresByType image/gif «access plus 6 month» ExpiresByType image/png «access plus 6 month» ExpiresByType image/jpeg «access plus 6 month» ExpiresByType application/x-javascript «access plus 6 month» ExpiresByType application/javascript «access plus 6 month» ExpiresByType application/x-icon «access plus 6 month» </IfModule>

Почему мы не использовали для кэширования W3 Total Cache или WP Super Cache?

Два данных плагина часто мелькают в различных обзорах о повышении скорости WordPress. Но проблема в том, что данные решения не работают «из коробки». Вот, например скрин при установке WP Super Cache:

При этом все советы, которые дают разработчики в логе на скрине всё равно не помогают. Изменение прав доступа, удаление advanced-cache.php, прописывание параметра WPCACHEHOME в файл wp-config, создание файла wp-cache-config — ничего не сработало.

Что касается W3 Total Cache, то установка тоже не прошла без сучка и задоринки, но плагин завёлся. Однако в процессе эксплуатации тоже возникали ошибки, которые влияли на результат

Здесь помимо проблем чисто с WP добавились проблемы с файлом ngnix.conf

В совокупности всех танцев с бубном мы решили остановиться на Autoptimize в качестве кэширующего плагина

Initial server response time

Время ответа сервера — важнейший параметр, не только для Google Page Speed. В 2021 году тот же самый Гугл вводит новый фактор для ранжирования сайтов — Page Experience, который включает в себе метрики Web Vitals. Они изменяют оценку удобства пользования сайта. Конкретно оцениваются те факторы, которые присутствуют в Google Page Speed. Речь про Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS)

Причем тут скорость загрузки сайта? При том, что LCP и CLS непосредственно относятся к параметрам отрисовки и верстки страницы

Что может тормозить рендеринг на стороне сервера?

Официальная справка Google Page Speed гласит о том, что на время отклика сервера в WordPress влияют темы и плагины. Если точнее, то их CSS, HTML, JS-код. Но как точно узнать, что именно из всей плеяды установленных дополнений так сильно тормозит прорисовку? В этом поможет режим разработчика в Google Chrome. Запускаем браузер, нажимаем F12. Переходим в открывшемся окне на вкладку Network (чуть ниже должно стоять All). Теперь зайдите на страницу вашего сайта — на вкладке Network отобразятся все элементы и время их выполнения

Смотрим на последний столбик Watterfall: какой-то запрос обрабатывается целых 19(!) секунд. Об этом свидетельствует метрика TTFB — time to first byte, т.е. время, которое проходит от запроса пользователя, до начала отдачи страницы сервером. Получение первого TCP пакета с сервера в качестве ответа – является именно получение первого байта.

Как уменьшить TTFB?

Время TTFB включает в себя доставку пакетов до пользователя и генерацию страницы. Первое можно решить с помощью CDN (см. следующий пункт). Про генерацию страницы мы написали выше — это темы, плагины, скрипты, база данных. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером.

Проблема здесь в том, что со своей стороны (пользовательской) что-либо сделать представляется мало возможным, кроме оптимизации темы и плагинов. TTFB может проседать даже из-за таких файлов как wp-login.php, favicon.ico или даже из-за админки (wp-admin/admin-ajax.php). В целом, советы по уменьшению этого времени выглядят так:

1. Использование CDN  для изображений, скриптов и т.д. (об этом ниже)
2. Поменять хостинг или улучшить тарифный план на текущем. Возможно, ваш веб-сервер не успевает обрабатывать запросы, после чего они встают «в очередь». Если они не получат ответ во время, то сервер выдаст ошибку 504 gateway timeout. Попросите своего хостера добавить вам оперативной памяти и увеличить количество процессов httpd (если используется Apache)
3. Использовать кеширование (см. пункт 7. Задайте правила эффективного использования кеша для статических объектов)
4. Приведите в порядок базу данных (для WP есть соответствующие плагины)
5. Если в качестве веб-сервера используется ngnix, то попробуйте увеличить время ожидания при проксировании: для изменения времени ожидания в конфиг надо добавить следующие параметры в файле /etc/nginx/conf.d/timeout.conf:

proxy_connect_timeout 600; proxy_send_timeout 600; proxy_read_timeout 600; send_timeout 600; Также рекомендуется увеличить max_execution_time в php.ini:

max_execution_time 300

Проблема с файлом admin-ajax.php

Если у вас проседает параметр на файле admin-ajax.php, то это тоже признак того, что какой-то плагин работает некорректно. Причём этот файл всё равно загружается вместе с остальным контентом, даже если вы не авторизованы. Фактически, советы будут те же, что и описаны выше. Но есть еще один лайфхак. Отчасти проблему может решить плагин Heartbeat control, который контролирует частоты AJAX запросов из браузера для админки, который генерирует большое количество вызовов PHP.

Что за PageSpeed такой?

Один мой знакомый SEO-шник настолько верил в «силу» аналитических способностей PageSpeed, что отказывался вести работу над сайтом дальше, пока программисты не довели бы его до желтой зоны. Настолько его впечатлил анонс нового фактора ранжирования Google под названием «Speed Update» – скорости загрузки сайта на мобильных устройствах. Он считал, что с плохим баллом по PageSpeed чуда однозначно не случится, и доводил программистов до исступления изнуряющими ТЗ. Те же доводили владельца бизнеса до обморока кошмарными счетами за работы. В итоге этого парня уволили. Это к слову об Икаре и совершенстве.

Ждешь 2-3 минуты – и готово! Speed Test завершен, ты убеждаешься, что твой сайт, по мнению Google – «улитка».

Проверить на Page Speed можно любой сайт – и это бесплатно!

Какие рекомендации дает сервис от Гугл?

К чести сервиса, он не оставляет тебя удрученного и без поддержки. Пэйджспид даёт подробные рекомендации по поводу того, что сделать, чтобы улучшить показатели.

Каждый из пунктов можно еще развернуть, чтобы получить точные данные – например, о том, какие картинки замедляют загрузку.

Залипнуть можно не на один час! Я же вкратце перечислю типичные рекомендации:

• Отложить загрузку скрытых изображений. Здесь речь о технологии Lazy Loading.
• Использовать современные форматы изображений. Сервис советует отказаться от PNG и JPG в пользу экзотических форматов – вроде WebP.
• Устранить ресурсы, блокирующие отображение страницы. Речь об излишних JS и CSS.
• Настроить эффективную кодировку изображений. Если перевести на русский – сжать картинки.
• Сократить время хранения кэша. Если кэш хранится долго, то при повторном посещении страница будет загружаться медленно.
• Уменьшить влияние стороннего кода. То есть по максимуму выбросить различные счетчики, оставить только Analytics, который (опять же по данным PageSpeed, который в некоторых вопросам может быть – хм, хм – необъективен) почти не замедляет сайт, в отличие от «Метрики».

PageSpeed Insights измеряет отдельно версии сайтов для мобильных и для компьютеров. И если десктопные довести хотя бы до жёлтой зоны реально, то с мобильными версиями у большинства – катастрофа.

Using SEMrush Site Audit as an Alternative to PageSpeed Insights

The SEMrush Site Audit is a fantastic way to test your speeds. 

Like PageSpeed Insights, the Site Audit tool can help to recommend improvements on a site’s loading speed and other performance issues. 

Plus, it will scan for more than 130 technical and SEO mistakes, providing charts, instructions, and directions on everything from crawlability to content issues. You will be able to view a full thematic report that gives you an insight into performance issues and opportunities, showcasing everything you need to make improvements in one single report.

The Performance report is here to help you to make actionable improvements to your site’s performance and load time. It is a quick way to see the bigger picture and get a visual analysis of your data and metrics, covering:

• Page load speed.

• Average page load speed.

• Number of JavaScript and CSS files.

• JavaScript and CSS file sizes.

Additionally, the report highlights errors, warnings, and notices. All prioritized to help you fix the issues. You will find information on what to do to see improvements on the ‘Why and how to fix it’ section, with flagged issues including:

• Large HTML page size issues.

• Redirect chains and loops.

• Slow page load speeds.

• Uncompressed pages.

• Uncompressed Javascript and CSS files.

• Uncached Javascript and CSS files.

• Too large JavaScript and CSS total size.

• Too many JavaScript and CSS files.

• Unminified JavaScript and CSS files.

• Slow average document interactive time.

Why not give it a try? Alongside Google PageSpeed Insights, our Site Audit tool can help you prioritize and action fixes to drive forward improvements, reduce your site’s load time, and have a chance at converting your visitors better. 

Удалите код JavaScript и CSS

Гугл рекомендует удалять «лишний» по его мнению код скриптов,  блокирующий отображение верхней части страницы.

Сложный пункт, который требует знаний и практики.

Нужен спец по JavaScript, который перетряхнет весь сайт и проанализирует все скрипты, чтобы они могли грузиться асинхронно и при этом не повредился никакой фукнционал.

А так как в том же WordPress обычно 9 из 10 скриптов — это внешние плагины, то там вы вряд ли что-то сделаете, так как они грузятся из своих папок и обновляются по 3 раза на неделю.

И ваши сделанные изменения банально затрутся.

Так что тут я могу рекомендовать:

1. не тратить время на самостоятельный разбор этого хлама и сразу нанять специалиста на бирже фриланса, дешевле всего на Kwork , ну а если проект посложнее, то на других биржах можете поискать.
2. по возможности просто отключить/удалить уже ненужные или неиспользуемые плагины. Например в своем блоге, когда я писал эту статью, то обнаружил в скриптах плагин, которым не пользуюсь уже несколько лет, просто забыл про него — а он висит и снижает скорость загрузки сайта в Гугл.

Посмотрите, может и вы что-то забыли? Или чем-то не пользуетесь? Тогда отключайте.

Отключаем стили которые вызывают проблемные шрифты

Так как у Вашего проекта скорее всего происходит подключение шрифта не только из CSS стилей файлов темы, а и из плагинов. Придется пройтись по проблемным шрифтам и произвести их отключение, перенести данные шрифты в корень сайта (в папку /fonts) а затем повторно их подключить через CSS стили которые их вызывают, но уже с правильными настройками для ускоренного отображения текста оформленного данными шрифтами.

И для начала нам нужно определиться со стилями которые вызывают “проблемные” шрифты. Для этого возвращаемся на страницу PageSpeed Insights и переходим к разделу…

Настройте показ всего текста во время загрузки веб-шрифтов

Здесь мы видим то количество шрифтов с которым нам и придется позаморачиваться. Что ж начнем.

После того как имя шрифта нам известно нужно найти тот css файл который отвечает за его подключение. Для этого Вам в помощь поиск по файлам в NotePad программе ++.

Why Speed Matters

There is an expectation for the web to be fast. As far back as 2010, Google confirmed page speed as a ranking factor. Then, it “was focused on desktop searches,” until a specific mobile PageSpeed update rolled out in July 2018. While speed is one of more than 200 ranking factors, none of us want to unnecessarily lose business. Especially for something usually within our control. In fact, SEO blog Backlinko analyzed 1 million Google search results and found “a strong correlation between site speed and Google rankings.”

Portent

If you’re not already paying attention to speed as a performance metric, now’s the time. 

Оценка Page Speed Insights и SEO-продвижение

Google использует около 200 факторов для определения рейтинга сайта, среди которых наиболее важным является ключевое слово в начале тега title, объем и релевантность контента поисковым запросам, плотность и расположение ключевых слов, абсолютная скорость загрузки. Показатель Google Page Speed Insights непосредственно влияет на выдачу 1–3 результатов из 100. В то же время в официальных требованиях системы указано, что «сайт должен работать максимально быстро». Этот фактор благоприятно влияет на поведенческую историю веб-ресурса и значительно повышает его рейтинг. Именно поэтому эффективное СЕО-продвижение сайта требует нормальных показателей Page Speed Insights, но не обязательно со значением Good и Fast. Ярким подтверждением этому факту является мегапопулярный ресурс Amazon.com со средним уровнем оптимизации и высоким рангом.

psi7.png

psi7.png

Разработчики уделили огромное внимание функциональности и внешнему виду сайта в ущерб минимизации времени на полную загрузку картинок и стилей.

Рекомендации Google Page Speed Insights

Кроме подробного отчета о производительности веб-ресурса, сервис предлагает и различные варианты для ее улучшения. Например, сайт Amazon.com получил следующие предложения по оптимизации.

psi8.png

psi8.png

Использование кеша браузера. Практичный и полезный совет по применению заголовков кеширования для хранения копий статических файлов (не меняются от одного поискового запроса к другому) в браузере пользователя.

psi9.png

psi9.png

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

Удаление JavaScript, блокирующего рендеринг. По возможности организуйте выполнение интерактивных сценариев веб-страниц в футере сайта (footer – нижняя часть) или сделайте асинхронную загрузку шапки и JavaScript. Также часть кода можно перенести в основную HTML-разметку

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

Оптимизация Cascading Style Sheet. Существует возможность разделения CSS-кода для приоритетной выгрузки стилей оформления первого экрана в шапку сайта и добавления остальных каскадных таблиц в футер. Здесь также нужно участие верстальщика, чтобы избежать будущих проблем в работе сайта.

Сжатие изображений. Эффективным способом увеличения скорости загрузки сайта является оптимизация размера картинок и фотографий. Для этого можно использовать редактор Adobe Photoshop или специализированные онлайн-сервисы: Compressor.io, TinyPNG, Optimizilla, Web Resizer. Рекомендуемая ширина изображения в формате jpeg, gif или png – 400–600 пикселей при весе 35–75 Кб.

Определяем понятие скорости

Вне зависимости от скорости Интернет-подключения нам всегда хочется, чтобы Web-страницы загружались быстрее. Владельцы Web-серверов, отправляющих нам содержимое Web-страниц, также хотят делать это быстрее по двум причинам: компании с медленными серверами теряют клиентов, а компании с быстрыми серверами, обеспечивающими быструю загрузку отдельных страниц, могут использовать освобожденные ресурсы для обслуживания дополнительных клиентов. Даже если вы заходите на страницу какой-то компании всего лишь раз в день, другие клиенты могут обращаться к этой же странице 100000 раз в день. Для таких компаний даже небольшая задержка при загрузке страницы является очень существенной.

В этой статье мы будем рассматривать понятие «скорость» с точки зрения пользователя и определим его как время загрузки Web-страницы. Быстрой считается та Web-страница, которая быстро загружается (например, страница www.google.com, время загрузки которой очень мало). И наоборот, медленной Web-страницей будет являться страница, расположенная, например, на старом компьютере Pentium II с процессором 600 МГц и содержащая 40 больших изображений; время загрузки такой страницы будет очень большим. Кроме того, Web-страница может быть очень быстрой, если ее посещают всего несколько человек в день, но если количество пользователей увеличится до нескольких тысяч за 10 минут, то время загрузки может оказаться чрезвычайно большим. Таким образом, понятие «скорость» определяется как время, необходимое для перемещения из точки А в точку Б, где точкой А является момент нажатия клавиши Enter после ввода адреса страницы в адресной строке, а точкой Б – полностью загруженная страница в Web-браузере клиента.

С точки зрения Web-сервера самым лучшим способом увеличения скорости (без замены аппаратной части) является более быстрая отправка более мелких объемов данных. Если подойти к вопросу более детально, то это означает, что предпочтительнее уменьшать задержку (т. е. время отклика) компьютера и объем передаваемых данных (т. е. количество передаваемых физических килобайтов). Таким образом, для «ускорения» Web-сайта как с точки зрения Web-сервера, так и с точки зрения пользователя необходимо уменьшить и задержку сервера, и размер передаваемых данных.

Установка

1. Login to your WordPress Admin page (usually http://yourdomain.com/wp-admin)
2. Navigate to the Plugins screen and then click the «Add New» button
3. Click on the «Upload» link near the top of the page and browse for the Google Pagespeed Insights for WordPress zip file
4. Upload the file, and click «Activate Plugin» after the installation completes
5. Congratulations, installation is complete; proceed to configuration.

Configuration

An extended version of the folliowing instructions as well as other documentation are included in the «documentation» folder of this plugin.

Google Pagespeed Insights requires a Google API Key. Keys are free and can be obtained from Google. In order to get a key, you will need a Google account such as a GMail account. If you do not already have a Google account you can create one here: https://accounts.google.com/SignUp.

1. Navigate to https://code.google.com/apis/console
2. Login with your Google Account (Create a Google account if you do not have one)
3. Create a new API Key and enable the Google Pagespeed Insights API* (see note about restrictions)
4. Paste your API Key into the Options page of Google Pagespeed Insights for WordPress

Try first creating the API key without any ‘restrictions’. In my testing there seems to be a bug with using restricitons with the Pagespeed API.

Подводим итоги

PageSpeed Insights — это удобный инструмент для проверки качества загрузки страниц, который выдаёт персональные рекомендации по ускорению загрузки

Но выполнять их нужно с осторожностью, чтобы не навредить технической части и юзабилити.. При низкой оценке сервиса стоит детально изучить скорость загрузки страниц, проанализировав её с помощью других сервисов и краулеров, например, Netpeak Spider

Увеличить скорость можно стандартными методами: с помощью сжатия изображений, таблицы стилей CSS, данных Javascript, путем кэширования страниц и загрузки на сервер заархивированных данных (Gzip).

При низкой оценке сервиса стоит детально изучить скорость загрузки страниц, проанализировав её с помощью других сервисов и краулеров, например, Netpeak Spider. Увеличить скорость можно стандартными методами: с помощью сжатия изображений, таблицы стилей CSS, данных Javascript, путем кэширования страниц и загрузки на сервер заархивированных данных (Gzip).