Что такое настоящий замер скорости сайта WordPress — PageSpeed и Network показатели

Сайт может быть медленным, но иметь хорошие показатели в PageSpeed, при этом в вебмастере поисковых систем показатели также будут плохими. А может быть хороший показатель Network и данные в вебмастере, но PageSpeed Google будет давать не лучшие показатели. От чего это зависит и как правильно оценивать, определять и улучшать скорость сайта будем изучать в этой статье.

Зачастую многие приходят с вопросом скорости сайта не всегда понимая из чего она берется и как меряется. Отсюда — простое решение, я буду смотреть на тесты, там ведь просто, вот она цифра. На деле все сложнее и скорость сайта это не 1 замер, а сотни и тысячи замеров от посетителей вашего сайта, которые собирают поисковые системы в Network браузера (как Гугл) или в Метрике (ЯНдекс). 

Скорость сайта в Pagespeed — основная проблема для многих начинающих владельцев сайта, они старательно заказывают ускорение сайта, зачастую не понимая что создают этим просто бизнес, в котором есть две стороны медали. Стоит ли гнаться за цифрами Pagespeed, в каких случаях они важны по настоящему, а где это просто набор сиволов, что такое реальная скорость сайта, как меряют скорость сайта поисковые системы, сегодня мы пройдёмся по всем аспектам этого.

Многие ищут как увеличить скорость сайты по показателям Pagespeed, при этом зачастую не понимая что это всего лишь синтетический усредненный тест, в котором очень необъективно поданы метрики оценки сайта.

А как правильно? Сейчас мы изучим.

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

  1. Тесты по проверке скорости сайта — это набор синтетических правил, в которых есть резон в части подсказки, но в то же время там присутствует фактор того, что например вставки внешних скриптов не имеющие кеш времени — станут тяжелым место для тестирования сайта. При этом основная роль на которую смотрят это то что говорит PageSpeed — понятно что это связано с тем, что его сделал Гугл и поэтому он должен вызывать и вызывает не просто знание, что он есть а некоторое желание догнать сайт до зеленых цифр. Но к сожалению PageSpeed сделан так, что быстрый сайт может быть в красной зоне, а вот сайт наоборот медленный покажет хорошие цифры. Машина не может определять одним тестов объективность загрузки правильно. И знаете что?

Главное что следует из первого теста: Гугл понимает что тест всего лишь набор правил по одному сценарию и пишет об этом — кто бы правда это читал. Но давайте раз уж вы читаете эту статью все таки прочитаем:

https://developers.google.com/speed/docs/insights/v5/about?hl=ru-RU&utm_source=PSI&utm_medium=incoming-link&utm_campaign=PSI

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

Понимание лабораторных и полевых данных

Лабораторные данные — это данные о производительности, собранные в контролируемой среде с предопределенными настройками устройства и сети. Это предлагает воспроизводимые результаты и возможности отладки, чтобы помочь выявить, изолировать и исправить проблемы с производительностью.

Сильные стороны

  • Полезно для устранения проблем с производительностью
  • Сквозная и глубокая наглядность UX
  • Воспроизводимая среда тестирования и отладки
  • Ограничения
  • Не может уловить узкие места в реальном мире
  • Невозможно соотнести с реальными ключевыми показателями эффективности страницы

Полевые данные замера скорости сайта

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

Сильные стороны

  • Захватывает реальный пользовательский опыт
  • Обеспечивает корреляцию с ключевыми показателями эффективности бизнеса

А дальше есть еще вопросы и ответы в которых указывается также:

Загрузку на каком устройстве и в сети какого типа имитирует Lighthouse?

В настоящее время Lighthouse имитирует загрузку страницы на устройстве со средними возможностями (Moto G4) в мобильной сети.

Почему данные наблюдений не совпадают данными по итогам имитации загрузки? В первом случае скорость загрузки оценивается как низкая, а во втором – как высокая!

Анонимизированные данные наблюдений представляют собой статистику загрузок страницы настоящими пользователями на разных устройствах и в разных сетях. Имитируется же загрузка только на одном устройстве в сети с заданным набором условий. В результате полученные значения могут различаться.

