Проверка скорости сайта на PageSpeed Insights
Первым делом нужно зайти на сам сервис — https://developers.google.com/speed/pagespeed/insights/. Далее в текстовом поле «Введите URL web-страницы» — указываем нужную страницу (можно указать любую страницу сайта или просто название домена), после нажимаем «Анализировать».
На примере я буду анализировать страницу — http://yandex.ru.
После анализа web-страницы, нам будет доступно две вкладки с результатами — «Для мобильных» и «Для компьютеров».
Проверка скорости сайта для мобильных устройств
Первая вкладка которую отображает сервис — «Для мобильных», здесь отображается два основных аспекта — скорость и удобство для пользователей.
Как видно с примера PageSpeed Insights присвоил странице 74 балл по скорости загрузки страницы. На мобильных пользователей страница загружается не очень быстро, но в принципе допустимо. Далее можно посмотреть рекомендации которые нужно применить, для ускорения загрузки страницы на мобильных устройствах.
Скорость:
Первым делом обращаем внимание на рекомендации под красным восклицательным знаком «Исправить обязательно» — нажимаем на «Как исправить», после чего мы получим список файлов и элементов сайта, которые нужно исправить. Также будут предложены методы по оптимизации
Данные рекомендации существенно влияют на скорость сайта.
Желтый восклицательный знак «Исправьте по возможности» — также как и в примере выше нужно выполнить рекомендации сервиса. Необходимые изменения не сильно влияют на скорость сайта.
Зеленая галочка «Выполнено правил» — Если нажать «Подробности» — можно посмотреть какие именно правила уже выполнены, на вашем сайте.
«Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы» — очень важный пункт, если вы нажмете на данную ссылку — то вы получите архив, с уже выполненными рекомендациями. То есть вы получите архив, в котором будет три папки и один файл. В папках будут лежать оптимизированные изображения, JS и CSS, а файл под названием «MANIFEST» будет содержать полные пути на вашем сайте, где необходимо заменить файлы на оптимизированные. По моему очень удобно.
Удобство для пользователей:
Как видим сервис присвоил странице 99 баллов — очень высокий показатель. Основными влияющими факторами на показатель «Удобство для пользователей» являются:
- Размер активных элементов на странице
- Адаптирован ли размер контента для области просмотра — на мобильных устройствах не появляется горизонтальная полоса прокрутки
- Удобочитаемые размеры шрифтов
- Использование плагинов
Также по мере возможностей пробуем реализовать на практике предложенные рекомендации. Хочу отметить, что самым главным фактором удобства — является отсутствие горизонтальной прокрутки в браузере мобильных устройств.
На мой взгляд «Удобство для пользователей» имеет более высокий приоритет, чем скорость — так как, если пользователю будет не удобно пользоваться вашим сайтом с мобильника, то скорее всего он его сразу покинет, что в свою очередь повлечет более высокий процент «отказов», которые влияют на ранжирование сайта в поисковой выдаче.
Проверка скорости сайта для компьютеров
Как видно PageSpeed Insights присвоил странице 71 балл по скорости для компьютеров. Также используем рекомендации и исправляем необходимые элементы сайта.
Хочу обратить внимание — лучше сначала оптимизировать сайт для компьютеров, а потом для мобильных устройств (большинство рекомендаций общее)
3. Cumulative Layout Shift (CLS)
CLS – показатель стабильности макета, или, по-другому, «накопительный сдвиг макета».
На видео пользователь хочет нажать «Нет», но макет сдвигается и клик приходится на «Да, отправить мой заказ». Дальше можно наблюдать многократное нажатие на кнопку отмены :).
То есть мы находимся на сайте, но с загрузкой сайта контент частично смещается. CLS измеряет общую сумму всех индивидуальных оценок сдвига макета для каждого неожиданного сдвига макета, который происходит в течение всего срока загрузки страницы.
Сдвиг макета происходит каждый раз, когда видимый элемент изменяет свое положение от одного визуализируемого кадра к другому. Хорошим CLS будет считаться показатель не выше 0,1 для 75% пользователей сайта.
Средний показатель для «полевых» данных составляет 0,39. Только для 46% пользователей CLS меньше чем 0,1.
Лабораторные данные показывают CLS 0,475, то есть происходит сдвиг макета на величину, которая не входит в рекомендуемые показатели.
Для большинства веб-сайтов вы можете избежать всех неожиданных сдвигов в макете, придерживаясь нескольких принципов:
- Всегда включайте атрибуты размера в свои изображения и видеоэлементы или иным образом резервируйте необходимое пространство. Такой подход гарантирует, что браузер сможет выделить правильный объем места в документе во время загрузки изображения.
- Никогда не вставляйте контент поверх существующего контента, кроме как в ответ на взаимодействие пользователя.
- Анимируйте переходы таким образом, чтобы обеспечить контекст и непрерывность от состояния к состоянию.
Данные по всем проблемным страницам можно найти в https:\/\/search\.google\.com\/u\/1\/search-console\/core-web-vitals (требуется авторизация. Это касается только тех сайтов, где достаточно «полевых данных». Если «полевых» данных нет, а также в GSC нет никаких ошибок, то стоит самостоятельно дополнительно проверить основные типы страниц через Google Page Speed для оценки лабораторных данных показателя CLS.
Стоит отметить, что в большинстве случаев сдвиг макета происходит шаблонными элементами. То есть исправление проблем для одной страницы может также исправить проблемы для множества других.
На текущий момент проблема наблюдается только на мобильных устройствах. На ПК проблемных URL не найдено:
Напоминаю, что показатель хуже, чем 0,25, считается плохим. Желательно добиться показателя ниже 0,1.
В инспекторе браузера Google Chrome (кнопка F12) необходимо перейти на вкладку Performance, включить Screenshots, переключиться в мобильные устройства (например iPhone X).
После чего запустить проверку Ctrl + Shift + E (в Windows). Мы получим картинку:
Нас интересует раздел Experience. В нем содержится 4 блока, которые говорят нам, что сдвиг макета происходил четыре раза
При изучении трех последних блоков, сдвиг макета был соответственно на: 0,021, 0,01 и 0,00005 – это очень низкий показатель, и на подобные минимальные сдвиги можно не обращать внимание (напоминаю, наша задача чтобы сдвиг макета был ниже 0,25 и желательно ниже 0,1).
Важно! Тут действует накопительная система. То есть в расчет берется СУММАРНОЕ значение всех сдвигов. . При просмотре первого блока сдвиг макета составил 0,5352.
При просмотре первого блока сдвиг макета составил 0,5352.
Итого, основной сдвиг макета пришелся на первый блок.
Постараемся понять, где именно происходит сдвиг макета.
При наведении на соответствующие строки «Moved from/to» у нас происходит подсветка элемента, который сместился.
Необходимо скорректировать макет сайта таким образом, чтобы контент загружался уже непосредственно на ожидаемом месте, без смещения.
P. S. Если копать дальше, то можно разобраться, что конкретно сдвинуло наш макет. Начать можно со связанного узла (выше на скрине есть Related Node). В нашем случае подгрузилась иконка корзины, из-за чего произошел сдвиг иконки мобильного телефона. Другие сдвиги можно также отследить и разобраться, что конкретно повлияло на сдвиг того или иного элемента.
В данном случае необходимо зарезервировать место под иконку корзины таким образом, чтобы иконка мобильного телефона загружалась сразу в необходимом месте, без сдвига.
Проблема: оптимизация тем, плагинов, изображений, ресурсов
Даже с лучшим хостинг-провайдером сайт может медленно загружаться. На это бывает несколько причин.
Тема WordPress
Тема, которая изначально использовалась на сайте Ника, была куплена у сторонних разработчиков. Часто такие темы поставляются в комплекте с кучей различных функций. Имеют компоновщик страниц, плагины для слайд-шоу, несколько библиотек JavaScript, библиотеки шрифтов и многое другое. Нередко такие темы используют CSS и JavaScript, чтобы удовлетворять потребностям аудитории.
В результате многие темы содержат большое количество не нужного функционала.
Плагины ВордПресс
Помимо платной темы на сайте Ника было установлено множество плагинов, которые не использовались, дублировали друг друга или имели похожие функции. Подобно теме с большим количеством возможностей, не нужные плагины добавляли лишний код, вступали в конфликт с другими плагинами и функциями темы и, в конечном счете, замедляли работу сайта.
Изображения
Большинство владельцев сайтов находят изображения, обрезают их в графических редакторах и загружают на свои сайты. Так делал и Ник.
Хотя WordPress сжимает загружаемые медиа-файлы, он справляется с этим не очень хорошо. Большинство изображений обычно весит гораздо больше, чем необходимо. А это, в свою очередь, влияет на скорость загрузки страниц.
Ресурсы
Многие проблемы медленной загрузки сайтов связаны с ресурсами на страницах, в значительной степени с CSS и JavaScript. Если правильно выбрать тему и плагины, многие сложности отпадут сами собой. Ведь чем легче тема и эффективнее плагины, тем меньше владельцам сайтов нужно думать об оптимизации ресурсов.
На сайте NickLeRoy.com использовалось большое количество ресурсов, даже там, где они не были необходимы. Шрифты Google, javascript-файлы для ненужных функций, CSS для стилей и эффектов и многое другое, от чего можно было бы избавиться.
Решение: создание нового сайта
Оценив состояние ресурса, стало понятно, что без внесения существенных изменений в тему и плагины оптимизировать производительность сайта не удастся. Даже смена хостинга не помогла бы сделать сайт быстрым. Нужно было решить проблемы с темой, плагинами, ресурсами и изображениями.
Тогда Ник принял решение перезапустить сайт с нуля на новом хостинге. Для этого была проделана следующая работа:
- Чистая установка WordPress на Local by Flywheel с чистой базой данных и кодом,
- Установка облегченной темы,
- Установка конструктора страниц Elementor, чтобы сайт выглядел так же, как изначально, но загружался быстрее,
- Перестройка всего сайта,
- Оптимизация изображений с помощью imageOptim. Для этого все картинки были загружены в папку wp-content/uploads, пропущены через сервис imageOptim, и выложены обратно на сайт. Суммарное сжатие составило около 90% по сравнению с исходным размером файлов,
- установка Autoptimize и Async Javascript, что позволило объединить JS и CSS и уменьшить / удалить блокировку рендеринга.
После реализации описанных выше действий сайт был перемещен из локальной среды разработки в промежуточную. Затем специалисты настроили SSL и HTTP/2 и после тестирования обновили DNS.
Результаты
Скорость загрузки страниц WordPress в Google Page Speed оценивалась с помощью сервиса SanityCheck.io. На скриншоте видно, как после внесения всех изменений улучшились показатели для мобильной версии сайта (синяя линия) и для десктопной (черная линия).
Улучшение скорости сайта WordPress
Даже несмотря на достигнутые успехи, Ник собирается продолжить работу по улучшению производительности сайта. В частности, он планирует:
- Отказаться от Google Fonts и полностью перейти на системные шрифты или загрузить Google Fonts на сервер,
- Удалить из верхней части страницы код CSS и Inline,
- Оптимизировать файлы JS / CSS,
- Установить стороннюю CDN (например, CloudFlare) или использовать сторонний сервис для оптимизации изображений, например, в формате WebP,
- Улучшить кэширование для ресурсов.
Любой владелец сайта на WordPress и другой CMS может значительно ускорить ресурс. Можно последовать примеру Ника и перезапустить сайт или попытаться исправить проблемы на текущем сайте, влияющие на скорость загрузки страниц. Какой бы вариант вы ни выбрали, затраченные усилия обязательно окупятся ростом трафика, снижением показателя отказов и, возможно, повышением позиций в поисковых системах.
Шаг 1 — Как узнать вес собственного сайта
На первом шаге нам нужно узнать вес собственного сайта, точнее размер проверяемой конкретной страницы. Начинать исследование следует с главной страницы сайта. Пошагово выполните следующие действия:
- Откройте нужную страницe в браузере Google Chrome (я открыл главную страницу своего сайта wow2.top).
- Запустите инструмент разработчика нажав клавишу F12
- Перейдите на вкладку Network
- Поставьте галочку для отключения кэш браузера (disable cache)
- Обновите страницу, в Хроме нажмите CTRL+R или кнопку слева от поля содержащего URL вашей страницы
- Посмотрите значение в нижнем левом углу.
Для моего сайта, как видно на скриншоте, вес страницы составил 1,8 MB transferred.
Эффективные способы улучшения показателя LCP
Когда вебмастера видят, что их проекты не проходят проверку CWV, у них возникает задача оптимизировать показатель LCP. На этом моменте многие начинают судорожно искать плагины и сервисы, которые улучшают показатели в один клик.
Важно понять, что Core Web Vitals учитывают комплексные метрики. Нельзя просто минифицировать CSS и получить 100 баллов в PageSpeed Insights
Аналогичная ситуация и с LCP.
Чтобы разобраться с улучшением значения метрики, необходимо чётко понимать, что влияет на Largest Contentful Paint. Это поможет сформировать пошаговый план действий и последовательно выполнить все действия.
Отрисовка самого большого контента на странице должна происходить быстрее чем за 2,5 секунды. Всё, что дольше — проваленный тест Core Web Vitals и потенциальный риск для позиций в органической выдаче.
На LCP влияет несколько факторов:
- Время ответа сервера. Чем быстрее сайт откликнулся на запрос браузера пользователя, тем лучше.
- JavaScript и CSS с блокировкой рендеринга. Некоторые элементы на странице могут блокировать её отображение и пользователю приходится ждать загрузки. В идеальном состоянии блокирующих элементов не должно быть.
- Время загрузки ресурса. В 2021 году мало кто будет ждать загрузку контента несколько минут.
- Рендеринг на стороне клиента. Рендеринг в браузере с помощью Javascript, данные обрабатываются на устройстве пользователя.
Для оптимизации LCP надо понять, какой блок на странице является самым крупным и увидеть, насколько быстро он грузится. Время ответа сервера зависит от качества оптимизации на стороне хостинг-провайдера. Лучше выбирать хостинги, которые по умолчанию выдают хорошие показатели.
Для повышения скорости загрузки страницы можно использовать GZIP, CDN, а также технологии кэширования. Если речь идёт о сайте на базе WordPress, то вебмастерам доступны десятки плагинов для настройки кэша.
Дополнительные рекомендации:
- Оптимизируйте медиаконтент. Картинки лучше по максимуму сжать и конвертировать в формат WebP.
- Отложите загрузку второстепенных ресурсов. Асинхронная загрузка JS здорово помогает ускорить сайт.
- Сократите объем JS. Удалите все неиспользуемые скрипты, минифицируйте оставшиеся и объедините их в один файл.
- Используйте предварительный рендеринг. Он помогает защититься от перезагрузки сервера.
- Устраните элементы, блокирующие рендеринг. Данные о наличии таких блоков есть в отчёте PageSpeed Insights.
- Используйте критический CSS. Он помогает встроить главные стили в список ресурсов для приоритетной загрузки, а остальные правила отложить до момента взаимодействия пользователя с элементами.
Оптимизировать показатель LCP вручную без опыта и знаний очень сложно. Поэтому у типичного вебмастера есть два варианта — разобраться самостоятельно или заплатить программисту. Второй подход более комфортный потому что каждый сможет заняться своими задачами.
Ещё один выход из ситуации — покупка оптимизированных тем. Большое количество шаблонов на Themeforest и других маркетплейсах по умолчанию хорошо спроектированы. Остаётся соблюдать простые правила, чтобы сайт прошёл проверку Core Web Vitals и набрал хорошие баллы.Если будете сотрудничать с прогером, не забывайте использовать инструменты для замера в режиме реального времени. И не ведитесь на предложения специалистов получить 100 баллов в PageSpeed. Обман алгоритмов не приведёт не даст ничего хорошего.
Какой показатель LCP считается хорошим?
Время загрузки самого большого контента не должно превышать 2,5 секунд.
Есть ли сервисы которые помогают оптимизировать показатели LCP?
Есть, но автоматизировать задачу очень сложно. Только если речь идёт о простой HTML-странице без админки. И даже в этом случае выйти на хорошие показатели без ручной настройки практически невозможно.
Можно ли не подгонять LCP?
Да, если хотите получать бесплатный трафик из Google.
Как часто обновляются данные об «Основных интернет-показателях» в консоли?
Раз в месяц, задержка может быть и больше. Ориентируйтесь на данные замеров в real-time.
Какие инструменты использовать для замеров?
Совмещайте несколько сервисов из нашей статьи. Например, расширение для Chrome и GTmetrix или WebPage Test.
Как проверить скорость загрузки сайта
Блог или сайт, как и его посетители, далеко не всегда ведет себя предсказуемо. На чужих устройствах он может работать намного медленнее, чем на вашем компьютере
Поэтому нам важно знать время загрузки страниц сайта непосредственно в браузерах ваших посетителей. Если у вас установлен счетчик Яндекс.Метрика, тогда готовый отчёт — как быстро работает ваш сайт ждёт вас непосредственно в разделе «Мониторинг» Яндекс
Метрика.
Скорость загрузки сайта Яндекс
Поэтому зайдите в свой аккаунт и проверьте отчет «Время загрузки страниц» группы «Мониторинг» . Весь процесс открытия страницы разложен по этапам: вы можете увидеть, сколько занимает подключение и загрузка страницы с сервера, отследить время от начала отрисовки страницы до её полной загрузки, оценить потери времени на переадресацию и так далее. Все эти данные легко отфильтровать по разным браузерам:
Время загрузки страниц
Далее, проверка скорости загрузки сайта в Google.
Узнать данные можно в мощном Google Analytics, в разделе «Поведение» — «Скорость загрузки сайта»:
Скорость загрузки сайта
В отличии от Яндекс. Метрика в Google Analytics можно получить предложения по увеличению скорости загрузки сайта если таковы имеются. Нажмите на пункт «Ускорение загрузки» и вы увидите отчёт, приблизительно такой:
Предложения по увеличению скорости загрузки сайта от Page Speed
Как показано на скриншоте, есть предложение PageSpeed.
Скорость загрузки сайта google PageSpeed Insights
Сервис Page Speed Insights измеряет производительность страниц для мобильных устройств и настольных ПК. Page Speed даёт рекомендации по оптимизации для повышения скорости загрузки страницы. PageSpeed Insights, даёт подробную информацию, что нужно сделать для проверяемого сайта:
Сервисе PageSpeed Insights от Google
Вставляете адрес URL вашего веб-ресурса и нажимаете анализировать. Через некоторое время получаете результать.
| Значок | Название | Описание |
|---|---|---|
| красный восклицательный знак | Исправьте обязательно: это будет иметь ощутимое воздействие на производительность страниц. | |
| желтый восклицательный знак | Исправьте по возможности. | |
| зеленая галочка | Хорошая работа! |
Нажимайте Как исправить? читайте, что нужно вам сделать. К стати, на этой странице вы можете проверить скорость загрузки любого вашего сайта или блога, получить рекомендации и как их исправить. Вот как то так. Перейдём теперь к сторонним сервисам, где вы можете протестировать свой сайт бесплатно.
Проверяем скорость сайта онлайн
Сервис Pingdom Tools — http://tools.pingdom.com/fpt/ довольно популярен на данный момент. Вводите URL сайта и через несколько секунд вы получите подробный отчет:
Сервис Pingdom Tools
Сервис WebPagetest — http://www.webpagetest.org.
WebPagetest тем хорош, что он тестирует ваш веб — ресурс на скорость загрузки из под различных браузерах и из разных стран. Вам стоит только выбрать нужное, ввести адрес сайта и подождать некоторое время:
Сервис WebPagetest
GTmetrix — http://gtmetrix.com/ Отличный сервис, считаю его лучшим по представлению различных бесплатных услуг для сайтов на движке ВордПресс. Сервис выдает отчёт производительности, плюс рекомендации по оптимизации сайтов или блогов на платформе WordPress. Если зарегистрируйтесь на сайте GTmetrix, вы получите дополнительные возможности. Один недостаток — сайт на английском языке, но как всегда Google переведёт:
Сервис GTmetrix
Представленные выше сервисы по проверке скорости загрузки сайта на английском языке. В русском сегменте я не так давно случайно наткнулся на сервис Site Speed — http://sitespeed.ru/ . Сервис тоже бесплатный, вводите адрес сайта и через несколько секунд получаете результат. Если укажите свою электронную почту, то вам пришлют подробный, полный отчёт на неё:
Сервис Site Speed — готовый отчёт
Если воспользуетесь по доставке отчета по почте, тогда во вложении вы найдете подробный PDF-отчет о состоянии вашего сайта. Из данного отчета вы узнаете, какова скорость отображения сайта в браузере типового посетителя и из чего она складывается. В отчете дана оценка текущей ситуации в процентах, при этом 100% — это идеальная картина
И плюс к этому информацию о Скорость загрузки сайта — почему это так важно?
Пожалуй этих онлайн сервисов достаточно, чтобы узнать скорость загрузки страниц.
В заключение
Грамотно используйте полученные данные, применяйте советы и результат не заставит себя ждать: меньшая скорость загрузки страниц и, как следствие, меньше пользователей, которые ушли, так и не дождавшись вашего сайта.
Как скорость сайта влияет на ранжирование
Плохая скорость загрузки сайта образует комплекс проблем, где явные и скрытые аспекты оказывают существенное влияние на ранжирование ресурсов в выдаче. Среди очевидных причин потери позиций и невозможности эффективного продвижения значатся поведенческие факторы: время ответа сервера не всегда учитывается при анализе, но оно напрямую влияет на bounce rate (показатель отказов)
Высокое время ожидания ведет к большому количеству покинувших сайт после просмотра 1 страницы, что принимается во внимание Яндексом
Низкая скорость работы сайта сказывается и на индексации: роботы Яндекса реже посещают «медленные» ресурсы, что влечет более редкую переиндексацию с меньшим числом индексируемых страниц.
Яндекс.Вебмастер
Более тонко подошел к ситуации Гугл: в результате проведенного в 2009 году исследования выяснилось, что незначительное увеличение времени ожидания при поиске со 100 до 400 мс снижает количество запросов от одного пользователя на 0.2-0.6%. Данный губительный «эффект» сохраняется даже после восстановления исходных значений скорости. Вывод очевиден: при наличии в выдаче «медленных» сайтов Google теряет клиентов, что ведет к финансовым потерям компании. В этой связи с 2010 года поисковый гигант учитывает время загрузки сайтов при ранжировании.
Следите за производительностью сайта и оптимизируйте время его загрузки. Google стремится максимально повышать удобство работы пользователей и предоставлять им наиболее релевантные результаты. Быстро работающие сайты повышают удовлетворенность пользователей и улучшают общее качество работы Интернета (особенно для пользователей, использующих медленное соединение). Мы надеемся, что по мере улучшения веб-мастерами своих сайтов повысится общая скорость работы Интернета.
Элегантный намек веб-мастерам от Google
Низкие позиции в выдаче – лишь малая часть проблемы. Ресурсы с посредственной скоростью работы теряют показатели доверия и конверсии, что не способствует росту бизнеса в онлайн-среде.
Роман Вердыш
Выводы
Параметры Web Vitals безусловно важные, однако, как было указано в начале нашей статьи, на сегодняшний день всего около 20% сайтов соответствуют рекомендуемым показателям. Поэтому в первую очередь необходимо оценить объем текущих проблем на сайте и степень их влияния на ранжирование проекта.
При устранении ошибок стоит обратить внимание на параметры с большой долей пользователей в красной зоне для полевых данных. А в качестве решений выбирать те методы, которые сразу затронут максимальное количество страниц на сайте с привлечением минимальных ресурсов программистов и верстальщиков
