Блог / Статьи25 сентября 2018

Как проверить скорость загрузки сайта и сделать правильные выводы

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

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

Обратите внимание! Эта статья была написана до обновления PageSpeed Insights, вышедшего 12 ноября 2018 года, которое затронуло механизмы расчета оценок. Поэтому часть информации, представленной ниже, уже не актуальна. Изменился и интерфейс сервиса: сейчас он выглядит не так, как на скриншотах. Прочитать о том, что именно поменялось, вы можете по ссылке. Однако, общие принципы анализа результатов, описанные в разделе «Как понять, что именно нужно оптимизировать?» в основном остались актуальными. В дальнейшем мы планируем выпустить обновленную версию этой статьи, в которой расскажем, как пользоваться новой версией инструмента. (Добавлено 15.11.2018)

Сервисы для проверки скорости загрузки

Мы в Arto Web Agency пользуемся преимущественно двумя инструментами для проверки. Первый из них – Google PageSpeed Insights. Его интерфейс прост и понятен: строка для ввода адреса сайта, кнопка «Анализировать», после нажатия на которую вы получите краткий и удобный отчет. Стоит отметить: PageSpeed Insights анализирует не весь сайт, а конкретную страницу. Если вы ввели адрес главной, то она и будет проверена.

Отчет PageSpeed Insights для небольших и не очень посещаемых сайтов не выдает оценки времени загрузки страницы в секундах, а просто оценивает оптимизацию скорости по собственной шкале от 0 до 100. Величина меньше 60 означает низкий уровень оптимизации (красная зона), от 60 до 79 – средний уровень (желтая зона), 80 и выше – хороший уровень (зеленая зона). При этом информация в отчете находится на двух вкладках: настольные компьютеры и мобильные устройства, для каждой из которых показатель считается отдельно.

Пример отчета PageSpeed Insights

Что касается крупных и посещаемых интернет-порталов, то для них в отчете появляется отдельная графа Page Speed, где отображаются две метрики: First Contentful Paint (FCP) показывает время, после которого пользователь начинает видеть прорисовку хотя бы одного элемента страницы, а DOM Content Loaded (DCL) – время, за которое HTML-контент страницы загружается полностью. Эта информация берется из отчета об удобстве пользования браузером Chrome и основана на взаимодействии реальных пользователей с сайтом, поэтому может быть показана только тогда, когда данных для этого достаточно.

Пример отчета для сайта, который есть в базе Chrome User Experience Report

Ниже в таком отчете отображаются наглядные диаграммы, на которых видно распределение пользователей сайта по показателям FCP и DCL. Здесь можно увидеть, у какого процента посетителей каждая из метрик была оценена как «медленно» (красный цвет), «средне» (желтый) или «быстро» (зеленый).

Сравнительно недавно для сайтов, которые фигурируют в Chrome User Experience Report, появилась дополнительная функция: по команде «origin:», набранной перед адресом, или по ссылке в отчете вы сможете перейти к усредненным данным о скорости загрузки всех страниц ресурса. Ссылку можно увидеть, если вы ввели адрес страницы, для который недостаточно статистических данных о загрузке, при условии, что такие данные имеются для других страниц сайта.

Пример отчета со ссылкой на усредненные данные по сайту

Другая важная составляющая отчета PageSpeed Insights – советы по оптимизации, находящиеся внизу. Именно здесь вы можете увидеть, что стоит сделать, чтобы ускорить страницу. Всего в «арсенале» этого инструмента есть 10 правил, по каждому из которых, если необходимо, выдаются рекомендации.

Рекомендации PageSpeed Insights по улучшению страницы

У PageSpeed Insights есть еще один важный показатель, который, к сожалению, не отображается в обычной веб-версии сервиса. Это так называемый Impact – число, которое показывает, насколько сильно определенное правило влияет на скорость загрузки в сравнении с остальными. По его величине можно понять, какие факторы наиболее сильно замедляют страницу. Увидеть этот показатель можно, воспользовавшись APIs Explorer. Чтобы запустить анализ, заполните поле «URL» (остальные можно оставить пустыми) и нажмите Execute. Сделайте поиск по фразе «ruleImpact» в тексте отчета, чтобы быстро найти данный параметр для каждого из 10 правил.

Фрагмент отчета PageSpeed Insights API Explorer с показателем Impact для правила «Оптимизируйте изображения»

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

Пример отчета GTmetrix

GTmetrix также анализирует за одну проверку только одну страницу – ту, адрес которой вы ввели. Функции, подобной команде «origin:», в этом инструменте нет. Отчет GTmetrix состоит из нескольких вкладок:

  • данные PageSpeed Insights API (сразу в виде рекомендаций, а также с оценками выполнения правил по 100-балльной шкале, выведенными из того же параметра Impact);
  • данные сервиса YSlow, разработанного компанией Yahoo! – также с оценками различных правил, которые во многом перекликаются с первой вкладкой;
  • визуализация времени загрузки различных ресурсов страницы;
  • отображение ключевых метрик загрузки на временной шкале (для зарегистрированных пользователей);
  • создание видеозаписи загрузки страницы (для зарегистрированных);
  • исторические данные о скорости загрузки (если доступны).

