Индекс скорости: что это такое и как оптимизировать для него ваш веб-сайт

Индекс скорости (SI) - интересный показатель при рассмотрении скорости страницы. Это абсолютно показатель производительности вашей страницы, но он полностью отличается от других ориентированных на пользователя показателей, таких как First Contentful Paint и Largest Contentful Paint. SI показывает, насколько быстро ваш сайт загружается в верхней части страницы. Или, другими словами, когда весь контент в области просмотра пользователя полностью виден. Если посмотреть на время загрузки вашей страницы, вы вряд ли будете наказаны или вознаграждены за свой индекс скорости. Это не причина игнорировать это. Как единый показатель, это один из немногих показателей, который включает в себя множество других показателей и может дать вам твердое представление об общей скорости, эффективности и производительности вашего сайта.

Подпишитесь на наш канал Youtube

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

Lighthouse, основа Google для PageSpeed ​​Insights, анализирует несколько показателей производительности для оценки вашего сайта. Индекс скорости (SI) является одним из таких показателей, и отчет будет отображать время в секундах, а не в миллисекундах, как с некоторыми другими показателями. Google определяет SI как «насколько быстро содержимое страницы заполняется визуально».

Довольно прямолинейно, правда?

Индекс скорости не учитывает внутренние скрипты или другие незакрашенные нагрузки. Однако они влияют на это. SI - это просто мера того, сколько времени требуется пользователям, чтобы полностью увидеть ваш контент. Это кикер. В полном объеме . В то время как другие показатели , такие как LCP измеряется , когда отображаются самая большая часть содержания, Индекс скорости счета для любого и всего содержимого , которое должно отображаться на самом деле.

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

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

Как и в случае с большинством показателей производительности сайта, одним из лучших инструментов является собственный инструмент Google PageSpeed ​​Insights. Этот инструмент также является одним из самых выдающихся по результатам. Это относительно критично даже по отношению к самым хорошо продуманным сайтам. PageSpeed ​​Insights чаще всего предоставляет лабораторные данные для вашего сайта на основе совокупности данных за последние 28 дней. Однако, если у вас достаточно посетителей, которые передают информацию обратно в Google через Chrome, вы также можете получить из отчета реальные полевые данные . Однако не каждый сайт может это получить.

Как видите, скорость для многих из этих показателей находится в зеленой зоне. Это означает, что они «хорошие». Очевидно, это то место, где вы хотите разместить свой сайт. Однако индекс скорости составляет 4,0 секунды и оранжевый. Пользователю очень долго ждать, чтобы увидеть все, что написано выше.

Что такое оценка хорошего индекса скорости?

PageSpeed ​​Insights использует следующие баллы для ранжирования индекса скорости вашего сайта и соответствующего цвета:

• Зеленый (хороший) - от 0 до 3,4 секунды
• Оранжевый (умеренный) - от 3,4 до 5,8 секунды
• Красный (медленно) - более 5,8 секунды

Как мы уже говорили ранее, PageSpeed ​​Insights очень важен в своих измерениях. Если вы в оранжевом или красном цвете, вы можете использовать такой инструмент, как GTmetrix или Pingdom's Speed ​​Test, чтобы увидеть, что показывают их данные в реальном времени. Мы считаем, что лучше всего протестировать ваш сайт, используя несколько инструментов в разное время, чтобы получить наилучшее представление об общей производительности.

Как оптимизировать показатель индекса скорости

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

Уменьшите количество ресурсов, блокирующих рендеринг

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

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

Кроме того, пользователи WordPress могут использовать плагин кеширования (или плагин оптимизации сайта), такой как W3 Total Cache или WP Rocket, чтобы справиться с этим. Часто у этих плагинов есть простой переключатель, чтобы отложить ресурсы, блокирующие рендеринг.

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

Уменьшение нагрузки на основной поток вашего сайта

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

Самое простое решение - перестать использовать так много JavaScript . GTmetrix говорит об этом лучше всего:

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

Мы понимаем, что это может быть нелегко. Вы создали сайт так, чтобы он функционировал определенным образом. Однако может быть неиспользованный код, который вы можете удалить, и вы сможете оптимизировать любой сторонний JavaScript, который загружаете на свой сайт. Кроме того, сократите свой JavaScript.

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

Пользователи Divi, еще раз, имеют здесь преимущество, поскольку тема автоматически минимизирует и разбивает CSS и JavaScript на небольшие фрагменты для более быстрой пропускной способности, устраняя необходимость в большом количестве внимания со стороны вашего основного потока.

Индекс скорости Часто задаваемые вопросы

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

Как индекс скорости соотносится с общей производительностью моего веб-сайта?

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

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

Следует ли мне уделять особое внимание моей оценке индекса скорости?

Наверное, нет.

Хотя очень полезно провести сравнительный анализ вашего сайта, сосредоточив внимание на других, более детализированных проблемах, таких как First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to First Byte (TTFB) и First Input Delay (FID), очень много более важный. Вы можете предпринять любое количество шагов, чтобы улучшить их индивидуально, что, в свою очередь, улучшит ваш индекс скорости. А если взять его за общий тест, вы можете увидеть, насколько хорошо ваши оптимизации работают через SI.

Заключение

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

Что вы сделали для оптимизации индекса скорости своего веб-сайта за эти годы?

Статья Лучшее изображение от HappyDrawing / shutterstock.com