Что такое индекс скорости: Индексы нагрузки и скорости — Интернет-магазин Колесо72

Содержание

Индекс скорости | GTmetrix

Индекс скорости (SI) — это показатель производительности, который измеряет, насколько быстро ваша страница визуально завершается в верхней части страницы.

SI зависит от размера порта просмотра браузера и отличается от других показателей, таких как первая отрисовка контента (FCP) или самая большая отрисовка контента (LCP), поскольку он не является вехой на временной шкале загрузки вашей страницы.

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

SI очень сильно привязан к времени загрузки других страниц. Это делает его полезным общим эталоном для оценки производительности вашего веб-сайта в целом.

Как оценивается ваш сайт по этому показателю?

Что измеряет индекс скорости?

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

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

Метрика индекса скорости измеряет, насколько визуально завершена ваша страница, анализируя ее загрузку, кадр за кадром.

Затем отдельные баллы добавляются для расчета индекса скорости страницы. Нажмите здесь, чтобы узнать больше о том, как рассчитывается SI.

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

Думайте об индексе скорости как об унифицированной метрике, которая учитывает многие другие метрики и аудиты.

SI сама по себе не дает вам много полезной информации. Тем не менее, он представляет собой практичный способ определить, работает ли ваша оптимизация скорости страницы.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72

Влияние индекса скорости на показатель производительности

Индекс скорости составляет 10% от общей оценки производительности .

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

Пороги для индекса скорости

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

Пороги SI следующие:

  • Хорошо — здесь нечего делать = SI 1311 миллисекунд или меньше.
  • ОК, но рассмотрим улучшение = SI между 1311 и 1711 миллисекундами.
  • Длиннее рекомендуемого = SI между 1711 и 2300 миллисекундами.
  • Намного дольше, чем рекомендуется = SI выше 2300 миллисекунд.

Как улучшить индекс скорости?

Обратите внимание, , что конкретные аудиты, упомянутые ниже, вероятно, внесут наибольший вклад в ваш SI; однако на Индекс скорости вашей страницы также могут повлиять другие оптимизации, не упомянутые здесь.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72

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

Освобождение основного потока на более длительное время, в частности, гарантирует, что браузер сможет быстрее загружать весь видимый контент для посетителей вашей страницы (т. е. более быструю визуальную полноту). Некоторые из оптимизаций здесь включают:

  • 1) Сокращение времени выполнения JavaScript
  • 2) Минимизация работы основного потока
  • 3) Удаление неиспользуемого JavaScript
  • 4) Уменьшение влияния стороннего кода
  • 5) Замена больших библиотек JavaScript меньшими альтернативами

Примечание. Некоторые проверки Структуры связаны друг с другом; улучшение одного, вероятно, приведет к улучшению других.

Объяснение индекса скорости — еще один способ измерения веб-производительности

Коди Арсено

Опубликовано 27 июля 2017 г.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72 веб-производительность? Когда мы говорим о скорости, на самом деле нужно учитывать десятки показателей. Например, стартовый рендеринг, первая отрисовка и первая осмысленная отрисовка — все эти термины используются для описания скорости загрузки страницы, но все они технически измеряют разные вещи. За последние полвека все факторы, влияющие на воспринимаемую и фактическую производительность веб-пользователя, были сведены к понятию индекса скорости.

Что такое индекс скорости?

Проще говоря, индекс скорости — это количество миллисекунд, которое требуется для отображения видимых частей веб-страницы . Хотя это описание звучит широко, разработчики придумали специальные формулы, которые пытаются измерить воспринимаемый пользователем опыт. Метрика индекса скорости была создана и добавлена ​​в WebPageTest еще в 2012 году. Она выражается в виде числовой оценки, при этом более низкая оценка считается идеальной. Вы обнаружите, что индекс скорости веб-страницы различается в зависимости от размера порта просмотра.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72

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

Термин «индекс скорости» может использоваться в разных контекстах; например, в Google Lighthouse есть показатель под названием «Индекс скорости восприятия», который немного отличается. В этой статье речь пойдет конкретно о , как WebPageTest измеряет индекс скорости , но все приведенные ниже советы могут помочь улучшить общую производительность вашего веб-сайта.

Зачем нужен индекс скорости?

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

Два надежных метода повышения индекса скорости:

  1. Оптимизация эффективности контента
  2. Оптимизация критического пути рендеринга

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

Источник: Google

Какое значение имеет скорость?

Всем известно, что существует сильная корреляция между временем загрузки веб-сайта и показателем отказов. Многие разработчики также знают, что прогрессивный рендеринг или загрузка контента последовательно, а не сразу, побуждает посетителей ждать, пока загрузится остальная часть страницы.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72 Хотя сегодня все это звучит интуитивно, не все знают, что на самом деле существуют исследования, позволяющие количественно определить, насколько важны эти факторы. По данным британской SEO-фирмы Hobo-Web:

  • На Ancestory.com число конверсий увеличилось на 7 процентов за счет улучшения времени рендеринга их веб-страниц на 68 процентов, уменьшения раздувания страниц на 46 процентов и сокращения времени загрузки на 64 процента.
  • AliExpress сократил время загрузки своей веб-страницы на 36 процентов и увеличил количество заказов на 10,5 процента, а также увеличил коэффициент конверсии для новых посетителей на 27 процентов.
  • Телеграф зафиксировал 11-процентное падение просмотров страниц из-за 4-секундной задержки, вызванной искусственной задержкой.
  • Сокращение задержки всего на 0,3 секунды в их воронке принесло Trainline дополнительно 8 миллионов фунтов стерлингов годового дохода !