Как понять, что именно нужно оптимизировать?

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

  • В PageSpeed Insights разверните каждый совет и посмотрите, какой объем трафика предположительно сэкономит его выполнение. Существенной можно считать экономию примерно от 30 КБ. Так, если сжатие изображений уменьшит общий вес страницы на 200 КБ, а минификация CSS-стилей – лишь на 2 КБ, то можно спокойно сосредоточиться на первом пункте; второй не окажет заметного влияния на скорость. Если копнуть глубже, то может оказаться, что сжатие одного изображения даст 100 КБ экономии, а другого – 1 КБ; здесь также очевидно, что первое принесет ощутимый эффект, а второе – нет.
  • Используя APIs Explorer, сравните показатели Impact для разных правил. Так вы в наиболее упрощенной форме увидите, что, например, самый сильный эффект на загрузку вашей страницы оказывают подключаемые ресурсы в голове документа. Можно комбинировать этот способ с первым: PageSpeed Insights покажет вам, какие именно файлы тормозят загрузку, и вы сможете принять решение о том, какие из них можно загружать асинхронно.

Сравнение показателей Impact в PageSpeed Insights API Explorer. В приведенном примере хорошо видно, что наибольший вклад в оптимизацию загрузки страницы сделает внедрение правила “Eliminate render-blocking JavaScript and CSS in above-the-fold content” – устранить скрипты и файлы стилей, которые блокируют рендеринг первого экрана страницы

  • Если на вашем сайте установлены скрипты Google Analytics, то вы, скорее всего, увидите «проблему» в разделе «Используйте кэширование браузера»: PageSpeed Insights включит их в оценку как некэшируемые ресурсы. В действительности, разработчики не рекомендуют кэшировать эти скрипты, так что этот пункт можно проигнорировать. Однако, если уж вам не дает покоя эта проблема, то для сайтов на Wordpress существует специальный плагин, который сохранит скрипт Google Analytics на вашем сервере и позволит помещать его в кэш пользователям сайта. Этот плагин затем ежедневно проверяет, не изменился ли скрипт на сервере Analytics и, если это случилось, то скачивает его, перезаписывает локально, выдает новую версию пользователям и «просит» браузер поместить в кэш уже свежий скрипт.
  • Если проблема отображается в графе «Не используйте переадресацию с целевой страницы», то проверьте, правильно ли вы ввели адрес сайта: например, указали ли www, если адрес сайта действительно начинается с www. Иногда, впрочем, рекомендации в этом разделе бывают справедливы (например, если сайт сразу перенаправляет пользователя на какую-либо языковую версию), но это случается довольно редко.
  • Некоторые советы сервисов по оптимизации внедрить будет проще, другие – сложнее. Учитывайте, что такие манипуляции, как, например, включение сжатия GZip, кэширования и, в особенности, уменьшение серверной задержки, требуют доступа к серверу, на котором расположен сайт. Часто такой функционал отсутствует, например, на централизованных платформах для создания интернет-магазинов.
  • Не нужно стремиться к выполнению всех рекомендаций PageSpeed Insights или GTmetrix. Если сжатие того или иного рисунка, минификация таблицы стилей или JS-файла принесет его уменьшение лишь на 1-2 КБ, то это обычно не стоит внимания. Ориентируйтесь на общую величину страницы около 1 МБ (чем меньше, тем лучше) – сервисы считают этот показатель приемлемым. Для задержки сервера нормой считается величина в 0,2 секунды и меньше; если у вашего сайта этот показатель лишь незначительно выше (например, 0,23 секунды), то его оптимизация, скорее всего, не даст сильного эффекта.

Выводы

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

  • общий показатель оптимизации скорости загрузки – если он в «зеленой» зоне, то, возможно, ускорение и не требуется; если же в «красной», то правки критически важны;
  • вклад (Impact) отдельных правил в этот показатель;
  • примерную экономию загрузки (в килобайтах трафика или секундах времени), которую принесет оптимизация каждого правила;
  • количество файлов, над которыми нужно поработать для оптимизации того или иного параметра (например, число изображений для сжатия или скриптов/стилей для переноса);
  • необходимость привлечения технических специалистов к работе;
  • возможные препятствия для оптимизации (отсутствие доступа к серверу и т.д.).

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

КОММЕНТАРИИ
КОММЕНТИРОВАТЬ
ВОЙТИ
  • Facebook
  • Twitter
  • Google
ЭТОТ САЙТ ИСПОЛЬЗУЕТ COOKIES
Мы используем cookies для анализа трафика, обеспечения функций социальных сетей и работы системы комментирования на сайте. Список устанавливаемых cookies находится на этой странице. Согласны ли вы на установку cookie?