SI, он же Speed Index, он же Индекс Скорости Загрузки – показатель того, насколько быстро содержимое страницы становится видимым и интерактивным.
Хороший SI значительно повышает удобство восприятия, а это, в свою очередь, приводит к увеличению вовлеченности, снижению отказов и повышению коэффициента конверсии.
Как именно рассчитывается показатель
Важно уточнить: SI отличается от других схожих метрик тем, что не отмечает конкретное время в процессе загрузки страницы – как это делает, например, FCP или LCP.
У нас, кстати, есть материалы и по этим двум терминам. Почитать можно здесь и здесь (ссылка).
Speed Index рассчитывается с помощью захвата экрана загружающейся в браузере страницы. В зависимости от области просмотра Lighthouse (автоматизированный инструмент от Google, проводит аудит производительности и доступности сайтов и приложений) определяет визуальную завершенность каждого кадра и использует специальный модуль – Speedline Node.js – для получения результата.
Node.js – это программа, написанная на C++ (еще один язык программирования, очень популярный и массовый), которая обрабатывает и запускает JavaScript-код. Позволяет разрабатывать самые разнообразные приложения и сайты.
Почему SI вообще важен
Потому что пользователи априори ожидают быстрой загрузки страниц.
Исследования показывают, что страницы, загружающиеся в течение двух первых секунд, имеют значительно более высокую конверсию по сравнению с теми, которые загружаются две секунды и более.
Кроме того, Google в принципе учитывает скорость загрузки страниц как один из факторов ранжирования. И причем самых главных. «Быстрые» страницы лучше ранжируются и занимают более высокие результаты в SERP – странице с результатами поиска по запросам.
Яндекс, Google и прочие.
Отметим, что SI – не истина последней инстанции в любом случае. Представьте два сайта, которые загружаются на 100% одновременно, но с тем условием, что на первом контент начинает отображаться постепенно, а не в один момент, – как на втором. Значение SI у обоих будет одинаково, вот только первый куда ценнее – с точки зрения удобства пользования.
От чего зависит Speed Index
Начнем издалека. Что происходит, когда человек открывает сайт, скажем, онлайн-магазина? Его устройство инициирует серию запросов к серверу, на котором хранятся все элементы страницы: изображения, программные скрипты, типографика и прочее. Сервер, обработав эти запросы, возвращает данные обратно. Протяженность пути между сервером и пользователем решает то, как быстро это происходит: наибольшая эффективность достигается, когда данные физически расположены как можно ближе к получателю – с точки зрения сетевой инфраструктуры.
Разумеется, на конечную скорость (и, как следствие, на показатель Speed Index) также влияет качество подключения на стороне пользователя, но это уже скорее зона ответственности провайдера.
Упомянем и о «хопах» – просто для справки. Это промежуточные переходы, через которые перенаправляются данные. На каждом из них обязательно возникнет некоторая задержка, и то же самое случится на обратном пути. Чем больше этих «хопов», тем медленней доставляется контент и тем медленней будет грузиться страница сайта.
То есть централизация инфраструктуры с наибольшей вероятностью удлинит маршрут доставки трафика для части (если не для всех) пользователей. И даже если передачу обеспечивает только одна сеть оператора связи, то физическая передислокация на расстояние потребует больше времени.
Как улучшить скорость загрузки
Ниже – лучшие практики по улучшению SI.
Оптимизировать код
Можно оптимизировать код, чтобы тот выполнялся быстрее. Для посетителей это будет значить сокращение задержек и повышение отзывчивости страницы.
«Улучшить» здесь – это:
- Удалить ненужные строки, библиотеки и плагины. Как альтернативный вариант – найти более «легковесную» замену.
- Объединить то, что можно объединить.
- Включить кэширование – поможет избежать повторной подгрузки файлов.
Избавиться от задержки в шрифтах
Сайт может подгружаться медленнее, если используются необычные и нестандартные шрифты. Они могут появляться с задержкой. Чтобы этого не происходило (или происходило меньше), используются дескрипторы font-display: swap и font-display: optional – с ними текст будет оставаться видимым.
Дескрипторы – ключевой инструмент в программировании. Они позволяют детализировать функциональность объектов. Их использование дает разработчику возможность управлять доступом к атрибутам и методам, повышая организованность кода.
Как альтернативный вариант – оптимизировать шрифты, оставив только необходимые символы. По крайней мере для первоначальной загрузки. Это уменьшит размер файла и, как следствие, ускорит загрузку.
Наконец, кэширование. Сработает оно и тут – шрифты тоже можно «запомнить», чтобы посетителям не приходилось подгружать их из раза в раз.