Как рассчитывается индекс скорости?

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

 Интервал времени * (1 - визуальная полнота/100)
 

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

Этому теоретическому веб-сайту требуется 3500 миллисекунд, чтобы загрузить весь его контент. Если вы примените упрощенную формулу к каждому из шести интервалов, вы получите 500, 450, 350, 300, 200, 100 и 0 соответственно. Сложите все это, и вы получите индекс скорости 1900. Ниже приведены расчеты для каждых 500 мс внутреннего времени. ) = 350

  • 500 * (1-40/100) = 300
  • 500 * (1-60/100) = 200
  • 500 * (1-80/100) = 100
  • 500 * (1-100 /100) = 0
  • Хотя вы всегда хотите, чтобы ваш показатель индекса скорости был как можно ниже, все, что ниже 1000, обычно считается оптимальным, поэтому веб-сайт в приведенном выше примере, вероятно, мог бы выиграть от некоторой оптимизации.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72 Тем не менее, большинство реальных веб-сайтов имеют гораздо более высокие оценки. NCC Group проанализировала домашние страницы 50 ведущих ритейлеров Великобритании и обнаружила, что

    средний показатель индекса скорости составлял от 3000 до 8500 .

    Как улучшить индекс скорости: Прогрессивный рендеринг

    Прогрессивный рендеринг — не единственная практика; это набор методов, которые вы можете выбрать, чтобы адаптировать свой веб-сайт к потребностям ваших посетителей. Ниже приведены некоторые меры, которые можно предпринять для улучшения прогрессивного рендеринга вашего веб-сайта:

    1. Используйте отложенную загрузку изображений

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

    2. Добавьте заполнители

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

    3. Воспользуйтесь прогрессивными изображениями

    Говоря об этом, прогрессивные изображения позволяют отображать изображения поэтапно, начиная с аппроксимаций низкого разрешения и затем переходя к полному изображению. Настройка этого процесса немного отличается в зависимости от формата изображения. Ознакомьтесь с этим полным руководством по прогрессивным файлам JPG, чтобы узнать больше о преимуществах прогрессивной загрузки изображений.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72

    Как улучшить индекс скорости: оптимизировать эффективность контента

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

    1. Удалите ненужные загрузки

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

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

    2. Сжатие данных

    Сжатие ресурсов вашего веб-сайта — это простой и эффективный способ сэкономить место, сократить время загрузки и повысить общую скорость вашего сайта. Независимо от того, используете ли вы проверенный и надежный метод, такой как Gzip, или более новый алгоритм сжатия, такой как Brotli, сжатие ваших данных является обязательным.

    3. Создайте иерархию кэширования

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

    • Проведите аудит, чтобы определить оптимальное время жизни кэша для каждого ресурса.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72
    • Убедитесь, что на вашем сервере указан валидатор кеша.
    • Реализовать очистку кеша.
    • Используйте промежуточные кэши, такие как сети доставки контента.

    4. Оптимизируйте изображения

    У вас есть множество вариантов оптимизации изображений. Например:

    • Предпочтение отдается векторным форматам, поскольку они не зависят от разрешения и масштаба.
    • Используйте сжатие без потерь или с потерями, чтобы уменьшить общий размер изображений
    • Рассмотрите свои приоритеты и выберите наиболее подходящий формат изображения для каждого отдельного актива.
    • Не бойтесь экспериментировать с настройками качества изображения, так как иногда вы можете значительно ускорить работу своего веб-сайта, лишь немного снизив разрешение изображения.
    • Измените размер изображений на вашем сервере, чтобы размер экрана соответствовал исходному размеру изображения, или используйте атрибуты размера srcset.
    • Если возможно, инвестируйте средства в автоматизированный инструмент сжатия изображений, который всегда будет оптимизировать ваши графические ресурсы.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72

    5. Оптимизируйте свои шрифты

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

    • Ограничьте количество используемых шрифтов и используйте как можно меньше вариантов.
    • Настройте шрифты так, чтобы загружались только те символы, которые вам нужны.
    • Предоставьте все шрифты в любом формате, включая WOFF2, WOFF, EOT и TTF. Не забудьте применить сжатие Gzip к форматам EOT и TTF, поскольку по умолчанию они не сжимаются.
    • Поскольку шрифты являются статическими и редко требуют обновлений, вы можете оптимизировать стратегию кэширования, указав маркеры повторной проверки.

    Ограничения индекса скорости

    Метрика индекса скорости имеет несколько ограничений, о которых следует помнить. Если вы тестируете динамический веб-сайт или одностраничное приложение, использующее Ajax, ваша оценка будет искусственно завышена, поскольку страница не обновляется после загрузки.Что такое индекс скорости: Индексы нагрузки и скорости - Интернет-магазин Колесо72

    Ответить

    Ваш адрес email не будет опубликован. Обязательные поля помечены *