Добрый день! Мы продолжаем серию полезных материалов по скорости и доступности сайта и сегодня расскажем об одной из ключевых метрик — индексе скорости.
Индекс скорости (speed index) в последнее время вызывает большой интерес. Но что он из себя представляет и как вычисляется? Зачем он понадобился, ведь и так достаточно различных метрик, зачем придумывать еще одну?Что такое индекс скорости?Развитие сетей передачи данных изменило пользователей и их реакции — теперь все ожидают, что страницы будут загружаться быстро, и задержки при отрисовке визуального контента вызывают у пользователей раздражение.
Для измерения влияющих на восприятие веб-страницы параметров существует несколько метрик, но насколько они описывают реальные впечатления пользователей?Например, время до начала отрисовки визуальных элементов — но ведь отрисовка может начаться и с пустого белого фона, и со случайного элемента и, в конце концов, с какого-то пикселя, и неизвестно, сколько еще будет ждать пользователь, сидя перед пустым экраном, прежде чем там появится что-то осмысленное.
Время полной загрузки тоже не всегда показательно — если оно определяется по триггеру OnLoad, то оно может оказаться больше из-за отложенной загрузки элементов, или, наоборот, механизм отложенной загрузки может выдать срабатывание этого триггера при еще практически пустом экране, например, если все визуальные элементы расположены в невидимой части страницы (below-the-fold).Поэтому, чтобы преодолеть эти и другие ограничения существующих метрик, и был придуман индекс скорости. Он, в некотором смысле, обратный к времени загрузки, и чем он меньше, тем быстрее грузится страница. Индекс скорости берет в расчет скорость загрузки видимой части страницы (above-the-fold). Такой подход гораздо лучше описывает воспринимаемую пользователем производительность страницы, но означает ли это, что другие метрики нерелевантны? Это открытый вопрос.
Наверное, все-таки тут есть определенная свобода выбора — в зависимости от особенностей того или иного веб-сайта надо анализировать различные показатели, выбирая из них те, что наиболее точно отражают ситуацию в данном конкретном случае.Насколько релевантен индекс скорости?Индекс скорости показывает, быстро или медленно загружается визуальный контент. Чем он меньше, тем лучше, тем позитивнее воспринимают страницу пользователи, и наоборот. Также его можно использовать в качестве индикатора — надо ли оптимизировать вашу страницу или нет. Чтобы индекс скорости был небольшим, надо оптимизировать две стороны — сделать контент более эффективным и оптимизировать порядок загрузки.
Порядок загрузки страницы
Веб-приложения продолжают усложняться, наращивая тем самым свою функциональность, удобство пользования и привлекательность. Но это достигается путем добавления все новых ресурсов, которые требуют времени на загрузку. Индекс скорости показывает, как быстро важный контент страницы становится видимым посетителю. Но то, как он рассчитывается, несколько запутано.Как вычисляется индекс скорости?Для вычисления индекса скорости весь визуальный контент в видимой части страницы (above the fold) делится на кванты, кадры.
Для совершенно пустого экрана завершенность загрузки 0%, для полностью загруженного — 100%. Для промежуточных — соответствующее число процентов. И тогда, если кадр грузился некоторое время, то его индекс скорости вычисляется по формулеВремя загрузки*(1- завершенность/100%)И полученные числа суммируются. Сумма и будет индексом скорости.Вот, к примеру:
Индекс скорости
Индекс скорости
И сумма будет500 + 450 + 350 + 200 + 50 = 1550Чем меньше полученное число, тем лучше. Если индекс оказался меньше 1000 — это довольно не плохо. А для посетителей важно, насколько быстро загружается видимая часть страницы. Чем быстрее, тем лучше их впечатления от сайта.Измерение индекса скоростиЕсть различные решения для измерения индекса скорости. В частности, его измеряет сервис WebPageTest.org.Ниже несколько примеров:
Индекс скорости пример
В этом примере страница имеет хороший индекс скорости — 1260. Видно, что уже со второго фрейма (фреймы взяты с интервалом 500 мс) весь визуальный контент уже отрисовался. И для пользователя воспринимаемое время загрузки — порядка 1 секунды.
Индекс скорости пример
В этом примере контент прогрузился только к третьему кадру, а первые два были совершенно пустыми. Отсюда и больший индекс — 1741, для пользователя страница оказалась полностью загруженной только через 1.6 секунды.
Индекс скорости пример
Здесь больше подробностей. Первые два кадра оказались пустыми. На третьем появилась часть контента, на четвертом — еще часть, но только к пятому кадру весь визуальный контент стал видимым. Довольно медленно, и в итоге индекс скорости оказался 2377.Заметим, что во всех трех примерах отрисовка (render start) начинается раньше, чем пользователь уже видит что-то на странице. Во втором примере рендеринг начался на 1195 миллисекунде, а видимый контент появился на 1604 миллисекунде.
В третьем примере рендеринг стартовал на 1296 миллисекунде, а контент стал видимым на 1597 миллисекунде. В этом уникальность индекса скорости. Для плохо оптимизированных сайтов эта разница будет значительна — рендеринг может начаться рано, но визуальный контент появится на странице лишь спустя продолжительное время. Индекс скорости может вскрыть эту проблему и позволить вам улучшить показатели своей страницы.Ограничения индекса скоростиЕсли на странице используется ajax, то при измерении производительности обновления содержания индекс скорости может оказаться заниженным — обновление страницы происходит лишь частично и основной контент не загружается вновь.Наличие на странице различных каруселей контента может завышать индекс скорости — визуальный контент на странице постоянно обновляется, и система тестирования может решить, что страница все еще грузится.
В заключение отметим, что индекс скорости описывает визуальную завершенность страницы. Однако он «не разбирается» важен для пользователя или нет именно тот контент, что принят в расчет. Поэтому он не может заменить другие метрики и является лишь важным и нужным дополнением к уже существующим показателям. Вам все равно надо смотреть на время начала рендеринга и полное время загрузки страницы. Но индекс скорости дает способ измерить те параметры, которые важны для восприятия вашей страницы посетителями.
Можете проверить скорость загрузки сайта и его доступность в разных регионах на сайте host-tracker.com
Посмотреть скорость загрузки сайта, порядок загрузки составляющих, их скорость и другие параметры загрузки можно на WebPageTest.org