Показатели скорости страницы за пределами времени загрузки страницы

  1. Google Analytics и PageSpeed ​​Insights
  2. Ориентированные на пользователя метрики скорости страницы
  3. Первая краска
  4. Первая значимая краска
  5. Время в интерактив
  6. Оптимизировать водопад

Скорость страницы - одна из самых важных метрик в техническом SEO сегодня. Пользователи ожидают, что страница загружается быстро, и быстро отказываются от страниц, загрузка которых занимает слишком много времени; по факту, исследование для одного интернет-магазина обнаружил, что увеличение времени загрузки страницы всего на 1 секунду привело к увеличению отказов на 56%.

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

Имея это в виду, маркетологам в современной сети следует внимательно следить за временем загрузки страницы и показателями скорости страницы.

Google Analytics и PageSpeed ​​Insights

При отслеживании скорости страницы первое место, на которое будет обращать внимание большинство маркетологов, - это отчет о скорости сайта в Google Analytics:

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

Примечание. Если вы регулярно используете отчет «Скорость сайта», вы можете рассмотреть возможность увеличения частоты дискретизации. По умолчанию Google Analytics выбирает только 1% пользователей для оценки скорости сайта; увеличение частоты выборки даст вам больший размер выборки, что может привести к получению более точных данных. Получить код здесь ,

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

Чтобы получить доступ к PageSpeed ​​Insights, откройте соответствующую страницу в окне браузера Chrome, затем выберите «Просмотр»> «Разработчик»> «Инструменты разработчика»> «PageSpeed ​​Insights».

По моему мнению, есть две большие проблемы, связанные с использованием исключительно отчета о скорости сайта в Google Analytics и PageSpeed ​​Insights для рекомендаций по оптимизации скорости:

  • Рекомендации PageSpeed ​​Insights сосредоточены на том, как сделать так, чтобы существующая страница со всеми ее ресурсами загружалась быстрее; часто можно улучшить скорость, изменив содержимое страницы.
  • Как отчет о скорости сайта, так и PageSpeed ​​Insights фокусируются на времени, необходимом для полной загрузки страницы, что дает неполное представление о том, как пользователь загружается при загрузке страницы. Глядя на среднее время загрузки страницы также скрывает тот факт, что разные пользователи могут испытывать разное время загрузки в зависимости от их устройства, браузера и подключения.

К счастью, в Chrome Dev Tools появился новый инструмент, который называется Lighthouse Audits.

Хотя некоторые из аудитов, включенных в Lighthouse, менее полезны, чем другие (их аудит «SEO», например, предоставляет крайне неполное представление о факторах, влияющих на производительность в органическом поиске), их аудит эффективности - отличный взгляд на более детальную страницу метрики скорости, особенно те, которые важны для мобильного устройства, где скорость страницы становится еще более важной. Давайте посмотрим на некоторые из этих метрик:

Ориентированные на пользователя метрики скорости страницы

Время до первого байта

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

Как оптимизировать его: в идеале, ваш TTFB должен быть менее 200 миллисекунд; если это невозможно для вашего сайта, установите TTFB менее 500 миллисекунд. Поскольку TTFB отчасти является мерой скорости отклика вашего сервера, вы не всегда можете многое сделать для его улучшения, не считая переключения серверов или хостинг-провайдеров. Однако вы часто можете улучшить TTFB, оптимизировав существующий сервер и используя кэширование, чтобы уменьшить часть вашей страницы, которая должна динамически обслуживаться при каждой загрузке страницы.

Первая краска

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

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

Первая значимая краска

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

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

Время в интерактив

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

Как оптимизировать его: хороший быстрый TTI - это хорошо (для всех этих метрик эмпирическое правило должно быть «быстрее, лучше»), но почти так же важно убедиться, что время между вашей первой значимой краской и вашим TTI как можно короче. Ничто так не расстраивает пользователей, как просмотр ссылки и возможность щелкнуть по ней; или читая статью, но не в состоянии прокрутить вниз. Чтобы оптимизировать интерактивность, убедитесь, что код, который визуализирует элементы, визуально и код, который позволяет им получать входную нагрузку в короткой последовательности. Вам также следует избегать длинных задач, которые могут связать основной поток и предотвратить интерактивность, разбивая большие куски кода на более мелкие части, которые затем могут загружаться асинхронно. Наконец, везде, где это возможно, уменьшите зависимость вашей страницы от сторонних ресурсов для загрузки, поскольку они также могут связать основной поток.

Оптимизировать водопад

Аудит Lighthouse - это отличный бесплатный инструмент, позволяющий начать углубляться в некоторые из этих более продвинутых показателей скорости загрузки страниц. В UpBuild мы также используем инструмент под названием GTMetrix , Зарегистрированные пользователи GTMetrix могут просматривать тайминги производительности страницы; их бесплатный инструмент также позволяет просматривать водопад страницы, диаграмму всех ресурсов, загружаемых страницей, в порядке их загрузки.

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

связанные с