Что такое настоящий замер скорости сайта 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 секунды. Вы потеряли в скорости но не так критически – насколько вас понизит показатель Гугл.

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

2. Браузер Network – самый пожалуй точный показатель, который покажет производительность вашего сайта очень точно. Для примера покажу варианты сайта до оптимизации и после оптимизации. Наглядно видны следующие параметры:

• Время первого отклика TTFB
• Время загрузки Dom
• Общее время прогрузки сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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