Анализ скорости просмотра страниц: 6 действенных советов по оптимизации вашего сайта

6 советов по оптимизации производительности вашего веб-сайта с помощью инструмента Page Speed Insights. Обеспечьте стабильное и быстрое взаимодействие с пользователем и сохраняйте стабильность вашего веб-сайта.

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

Вы, вероятно, уже слышали об инструменте Google PageSpeed Insights.

Но знаете ли вы, как получить максимальную отдачу от PageSpeed Insights? Мы рассмотрим 6 ключевых советов, которые помогут вам оптимизировать производительность вашего сайта.

Производительность сайта уже давно влияет на рейтинг Google. Соответственно, Google впервые запустила свой бесплатный инструмент PageSpeed Insights еще в 2010 году.

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

В 2021 году Google представила новый набор показателей эффективности веб-сайта, который называется . Эти три показателя:

Хорошее взаимодействие с страницей . Для каждого показателя, которого вам нужно достичь, существует порог оценки “Хорошо”.

График, показывающий пороговые значения рейтинга основных веб-показателей, сентябрь 2024 г.

Провести тест производительности с помощью PageSpeed Insights очень просто:

Результаты тестирования появятся всего через несколько секунд. Данных много, но мы объясним, что все это значит дальше.

Каждый результат тестирования в PageSpeed Insights состоит из двух ключевых разделов: “Узнайте, с чем сталкиваются реальные пользователи” и “Диагностируйте проблемы с производительностью”. В каждом разделе представлены данные о скорости просмотра страниц разного типа.

Эти данные собираются от пользователей Chrome на настольных и мобильных устройствах под управлением Android. Чтобы внести свой вклад в отчет CrUX, пользователям необходимо:

Хотите знать, учитывается ли ваш опыт в этих реальных пользовательских данных? Откройте URL-адрес chrome: / / ukm в вашем браузере Chrome и проверьте, включен ли сбор показателей.

Реальный пользователь сообщает вам, насколько быстр ваш сайт для реальных посетителей и как это влияет на ваше SEO.

Однако основной отчет также содержит некоторые ограничения:

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

Скриншот линии основных веб-показателей в мониторинге реальных пользователей DebugBear, сентябрь 2024 г.

В то время как реальные данные пользователей говорят вам о том, насколько хорошо работает ваш сайт, диагностические данные дают вам представление о том, как его оптимизировать.

PageSpeed Insights использует инструмент Google с открытым исходным кодом Lighthouse для тестирования вашего сайта и предоставления подробного анализа. Тест Lighthouse выполняется в контролируемой лабораторной среде, что .

Лабораторный тест также выполняется по запросу и на него не распространяется 28-дневная задержка, которая применяется к CrUX data.

В верхней части отчета Lighthouse Google показывает общий показатель производительности от 0 до 100. Этот показатель напрямую не влияет на рейтинг – Google использует для этого CrUX-данные. Однако хорошая оценка Lighthouse обычно означает, что ваш сайт также быстро загружается для реальных пользователей.

Оценка Lighthouse определяется на основе 5 показателей производительности:

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

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

Если вы хотите повысить свой показатель производительности с помощью PageSpeed Insights, с чего начать?

В каждом отчете Lighthouse есть ссылка “Просмотреть калькулятор”, которая ведет вас к . Этот инструмент показывает, какой вклад в общую оценку вносят пять показателей, измеренных Google.

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

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

Одним из наиболее эффективных аудитов часто является “Самый содержательный элемент Paint”.

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

Это очень полезно, но Lighthouse на самом деле предоставляет дополнительную информацию, разбивая (также называемые подразделами):

Эта информация подскажет вам, на чем вам нужно сосредоточиться при оптимизации.

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

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

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

However, you should still check the data for your website to see what optimizations can have the most impact.

Мы уже видели, что данные о реальных пользователях собираются в течение 28-дневного периода. Соответственно, их значение стабильно и меняется очень постепенно.

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

Существует, например:

Google написал . Вы можете запустить тесты несколько раз и посмотреть на среднее значение, чтобы получить более точную оценку.

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

В PageSpeed Insights используется подход, называемый . Измерения собираются при быстром сетевом соединении. После этого применяется имитация медленного 4G-соединения, чтобы оценить, как страница могла загрузиться на мобильное устройство.

Вы можете установить , чтобы просмотреть исходные наблюдаемые показатели при запуске теста в PageSpeed Insights.

Смоделированные данные , поскольку моделирование Lighthouse не обрабатывает все крайние случаи, которые могут возникнуть при открытии веб-сайта.

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

Однако исходные значения для первого показателя Continental Paint и для крупнейших показателей Contentful Paint были идентичны. Это говорит о том, что смоделированные показатели потенциально могут не соответствовать тому, что испытывают реальные пользователи.

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

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

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

Это потому, что тест Lighthouse . Данные CrUX Core Web Vitals показывают, что 25% пользователей заходят на ваш веб-сайт медленнее всего, но, как правило, даже эти посещения происходят с устройств, имеющих хорошее сетевое подключение.

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

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

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

Данные о скорости просмотра страниц в формате JSON, предоставленные API PageSpeed Insights, сентябрь 2024 г.

PageSpeed Insights - отличный инструмент для быстрого повышения производительности для определенного URL-адреса вашего веб-сайта. Однако, как мы видели выше, эти данные имеют некоторые ограничения.

Если вы просто хотите получить общий обзор основных веб-ресурсов вашего сайта, самый быстрый способ найти эти данные - использовать .

Search Console точно покажет вам, сколько страниц на вашем сайте работают медленно или нуждаются в улучшении.

Необходимо глубоко изучить производительность процессора, например, чтобы оптимизировать новое взаимодействие в соответствии со следующей метрикой Paint?

На представлен подробный анализ всех видов обработки ЦП, происходящих на вашем веб-сайте.

Наконец, если вы хотите оптимизировать загрузку различных ресурсов на вашем сайте, .

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

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

- это платформа мониторинга основных веб-ресурсов, которая позволяет вам постоянно тестировать как ваш собственный веб-сайт, так и сайты ваших конкурентов.

Помимо запланированного лабораторного тестирования, DebugBear также отслеживает данные Google CrUX и собирает реальную пользовательскую аналитику непосредственно на вашем сайте.

Реальные данные пользователей предоставляют широкий спектр информации, которая не только поможет вам отслеживать производительность, но и активно улучшать ее:

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

Однако, если вы хотите выйти за рамки данных, предоставляемых PSI, и постоянно тестировать свой веб-сайт, вы можете .

Эта статья была спонсирована DebugBear, и представленные здесь мнения отражают точку зрения спонсора.

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