Если вы прочитали всё это внимательно и не совсем осознали, я попробую обьяснить кратко: Есть тест PageSpeed и есть реальные показатели посетителей. Тест для вас подсказка как найти настоящие проблемы скорости и подсказать их по разным максимальным вариантам метрик, а реальные показатели скорости снимаются у каждого посетителя. При этом для этого используется Lighthouse — встроенный для замера скорости инструмент в Хром браузере и его аналоги в других браузерах.

Как понять что такое реальная скорость сайта?

  1. Как ни странно но PageSpeed нам тоже поможет в этом, ведь он снимает много метрик. И если мы понимаем что стоит проблема из за: капчи, гугл аналитикс, метрики яндекса, шрифтов Гугла — только потому что они грузятся откуда то и при этом не кешируются — это мы можем убирать. Но убирая надо понимать, что данные показатели очень сильно могут снижать показатели. В то же время остаются и метрики реальных проблем на которые следует обратить внимание.
  • Тяжелая графика
  • Долгое время генерации страниц
  • Долгий отклик страницы

И ряд других. Вот тут как и в известной фразе: Черт кроется в деталях. Понимания детали вы понимаете что Pagespeed может вам помочь, не понимая детали — вы это понять не сможете. Например вы поставили онлайн партнерский чат и скорость ваша сайта вместо 0.7 секунды стала 1.2 секунды. Вы потеряли в скорости но не так критически — насколько вас понизит показатель Гугл.

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

  1. Браузер Network — самый пожалуй точный показатель, который покажет производительность вашего сайта очень точно. Для примера покажу варианты сайта до оптимизации и после оптимизации. Наглядно видны следующие параметры:
  • Время первого отклика TTFB
  • Время загрузки Dom
  • Общее время прогрузки сайтов

Плюс к этому две полезные метрики как:

  • Количество запросов
  • Размер страницы сайта при загрузке

Смотрим на пример сайта с плохими показателями в NetWork 

2020 12 11 15 00 18
2020 12 11 15 00 18

А вот как эта же страницы выглядит с хорошим показателем уже оптимизированным.

2020 12 11 15 05 03
2020 12 11 15 05 03

Выделенные показатели и являются основным индикаторов замера скорости. 

3. Lighthouse тот самый параметр Гугл браузера Хром на котором построены как раз таки большинство браузеров. Он сделает оценку с учетом различных метрик, то есть это более правильный PageSpeed но с учетом именно важего железа, интернета. Если замерить через Lighthouse и PageSpeed вы заметите разницу в показателях. Она обьясняется очень просто: Lighthouse фиксирует показатели исходя из вашего железа и интернета, а PageSpeed берет вариант Motogp 4 и определенную скорость.

То есть пример снова страницы без оптимизации с моего замера LightHouse 

2020 12 11 15 08 32
2020 12 11 15 08 32

А теперь страница оптимизированная с моего железа

2020 12 11 15 09 27
2020 12 11 15 09 27

Вы спросите, а что же Gtmetrix или известный также Pingdom — это тоже тесты, причем первый собирает данные из нескольких тестов плюс добавляет условия свои, а второй просто имеет свой набор условий.

В целом при оценке сайта главное что вы должны понять: Необходимо оценивать реальные проблемы скорости сайта — их покажет любой тест и подтвердит Network. То есть если тесты вам говорят маленькую оценку, из за того что у вас стоит: Метрика, Аналитикс, Внешний чат, Шрифты Гугла, Поделиться Яндекс или что то еще — это не проблема. Но за них снимается баллов значительно кстати. Но тут мы подходим к выводу 2.

Поисковые системы снимают скорость с реального посетителя, у которого разное железо, разная скорость интернета и разное местонахождение. Поэтому сверяйте в 1 очередь и ориентируйтесь на Network в браузере — он даст вам точный показатель скорости загрузки сайта, без упора на синтетические условия как, а стоит ли у вас метрика и кешируется ли она.

Мифы про скорость сайта (неверные утверждения)

Пользовательский опыт можно оценить с помощью одной метрики. Хороший пользовательский опыт не фиксируется одним моментом времени. Он состоит из ряда ключевых этапов на пути ваших пользователей. Изучите различные показатели и отслеживайте те, которые важны для опыта ваших пользователей.

