Скорость загрузки сайта — это время, которое проходит от момента перехода пользователя по ссылке до отображения всего содержимого веб-страницы. За этот период браузер получает первый пакет информации, техническими словами «первый байт с сервера». Этот показатель измеряется в секундах или миллисекундах отдельно на десктопных и мобильных устройствах. В статье мы расскажем подробно как проводить анализ скорости сайта, на что обращать внимание и какими инструментами пользоваться.
Скорость страницы и скорость сайта — это два разных показателя. Первый касается одной конкретной страницы, а второй представляет собой среднее значение для нескольких выборочных страниц на сайте.
О чем идет речь?
- Зачем нужен анализ скорости сайта?
- Показатели скорости сайта или веб-страницы
- Инструменты для проверки скорости сайта
- Что влияет на скорость загрузки веб-страницы?
- Как ускорить скорость загрузки сайта?
- Выводы
Зачем нужен анализ скорости сайта?
Представьте: вы пришли в ресторан, чтобы поужинать после тяжелого рабочего дня, но вынуждены 5 минут ждать официанта. Проходит еще 10 минут после того, как ваш заказ приняли, но обслуживают все столики, кроме вашего. Еще 20 минут ожидания, и вы уже не обращаете внимание на вкус блюда, его аромат и изысканность. Вам кажется, что ужин не стоит тех денег, которые вы за него заплатили. Не оставляя чаевых, вы съедаете содержимое тарелки и идете домой, больше никогда не возвращаясь в это заведение.
Аналогичные ситуации происходят и в интернете. Пользователи хотят «потреблять» информацию быстро. Согласно многочисленным исследованиям, люди покидают сайт и ищут альтернативный вариант, если веб-ресурс загружается дольше, чем в течение 3-х секунд.
К сожалению, значительное количество интернет-магазинов и сайтов других типов имеют проблемы с загрузкой в десктопе из-за большого количества контента, интерактивных элементов и технических недоработок. Еще хуже ситуация для мобильных устройств. Более 70% пользователей, которые проводят время в интернете со смартфонов и планшетов, сталкиваются с проблемой медленной или неполной загрузки. Известно, что коэффициент конверсии на мобильных устройствах ниже, чем на десктопные. И это при том, что более 50% общего веб-трафика приходится на мобильные устройства.
«Помните, что мобильные страницы рассматриваются отдельно для результатов SEO. Мобильные страницы вашего сайта не наследуют автоматически SEO-рейтинг основного сайта. Пользователям, осуществляющим поиск на мобильных устройствах, рейтинг страницы рассчитывается отдельно на основе скорости мобильной страницы сайта, а не на основе скорости основной страницы сайта. Это означает, что владельцы сайтов должны уделять столько же внимания (если не больше) скорости мобильной версии сайта». «The Importance Of Page Speed Optimization», — Chuck Kim, former Forbes Councils Member
Анализ скорости сайта может показать причины уменьшения продаж, о которых вы даже не догадывались, и помогает решить ряд проблем.
- Высокий показатель отказов. Согласно статистике Google, эта цифра повышается на 32%, если время загрузки страницы составляет 3 секунды и более.
- Малая глубина просмотра страницы. Если большие по объему файлы загружаются слишком долго или некорректно, или в случае когда сайт «подвисает» на смартфоне, пользователь прекратит взаимодействие с веб-ресурсом.
- Низкий рейтинг в выдаче поисковых систем. Скорость сайта напрямую влияет на SEO.
- Снижение конверсии. Плохое SEO и низкий трафик негативно влияют на ваши продажи. После одного из исследований компания Walmart заявила, что с каждой секундой увеличения скорости веб-страницы ее конверсия возрастает на 2%.
- Негативное влияние на репутацию бренда. Пользователи не будут добавлять медленный сайт в закладки и точно не посоветуют его друзьям. Люди ассоциируют с уровнем компании и качеством продукции не только дизайн сайта и контент, но и его юзабилити.
Если вы возьмете за привычку регулярно проверять скорость своего сайта, устранить вышеперечисленные проблемы будет достаточно просто. Для начала следует проанализировать ключевые показатели скорости сайта, после чего вы сможете поручить оптимизацию специалисту.
📌 Тест в блоге: Как Google оценивает ваш сайт
Показатели скорости сайта или веб-страницы
Скорость загрузки страницы зависит от комплекса факторов. Рассмотрим основные веб-показатели, которые влияют на продвижение и конверсию сайта. Их можно определить в процессе бесплатного и быстрого анализа скорости сайта онлайн.
- Наибольшее содержимое страницы (LCP). Этот показатель касается времени загрузки страницы. В частности, он показывает, что основное содержимое страницы загружается должным образом.
- Задержка первого ввода (FIP). Это время от момента, когда пользователь впервые взаимодействует с сайтом, до момента, когда браузер сможет должным образом отреагировать на это взаимодействие. От параметра зависит интерактивность страницы.
- Кумулятивное смещение макета (CLS). Отражает визуальную стабильность страницы. Если макет смещается, пользователи могут случайно нажать не ту кнопку на странице, что вызывает раздражение и заставляет покинуть сайт.
Основные веб-показатели взаимосвязаны между собой и с другими с другими параметрами, такими как адаптивность для просмотра с мобильных устройств, безопасный просмотр, HTTPS и тому подобное.
Важными показателями являются также загрузка страницы (Page Load Time), время первого изображения (First Contentful Paint), количество запросов к серверу (Number of Requests), размер страницы (Page Size) и др. Оценку каждого из них и рекомендации по оптимизации этих параметров можно получить с помощью одного из сервисов проверки скорости сайта.
📌 Читайте в блоге: Преимущества ускоренных страниц Google AMP в Google AMP
Инструменты для проверки скорости сайта
В этой статье мы рассмотрим популярные сервисы анализа скорости сайта. Для демонстрации возможностей каждого из них проанализируем сайт Rozetka.
WebPageTest
Одной из главных особенностей инструмента является многократное тестирование — до 9-ти запусков анализа. Можно анализировать только первый визит или включить повторный просмотр, при котором сервис загружает страницу, закрывает браузер, а затем загружает сайт снова. После этого пользователь получает результаты проверки оптимизации скорости страницы, каскадные диаграммы для каждого запуска и предложения по улучшению.
В бесплатной версии доступен выбор параметров тестирования, таких как устройство, с которого посещают страницу, тип подключения, браузер, регион. Платная версия стоит $180 в год, и, кроме базовых, включает такие возможности как увеличенное количество регионов, приоритетные тесты, доступ к API, интеграции, частные тесты, массовое тестирование, эксперименты и специализированная поддержка.
Первая часть результатов анализа — итоги работы, а именно скорость, качество верстки и безопасность соединения.
«Быстро? Неплохо… Этот сайт быстро подключился и доставил начальный код. Он начал отображать содержимое очень быстро. Не было никаких запросов на блокировку рендеринга.
Можно ли им пользоваться? Выглядит замечательно! Этот сайт имеет хорошую стабильность верстки.
Устойчив ли он? Этот сайт не имел сторонних запросов, блокирующих рендеринг, которые могли бы стать единственной точкой отказа. У него не было проблем с безопасностью».
Следующий этап — расчет показателей эффективности страницы:
- время до первого байта;
- начало рендеринга;
- индекс скорости;
- кумулятивное смещение макета;
- вес страницы;
- визуальный процесс загрузки страницы.
Далее сервис предлагает сравнить запуск WebPageTest с данными производительности, собранными браузером для этого сайта, то есть с реальными показателями использования.
Блок с таблицами и диаграммами «Индивидуальные запуски» отображает ошибки тестирования и навигации, временную шкалу просмотра, разбивку обработки, трассировку просмотра и разбивку по содержимому. Здесь можно просмотреть видео процесса загрузки страницы.
Еще одна важная функция — это визуальный сравнительный тест. Она позволяет вводить несколько URL, благодаря чему возможно их одновременное тестирование и сравнение друг с другом.
Пользователь может сохранять результаты тестирования — даже если пользуется бесплатной учетной записью. Поделиться результатами анализа можно по электронной почте или в Twitter, а также просмотреть отформатированное изображение скриншота.
📌 Читайте кейс: Как увеличить трафик на 90% за год благодаря SEO
Pingdom
Результат тестирования, выполненного этим инструментом, содержит практические рекомендации по улучшению страниц и разбивку по размеру содержимого. Pingdom уведомляет клиентов о простое и является бесплатным в течение первых 14-ти дней.
За $120 в год доступен мониторинг доступности, производительности и бизнес-транзакций. Анализу подлежит размер страницы, время загрузки, запросы. Отдельно — за дополнительные $120 ежегодно — можно подключить тариф для анализа неограниченного количества сайтов и без лимитов по количеству пользователей, с отчетами для общего доступа. Этот вариант оптимален для агентств, которые занимаются ведением различных веб-ресурсов и должны следить одновременно за результатами всех клиентов.
Для улучшения производительности страницы сервис генерирует основанные на анализе рекомендации, например, «Добавить заголовки, срок действия которых истекает», «Используйте домены без файлов cookie», «Сделайте favicon маленьким и кэшированным» и т. д.
В анализ входит мониторинг кодов ответов, размера контента, запросов по типу контента, размера контента по его типу и по домену.
Для обозначения различных типов содержимого (текст, изображение, HTML-документ и др.) используются специальные пиктограммы. Аналогично для различения кодов ответов HTTP на диаграмме, применяются цветные точки возле URL-адресов, а индикаторами различных этапов выполнения запроса служат цветные обозначения.
GTmetrix
Сервис использует Google Lighthouse для анализа производительности сайта, а именно скорости полной загрузки, первого и наибольшего содержательного отображения и др. Тестирование может быть проведено с нескольких серверов.
Для проверки работы ресурса с различными типами сетевых подключений, предусмотрена функция регулировки их количества.
Кроме бесплатного тарифа есть пакеты с расширенными возможностями за $10, $21, $42. Они включают дополнительные тестовые серверы, анализ с мобильных устройств, почасовой и глобальный мониторинг и т.д.
Инструмент анализирует эффективность и структуру сайта, а также его жизненно важные показатели, которые оценивают клиентский опыт:
- LCP — сколько времени нужно, чтобы полностью отобразился самый тяжелый элемент контента на странице.
- TBT — длительность блокировки скриптами во время загрузки страницы.
- CLS — изменения макета страницы во время ее загрузки.
Доступно много вкладок с информацией о сайте даже для незарегистрированных пользователей («Резюме», «Эффективность», «Структура», «Каскад», «Видео», «История»).
Сервис определяет основные проблемы, влияющие на результаты сайта, например: «Избегать document.write() — найден 1 экземпляр».
Рассчитывается время полной загрузки, общий размер страницы и общее количество запросов на нее. Эти данные не всегда понятны для владельца сайта или маркетолога и могут не быть определяющими, но они понадобятся SEO-специалистам или разработчикам в процессе улучшения работы и повышения эффективности веб-ресурса.
Используя бесплатный аккаунт GTmetrix можно узнать, как работает сайт во множестве регионов, и на базе отчетов создать план устранения ошибок.
Google PageSpeed Insights
Инструмент принадлежит Google и осуществляет оценку пользовательского опыта на основе отчета Chrome UX. Оценку производительности определяет Lighthouse, используя два типа данных.
- Полевые содержат информацию о том, какой опыт посетители действительно получают на сайте. Ценны для фиксации настоящего, реального пользовательского опыта, но имеют более ограниченный набор метрик.
- Лабораторные собираются в контролируемой среде для выявления и устранения проблем с производительностью. Такая информация является точной, однако не всегда отражает реальные слабые места веб-страницы.
Для всех показателей выбран 75-й процентиль, данные обновляются ежедневно. Google PageSpeed Insights классифицирует качество пользовательского опыта по трем категориям: «Хорошо», «Требует улучшения» и «Плохо».
Проблемы с производительностью оцениваются в процентах.
Вместе с аудитами инструмент выдает рекомендации по ускорению загрузки страницы.
Комментарий эксперта
Несмотря на быстрый интернет, 4g/5g/6g покрытие, более быстрые устройства — скорость важный фактор в SEO, рекламе, и в целом в конверсии сайта и целесообразности маркетинговых вложений.
В 2023 никого не удивишь различными наборами изображений, WebP, Avif, отложенными или асинхронными стилями и скриптами, CSS спрайтами и тому подобное. Google — кроме типичных 90+ показателя, или общепринятого 2 секунд — внедрил на LCP, FID, CLS, FCP, INP и TTFB.
Кроме одного из факторов ранжирования в SEO — скорость сайта учитывается в показателе качества целевой страницы Google Ads, соответственно цене за клик, и ROAS/CAC, и особенно важна для всего трафика, идущего на сайт.
Давайте проанализируем.
Если на сайте 50 000 посетителей ежемесячно, а средняя конверсия в заказ 1.5%. Тогда улучшение скорости сайта на 50% даст + 10% к конверсиям, и станет 1.65%. Из приведенных 50 000 посетителей в месяц это +75 заказов в месяц, то есть +900 заказов в год, например в ecommerce при среднем чеке 5000 грн с маржой 40%, это дополнительные 1 800 000 грн в год.
Делайте выводы и работайте над улучшением скорости.
Результаты анализа многогранны, структурированы и доступны, в частности, есть перечень элементов, которые нужно проверить вручную, советы по улучшению читабельности содержимого и др.
Что влияет на скорость загрузки веб-страницы?
Согласно справке Google Analytics, способ расчета среднего времени загрузки страницы был изменен в ноябре 2011 г. С тех пор показатель вычисляется с учетом времени переадресации. Чем больше переадресаций и чем выше их значимость, тем медленнее может работать сайт.
На скорость страницы влияет каждый ее элемент. Это и код HTML, и CSS, который задает стиль элементам страницы, и файлы JavaScript, а также изображения, видео, квизы и калькуляторы и др.
Рассмотрим основные факторы, мешающие быстрой загрузке веб-страниц.
- Тяжелые изображения, в частности, с высоким DPI. Выход — оптимизация изображений или использование сети доставки контента (CDN).
- Наличие больших файлов для загрузки пользователями.
- Значительное количество JavaScript-скриптов также замедляет работу страницы. Инструмент сжатия или минимизации JavaScript уменьшает размер загрузки.
- Неиспользованный код, оставленный в HTML-коде страницы, — CSS, JS или др.
- Очень ранний или, наоборот, слишком поздний рендеринг скриптов. Речь идет о возможности просмотра страницы только после загрузки всего содержащегося на ней контента.
- Расположение хостинга. Задержки в сети могут возникать, если контент преодолевает определенный путь. Это происходит, если файлы HTML и CSS сайта размещены в географически удаленных дата-центрах.
Также на скорость загрузки и работы сайта влияют некоторые факторы, которые не зависят от владельца веб-ресурса или специалистов, отвечающих за его технические показатели. Это используемый браузер, тип соединения и проблемы в сети. Некачественные услуги интернет-провайдера пользователя могут замедлять даже легкий и технически продуманный до мелочей сайт.
Например, даже если сайт легкий, он может несмотря на это не загружаться быстро в браузерах из-за медлительности сети. На скорость соединения с сетью влияет используемое локальное сетевое оборудование и качество услуг интернет-провайдера. Мобильные устройства, использующие 3G или 4G вместо подключения через Wi-Fi часто также обеспечивают более медленное соединение с сетью.
Как ускорить скорость загрузки сайта?
Показатели скорости загрузки страниц определяются по фиксированной выборке, составляющей 1% пользователей. Об этом говорится в справке Google Analytics. Вы можете повысить частоту выборки, добавив в код отслеживания функцию setSiteSpeedSampleRate() при обновлении контента.
План повышения скорости загрузки сайта является важной составляющей стратегии технической оптимизации веб-ресурса и обычно готовится SEO-специалистом на основе анализа. Приведем несколько мероприятий, которые являются универсальными и почти во всех случаях помогают ускорить загрузку страницы.
- Уменьшение количества файлов CSS, что удаляет лишние символы в контенте.
- Сжатие изображений Gzip для сокращения времени загрузки файлов CSS, HTML и JavaScript.
- Внедрение сети доставки контента (CDN), благодаря чему он поступает с ближайшего к нему сервера.
- Оптимизация медиафайлов. Наилучшими считаются форматы PNG или JPEG. Видео можно сжать или просто загрузить их на YouTube и в дальнейшем использовать на веб-странице код встраивания.
- Использование индивидуального веб-хостинга с оптимизированной скоростью.
- Минимизация HTTP-запросов.
- Активация кэширования браузера.
Обычное сжатие изображений может сэкономить большой объем памяти и сделать пользование сайтом более быстрым и приятным. Не пытайтесь разместить на странице много интерактивных элементов если они не являются определяющими для передачи информации или повышения конверсии.
Вы можете тестировать разный контент, оставляя в результате тот, что принес лучшие результаты. Например, если посетители чаще пользуются опросником, чем калькулятором цен, то первый компонент важен для продаж, а второй может выполнять роль лишнего «груза». В этом случае анализ скорости сайта является информативным и целостным только в сочетании с аудитом юзабилити и оценкой конверсии веб-ресурса.
Что чаще всего спрашивают об анализе скорости сайта
Для проверки скорости загрузки страниц сайта воспользуйтесь сервисами: Google PageSpeed Insights, GTmetrix, WebPageTest или Pingdom. Введите URL в один из этих инструментов, и он проанализирует скорость загрузки и даст отчет и советы.
Больше всего замедляют сайт большие изображения, ненужный JavaScript, отсутствие кэширования и т.д. Регулярно проверяйте страницы, не добавляйте гифки и картинки в большом разрешении, используйте формат WebP.
Производительность сайта измеряется в:
— Времени загрузки страницы (секунды, миллисекунды).
— Времени до первого байта (TTFB).
— Времени до интерактивности/первого воспроизведения контента (FCP, TTI).
— Общем количестве запросов и размере страницы (килобайт или мегабайт).
— Google Core Web Vitals (LCP, FID, CLS).
Выводы
На скорость страницы влияет множество факторов — от размера каждого элемента на ней до качества сетевого оборудования. На большинство таких факторов владелец сайта может повлиять. Это большие файлы JavaScript, видеоконтент, устаревший код и скрипты, тяжелые изображения и другие файлы.
Целью анализа скорости сайта является создание наилучшего пользовательского опыта для уменьшения количества отказов и повышения конверсии. Поэтому следует разработать стратегию оптимизации скорости загрузки страниц сайта и придерживаться ее при разработке и добавлении новых страниц. Подготовку правил оптимизации изображений, медиа, виджетов и плагинов нужно поручить техническому специалисту.
Следите за тем, что разработчики должны уделять особое внимание скорости работы сервера, использованию API и кэшированию и по крайней мере раз в месяц используйте инструменты для проверки скорости сайта.