Пользовательский опыт можно описать с помощью одного «репрезентативного пользователя». Реальная производительность сильно варьируется из-за различий в пользовательских устройствах, сетевых подключениях и других факторах. Откалибруйте свою лабораторию и среду разработки, чтобы протестировать множество таких различных условий. Используйте полевые данные для информирования о выборе параметров тестирования для типа устройства (например, мобильное или настольное), сетевых подключений (например, 3G или 4G) и других ключевых переменных.

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

Выводы статьи (теперь правильное)

И последнее: если ваш сайт показывает хорошие цифры в PageSpeed а реальная скорость при оценке в Network у него низкая и сайт там долго грузится — это настоящая проблема скорости. Её надо устранять, она будет главной метрикой для поисковых систем. А цифры PageSpeed даже с плохой скоростью легко накрутить убрав все тяжелые плагины, скрипты, внешние вставки, уменьшив количество визуальных блоков и размеров веса картинок на сайте.

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

Добавить в избранное -пригодится

7 КОММЕНТАРИИ

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

  2. В каких случаях показатели скорости сайта в Pagespeed действительно важны и каким образом можно определить реальную скорость сайта?

  3. Каким образом поисковые системы собирают данные о скорости сайта от посетителей и как это может отразиться на показателях вебмастера?

  4. Учитывая ваше внимание к аспектам скорости сайта и инструментам, измеряющим эту скорость, мне интересно уточнить несколько моментов, которые вы подняли. Например, вы упоминаете, что сайт может иметь хорошие показатели в Pagespeed, но не столь оптимальные в других инструментах, таких как вебмастеры поисковых систем. Можете ли вы подробнее рассказать о том, какие конкретные показатели стоит учитывать при оценке скорости сайта?

    Также стало любопытно, что вы акцентируете внимание на том, что скорость это не единичный замер, а совокупность множества факторов. Как вы предлагаете подходить к анализу этих замеров? Возможен ли пример, когда сайт с хорошими показателями в Pagespeed демонстрирует низкую скорость загрузки на практике, и как это можно устранить?

    Кроме того, было бы полезно получить разъяснения о том, когда хорошая скорость по Pagespeed действительно имеет значение для SEO, а когда это может быть просто формальность. Часто ли встречаются случаи, когда владельцы сайтов фокусируются на цифрах, игнорируя реальное поведение пользователей? Возможно, стоит рассмотреть работу с реальными метриками пользовательского опыта, такими как First Contentful Paint (FCP) или Time to Interactive (TTI), которые могут дать более четкое представление о том, как пользователи воспринимают скорость загрузки.

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

26 − = 21

360 Javascript Viewer: Просмотр 360-градусных изображений на сайте — обзор и настройка

360 Javascript Viewer — это мощный инструмент для WordPress, который позволяет добавлять на сайт интерактивные 360-градусные изображения. С его помощью можно создавать эффектные визуальные...

3CX Free Live Chat, Calls & WhatsApp: Интеграция чата, звонков и WhatsApp на сайт — обзор и настройка

В современном мире онлайн-коммуникаций важно предоставлять клиентам удобные способы связи. Плагин 3CX Free Live Chat, Calls & WhatsApp позволяет интегрировать на ваш сайт сразу...

3D Viewer – WP 3D Model Viewer Plugin: Просмотр 3D-моделей на сайте — обзор и настройка

3D Viewer – WP 3D Model Viewer Plugin – это мощный инструмент для интеграции 3D-моделей на ваш сайт, созданный специально для WordPress. Этот плагин...

99minds Giftcard: Настройка подарочных карт для WooCommerce — обзор и настройка

Подарочные карты — это отличный способ привлечь новых клиентов и повысить лояльность существующих. Если вы используете WooCommerce для управления своим интернет-магазином, то плагин 99minds...

A WordPress Testimonial Plugin to Showcase Testimonial Slider, Testimonial Grid and More: Solid Testimonials: Управление отзывами и рекомендациями — обзор и настройка

Solid Testimonials — это мощный и гибкий плагин для WordPress, который позволяет легко управлять отзывами и рекомендациями на вашем сайте. С его помощью вы...

ACF: Better Search: Улучшение поиска с помощью Advanced Custom Fields — обзор и настройка

Если вы используете WordPress и Advanced Custom Fields (ACF) для создания кастомных полей, то наверняка сталкивались с проблемой поиска по этим полям. Встроенный поиск...

AI Image Generator by ChatGPT: Генерация изображений с помощью ChatGPT — обзор и настройка

AI Image Generator by ChatGPT — это инновационный плагин для WordPress, который позволяет создавать уникальные изображения с помощью искусственного интеллекта. Этот инструмент идеально подходит...

AI Proposal Builder: Создание предложений с помощью искусственного интеллекта — обзор и настройка

AI Proposal Builder — это инновационный плагин для WordPress, который позволяет автоматизировать процесс создания профессиональных предложений с помощью искусственного интеллекта. Этот инструмент идеально подходит...

AI Writer: Content Generator GPT | ChatGPT: Генерация контента с помощью GPT и ChatGPT — обзор и настройка

AI Writer: Content Generator GPT | ChatGPT — это мощный инструмент для автоматизации создания контента на основе искусственного интеллекта. Этот плагин позволяет генерировать тексты,...

ПОХОЖИЕ СТАТЬИ

Решение проблем с Mysql в WordPress, основные ошибки и их решения

Решение проблем с MySQL в WordPress может показаться сложной задачей, но с правильным подходом это вполне под силу даже начинающему пользователю. MySQL является не...

Использование MariaDB Galera Cluster для WordPress

Использование MariaDB Galera Cluster для WordPress может быть важным шагом в создании высоконадёжной и масштабируемой платформы для вашего сайта. Galera Cluster позволяет вам иметь...

Как восстановить MySQL или MariaDB базу данных WordPress

Восстановление базы данных MySQL или MariaDB для WordPress — это процесс, который может показаться сложным, но, следуя четким шагам, вы можете вернуть ваш сайт...

Как восстановить WordPress из резервной копии базы данных MySQL или MariaDB

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

Как восстановить резервную копию базы данных MySQL или MariaDB для WordPress

Восстановление резервной копии базы данных MySQL или MariaDB для WordPress — это задача, которая требует своего рода изящества и внимательности. Если ваша база данных...

Как изменить версию базы данных MySQL или MariaDB в WordPress

Изменение версии базы данных MySQL или MariaDB в WordPress может стать довольно актуальной задачей для веб-разработчиков и администраторов сайтов. Иногда это нужно для улучшения...

Как изменить движок базы данных MySQL или MariaDB в WordPress

Изменение движка базы данных MySQL или MariaDB в WordPress может показаться сложной задачей, но на самом деле, это процесс, который можно выполнить с минимальными...

Как изменить имя пользователя базы данных MySQL или MariaDB в WordPress

Изменение имени пользователя базы данных MySQL или MariaDB в WordPress может показаться сложной задачей, но на самом деле это всего лишь несколько простых шагов....

Как изменить кодировку базы данных MySQL или MariaDB в WordPress

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

Как изменить кодировку таблиц базы данных MySQL или MariaDB в WordPress

Чтобы правильно работать с базами данных в WordPress, важно понимать, какую роль играют кодировки. Исправление кодировки таблиц базы данных MySQL или MariaDB может предотвратить...

Как изменить пароль базы данных MySQL или MariaDB в WordPress

Изменение пароля базы данных MySQL или MariaDB в WordPress – это важный шаг для обеспечения безопасности вашего сайта. Если вы не наделали ошибок и...

Как изменить порт базы данных MySQL или MariaDB в WordPress

Чтобы изменить порт базы данных MySQL или MariaDB в WordPress, необходимо разобраться с тем, как это влияет на работу вашего сайта и какие шаги...
OK2WEB
OK2WEB
Более 12 лет занимаюсь разработкой и продвижением сайтов. Городские порталы, информационные и новостные сайты. Сейчас в основном разрабатываю интернет магазины и коммерческие сайты. Если у вас есть вопросы пишите, стараюсь оперативно ответить и помочь.