как проверить и ускорить загрузку сайта

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

В 2019 году платформа для маркетологов Unbounce опубликовала результаты исследований о том, как скорость загрузки сайта влияет на вероятность покупки. Оказалось, что для 70 % пользователей это важно, а ждать загрузки они готовы не больше 3 секунд. Среднее же время загрузки сайтов оценивалось в 2019 году в печальные 15 секунд. И только 2 % сайтов успевали загрузиться за 3 секунды и меньше.

Исследования компании Portent 2020 года показали, что с каждой дополнительной секундой загрузки сайт теряет 4,42 % конверсии. Посчитайте, что это значит для вашего бизнеса!

О том, что скорость загрузки сайта влияет на поисковое ранжирование сайта, неоднократно писал Google — «люди не возвращались на сайты, которые грузились дольше 4 секунд».

О важности высокой скорости загрузки говорит и «Яндекс» в блоге для веб-мастеров.

Читайте также:

16 источников бесплатного трафика для вашего сайта

Почему сайт долго грузится

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

Продвижение сайтов

• Любой формат сотрудничества: позиции, лиды, трафик.
• Подбираем запросы, которые приводят реальных покупателей!

1. Слишком много анимации. Визуальные эффекты оживляют сайт и привлекают внимание. «Живые» сайты с подвижными элементами, анимацией и видео любят дизайнеры. Вместе с тем анимация и динамические элементы могут тормозить загрузку сайта, а значит, в глазах пользователя теряют всякую ценность. Скорее всего, пользователь их просто не увидит, если не готов тратить на ожидание загрузки страниц ресурса больше 3 секунд.
2. Слишком большие изображения. Если загружать на сайт картинки и фото, не думая об их размере в пикселях и мегабайтах, они будут снижать скорость загрузки сайта. Например, мы в Kokoc.com ориентируемся на следующее:
   • для картинок с альбомной ориентацией примерные размеры 800×500 пикселей;
   • для картинок с книжной ориентацией — 700×1100 пикселей.
3. Скрипты, дополнения, плагины. Изначально все это во благо, так как делает взаимодействие пользователя с сайтом более комфортным. Но слишком большое количество плагинов, дополнений и скриптов тормозит скорость загрузки страниц ресурса и в результате убивает конверсию.
4. Много HTTP-запросов. HTTP-запросы — это специфические запросы, которые браузер отправляет к серверу. С помощью таких запросов происходит обмен данными. Чтобы показать пользователю всего одну веб-страницу, таких запросов может быть отправлено несколько десятков. И, соответственно, чем больше их число — тем медленнее загружается сайт. Избыток сложных компонентов — таблиц стилей, сценариев, изображений — также увеличивает количество запросов
5. Низкая скорость ответа сайта (TTFB, «время до первого байта»). Речь идет об отрезке времени, в течение которого браузер отправляет один запрос к серверу и получает от него ответ. Чем сложнее устройство сайта, его дизайн, и чем большее количество стилей и подгружаемых статических данных необходимо сайту для работы, тем больше будет время его ответа.
6. Встроенные видео. Разместить видео непосредственно на сайте — идея понятная, но не всегда рациональная. Встроенные видео серьезно замедляют скорость загрузки страниц ресурса, а еще могут воспроизводиться с помехами и зависаниями, если у сайта не очень качественный хостинг.

Читайте также:

Гайд по технической оптимизации сайта

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

Существуют десятки сервисов, с помощью которых можно проверить скорость загрузки любого сайта. Коротко — о трех информативных и интересных.

Google PageSpeed Insights

Google PageSpeed Insight — инструмент, который разработала компания Google еще в 2012 году. Сегодня это один из популярных сервисов для проверки скорости сайта, который используют по всему миру.

Как пользоваться Google PageSpeed Insights

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

Нажмите кнопку «Анализировать» и подождите несколько минут

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

В нашем случае результат загрузки мобильной версии оказался намного ниже этого значения

Чуть ниже на странице с результатами Google даст свои рекомендации по оптимизации скорости загрузки ресурса.

Вот что посоветовал Google в нашем примере. И это только часть рекомендаций

PR-CY

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

Как пользоваться PR-CY

Введите адрес сайта в поисковую строку сервиса, нажмите на кнопку «Проверить» и дождитесь результата.

Ждать пришлось всего несколько секунд, хотя сайт объемный и многостраничный

Скорость загрузки оказывается удовлетворительной, и это отражается на результатах.

Скорость загрузки выше, чем у 82 % проверенных сайтов — звучит убедительно

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

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

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

Loading.Express

Loading.express — это еще один довольно простой и известный специализированный сервис для проверки скорости загрузки сайта. Он показывает время полной загрузки, время ответа сервера и количество отправленных HTTP-запросов. Ориентирован на проверку скорости загрузки только мобильных версий сайта.

Как пользоваться Loading.Express

Все стандартно: введите адрес сайта, выберите свое местонахождение (Россия, Беларусь, Казахстан, Германия, США, Сингапур, Канада), нажмите на кнопку «Анализировать» и дождитесь результата.

Проверяем вновь все тот же сайт

В процессе тестирования сервис делится инсайтами по поводу влияния скорости загрузки сайта на успешность бизнеса.

Вот такую информацию он выдал

Результат, как и в случае проверки через Google PageSpeed Insights, оказался неудовлетворительным.

3 из 10 — результат не чемпионский

Сервис также дал рекомендации о том, как увеличить скорость загрузки сайта…

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

Читайте также:

Мобильные версии сайтов 2022: интересные тенденции и неожиданные выводы

Как увеличить скорость загрузки сайта

Работа над увеличением скорости загрузки сайта — задача программистов. И вот что они могут сделать:

1. Поработать с изображениями. Оптимизируйте картинки по ширине, высоте и весу: современные сервисы работы с изображениями позволяют сделать это без потери качества картинки. К большим изображениям можно добавить превью, которые будут загружаться быстрее.
2. Включить Gzip-сжатие. Gzip — программа, сжимающая файлы на сервере так, как делают это zip- и rar-архиваторы на компьютере. Информация в сжатом виде быстрее передается между браузером пользователя и сервером, на котором размещен сайт.
3. Удалить лишние плагины, счетчики, модули. Ускорить загрузку сайта можно, удалив неиспользуемые плагины и коды счетчиков, которые уже неактуальны.
4. Оптимизировать скрипты. Если на нескольких страницах сайта есть слайдеры, рационально использовать для их прокрутки один плагин, а не несколько разных.
5. Выбрать 1–2 шрифта. Единообразие шрифтов на сайте — это и более аккуратный, и современный внешний вид ресурса, и меньший объем файлов, которые необходимо загрузить для корректного отображения шрифтов, особенно экзотических.
6. Снизить число HTTP-запросов браузера. Это можно сделать, если уменьшить количество кодов сторонних ресурсов и файлов JavaScript. Можно с этой целью объединять компоненты в один файл для загрузки. Например, если на сайте используются 4 таблицы стилей и 6 сценариев JavaScript, можно собрать все таблицы стилей в один файл, а все библиотеки сценариев — в другой. Количество HTTP-запросов при этом станет меньше, а скорость загрузки сайта вырастет.
7. Включить кэширование. То есть разрешить браузерам пользователей кэшировать и сохранять информацию о сайте. Кэшировать можно фотографии, JavaScript, элементы CSS. В таком случае при повторном посещении сайта браузер не будет обращаться к серверу, а загрузит сохраненную информацию, что будет намного быстрее.
8. Подключить «ленивую загрузку» изображений. LazyLoad, или «ленивая загрузка» — это вариант, при котором изображения подгружаются не сразу и не автоматически, а лишь в случае, если они нужны пользователю. Например, если какой-то сценарий JavaScript начинает работать лишь когда страница прокручена уже на ¾, то и загружать его в самом начале нет смысла. В таком случае стартовая загрузка страницы будет происходить быстрее.
9. Перенести видео на внешние платформы. Для минимизации времени загрузки страницы (и места, которое сайт занимает на хостинге) желательно отказаться от встроенных видео. Оптимальным будет размещение видеоконтента на специализированных видеохостингах — YouTube, Vimeo, Яндекс.Видео — для пользователя ничего не изменится в худшую сторону, а грузиться сайт будет заметно быстрее.
10. Использовать CDN. Это сети распределенной доставки контента. При использовании CDN данные сайта кэшируются в сетях глобальных серверов: даже если на российский ресурс заходит человек из Южной Америки, ему не придется долго ждать загрузки сайта. CDN направят его на ближайший к его местонахождению сервер.

Так ваш сайт разгонится до скорости гепарда

Технический аудит сайта

• Наличие дублей страниц, безопасность, корректность всех технических параметров: переадресаций, robots.txt, sitemap.xml скорость загрузки и др.
• Техническая оптимизация — один из основных этапов в продвижении.

Делаем выводы

1. От скорости загрузки сайта во многом зависят его трафик и конверсия.
2. Скорость загрузки сайта определяется чистотой кода сайта и продуманностью стилей, сценариев, дизайна.
3. Проверять скорость загрузки сайта можно через несколько сервисов, чтобы сопоставить их данные и сделать выводы.
4. Если сайт грузится дольше 3 секунд, попросите вашего программиста поработать с ним с учетом рекомендаций, которые предоставляют сервисы проверки скорости загрузки сайта.
5. Проверяйте скорость загрузки сайта периодически: например, 1 раз в год. И обязательно исправляйте всё, что мешает ресурсу двигаться быстрее, чем черепаха.

Таргетированная реклама в социальных сетях

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

Скорость загрузки сайта: 22 сервиса для анализа

В статье рассказывается: 

1. Почему нужно делать замеры скорости загрузки сайта
2. Как повысить скорость загрузки сайта
3. 22 сервиса для анализа скорости загрузки сайта

4. Пройди тест и узнай, какая сфера тебе подходит:
   айти, дизайн или маркетинг.

   Бесплатно от Geekbrains

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

Почему важно замерять скорость загрузки сайта

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

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

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

Как ускорить загрузку сайта: 9 работающих способов

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

Как ускорить загрузку сайта

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

Оптимизируйте HTML-код и CSS-, JS-файлы

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

Как минимизировать код для ускорения загрузки сайта:

• Уберите из кода лишние знаки, теги и элементы разметки. Для автоматизации загрузки страниц могут вставляться небольшие элементы в начале и конце HTML-кода сайта. Этот метод обеспечивает PHP буферизацию и является достаточно эффективным с точки зрения скорости загрузки. Нужно учитывать, что такое решение может увеличить нагрузку на оперативную память.
• Собрать в группы однотипные CSS и JS файлы одного типа. Сделать это можно, используя бесплатные PHP-приложения (к примеру, JCH Optimize, Cloudflare или Minify). Такие программы устанавливают в отдельную директорию, после чего, через них пропускают все файлы HTML-кода сайта.

Уберите лишние HTTP-запросы

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

Сокращение количества элементов страницы позволит уйти от «лишних» обращений к серверу и повысит скорость загрузки сайта.

Сделать это можно несколькими способами:

• Объединить часть картинок в один графический файл (CSS-спрайт).
• Применять встроенные (Inline) картинки, собранные в таблице стилей онлайн-страницы.
• Собрать в одном файле ряд однотипных CSS-файлов или скриптов.
• Уменьшить количество используемых скриптов и программных модулей.

Расположите JavaScript и CSS в нужном порядке

Специалисты советуют размещать файлы CSS в верхней части кода страницы, а JavaScript в нижней. В результате такой оптимизации загрузится статичная информация, а только после этого динамические элементы графики.

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

Уменьшите число внешних скриптов

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

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

Задействуйте функцию flush

Этот PHP-инструмент очищает буфер ввода. Функция flush дает возможность не ждать, пока сервер посетителя выполнит загрузку всего контента со страницы сайта, а выводить информацию по частям. При этом окно, открытое перед пользователем, не будет оставаться пустым, пока данные с сервера передаются браузеру. Оно будет постепенно заполняться загружаемым контентом. Такаю оптимизацию следует рекомендовать сайтам с высокой посещаемостью и сложным дизайном страниц.

Рекомендуем устанавливать функцию flush в начале исходного кода, сразу после head. Контент быстрее откроется из заголовка, а параллельно можно активировать загрузку элементов CSS и JavaScript.

Кэшируйте страницы

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

Для подключения функции кэширование в код заголовка можно добавлять запись expires. Для кеширования ресурсов, созданных на движке Вордпресс, могут использоваться плагины, имеющие бесплатные или частично платные функции, к примеру, W3 Total Cache, Cache Enabler или Zen Cach.

Кэшируйте страницы

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

Пользуйтесь CDN

Для сокращения времени передачи содержимого интернет ресурсов пользователям, была разработана сеть Content Delivery Network, которая состоит из дата-центров, расположенных в разных точках мира. В зависимости от удаленности устройства посетителя сайта от CDN-серверов, меняется время, затрачиваемое на передачу данных по содержанию страницы сайта.

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

Особенно полезна сеть доставки контента для информационных порталов, перегруженных данными, пользователи которых находятся далеко от места расположения серверов. Благодаря Content Delivery Network снижается время загрузки иностранных ресурсов, что обеспечивает повышение их рейтинга в поисковой выдаче. Это происходит потому, что загрузка данных осуществляется с сервера, который находится в стране пользователя максимально близко к нему.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 19928

На сегодняшний день популярны следующие CDN (сети доставки контента):

• Google Cloud Content Delivery Network
• Amazon CloudFront
• Microsoft Azure Content Delivery Network
• Swarmify
• Akamai
• Limelight
• CloudFlare
• Rackspace Content Delivery Network.

Оптимизируйте графику и видео

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

Рекомендуемые форматы под разный веб-контент:

• SVG – для векторных картинок и простых деталей пользовательского интерфейса;
• PNG – для таблиц и невекторных картинок;
• JPG – для фотографий и других изображений;
• MPEG4 – для анимированных элементов и видеофайлов.

Для видеороликов и анимации будет доступен недавно созданный формат WEBM. Он поддерживает минимальный объем видео при сохранении такого же качества. Но WEBM не всегда поддерживается интернет браузерами (к примеру, отсутствует поддержка на платформах MacOS или Safari).

В связи с эти можно рекомендовать в основном использовать видео в формате WEBM, а в качестве альтернативы установить MPEG4. Если совместное использование таких форматов невозможно, рекомендуем остановиться на MPEG4.

Точный инструмент «Колесо компетенций»

Для детального самоанализа по выбору IT-профессии

Список грубых ошибок в IT, из-за которых сразу увольняют

Об этом мало кто рассказывает, но это должен знать каждый

Мини-тест из 11 вопросов от нашего личного психолога

Вы сразу поймете, что в данный момент тормозит ваш успех

Регистрируйтесь на бесплатный интенсив, чтобы за 3 часа начать разбираться в IT лучше 90% новичков.

Только до 13 марта

Осталось 17 мест

Стоит подчеркнуть, что векторный формат (SVG) дает возможность масштабировать изображения без потери качества.

Этапы оптимизации изображений:

• Масштабирование картинки
• Перед загрузкой на сайт сжать файл.

Сменить хостинг

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

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

22 инструмента проверки скорости сайта

1. Be1. ru. Этот ресурс предназначен для вебмастеров, специалистов по SEO, копирайтеров и всех, кто занимается продвижением сайтов. Здесь предлагают проверку скорости интернет-ресурсов, а на деле оценивается время ответа сервера.
   • Сервис запущен летом 2016 года.
   • Можно проверить один сайт.
2. Seolik.ru. Представляет собой комплекс инструментов, включающий проверку скорости загрузки сайта. Программа предоставляет недостаточно точную информацию. Скорее всего, это связано с использованием устаревшего алгоритма PageSpeed Insights от Google.
   • Появился в конце зимы 2015 года.
   • Можно проверить один сайт.
3. Sitespeed.ru. Сервис от компании «Русоникс» позволяет быстро выполнить проверку скорости загрузки сайта.
   • Появился осенью 2012 год.
   • Сервис предоставляет возможность проверки одного сайта и дополнительно предлагает хостинг.
   • Проверка может осуществляться только для российских пользователей.

   22 инструмента проверки скорости сайта

4. Pr-cy. ru. Анализ происходит через площадку PageSpeed Insight. Проверка через этот сервер, может быть неточной.
5. Google PageSpeed Insights. Является популярнейшим сервисом для анализа скорости загрузки сайта. Этому инструменту доверяют все веб-специалисты. Но использовать его постоянно не стоит, так как здесь искусственно ограничивается скорость измерения до усредненных данных. Работая с этим сервисом желательно параллельно использовать GTmetrix или подобные ресурсы.
   • Работает с мая 2012 года.
   • Есть возможность проведение проверки с европейских серверов.
   • Версия 2019 года Think With Google.
6. PingdomTools. Не совсем понятно, почему, но этот сервис является одним из самых популярных в РФ. Его используют для оценки скорости сайта. Это платный, практичный и полезный инструмент.
   • Сервис работает с июля 2006 года.
   • Есть возможность произвести оценку скорости из Америки и ряда европейских стран.
7. WebPagetest.  Неплохой, многофункциональный, но не совсем удобный сервис. Он был создан техническими специалистами для своих коллег. Можно увидеть видеоотчеты с секундомером по скорости загрузки сайта. Есть возможность производить оценку сразу нескольких сайтов.
   • Начал свою работу в апреле 2009 года
   • Есть возможность производить оценку загрузки из Америки.
8. Monitis.
   • Появился в 2015 году.
   • По удобству для пользователей и дизайну ресурс несколько устаревший, при работе возникают некоторые сложности. Есть возможность производить оценку из Соединенных Штатов.
9. Web Site Optimization. По всей видимости, это единственный инструмент, с помощью которого можно выяснить, в течение какого времени загрузится определенный сайт при скорости соединения 14, 5к. К примеру, ресурс vc.ru при такой скорости интернета загружается примерно 22 минуты.
   • Появился в апреле 2003 года. Ресурс не обновляли с 2008.
10. Dotcom-Monitor.  Есть возможность проверить время загрузки сайта сразу из 25-ти стран. Тест скорости загрузки сайта производится дважды: с кэшем и без него. Производится замер PageSpeed. Оформление сервиса неброское.
    • Появился в конце осени 2014 года.
11. GTmetrix. Создатели этой программы создали невероятно удобный и быстрый сервис с современным дизайном. Замер показателя PageSpeed не обновлялся и использует алгоритм ноября 2018 года.Есть возможность бесплатного хранения истории проверок, предоставляет видеоотчет загрузки. Можно посмотреть подробный отчет по скорости загрузки страниц по каждому запросу.
    • Разработан в Канаде, запущен в феврале 2010 года.
    • Нет серверов в РФ.
12. Sitespeed.me. Можно провести оценку скорости загрузки сайта из 7-ми стран. Этот сервис был создан пакистанцем с лондонской фирмой. Весь функционал заточен под проверки.
    • Разработан в Лондоне, работает с июля 2014 года.
13. Dareboost. Качественный ресурс с возможностью создания видеоотчета загрузки. Предполагает последовательный переход к каждому этапу без права вернуться назад. Можно сканировать скрипты. Дизайн современный. Разработчики крутые!
    • Создан французскими разработчиками. Запущен в феврале в 2014 году.
14. GiftofSpeed. Есть проверки скорости загрузки сайта из 8-ми стран, однако РФ в этот список не включена. Разработчики создали около шестнадцати бесплатных инструментов для анализа различных параметров, влияющих на ускорение загрузки сайта. Это ресурс для ускорения интернет площадок под ключ. Эксперты сервиса пишут большое количество полезных материалов для SEO по ускорению!
    • Создан в Голландии, работает с апреля 2015 года.
15. Uptrends. Неплохая платформа для оценки скорости загрузки сайта. Предоставляет автоматизированную проверку. Есть возможность сохранять историю проверок, но это платная услуга. Можно бесплатно узнать скорость загрузки со смартфона или ПК.
    • Разработан в Голландии, работает с декабря 2014 года.
16. Varvy. Сервис предлагает анализ по СЕО, адаптивности дизайна и скорости загрузки сайта. Патрик Секстон рассказывает, что специально создал этот инструмент бесплатным, так как очень хочет улучшить наш мир.
    • Создан филиппинскими специалистами, запустили в августе 2015 года.
17. KeyCDN. Можно произвести оценку скорости загрузки, включая HTTP/2. Есть проверка из четырнадцати стран, а также продажа услуг хостинга.
    • Запущен в апреле 2015 года, создан в Швейцарии.
18. Site24x7. Создан в Индии специалистами компании ZOHO. Есть возможность проверки из Санкт-Петербурга и Москвы. Сервис представляет отчет по первому и последнему байту, а также показывает время ответа. Позволяет анализировать ряд параметров, имеющих отношение к ускорению сайта.
    • Создан индийскими разработчиками, был запущен в июне 2007 года.

    22 инструмента проверки скорости сайта

19. SmallSeoTools. Очень странный инструмент. Оценивает скорость загрузки сайта на интернет модемах.
    • Создан в Лондоне, был введен в работу в ноябре 2018 года.
20. Яндекс. Вебмастер. На сегодняшний день является популярнейшим инструментом для оценки скорости. Время ответа сервера Яндекс. Вебмастер показывает в миллисекундах. Ресурс демонстрирует код ответа сервера, который должен быть одного типа: 200 ок. Если у вас он в другом виде (405,302 и т.п.), то прежде, чем заниматься скоростью, следует решить другие проблемы сайта.
21. mobiReady. Еще один очень интересный, а главное бесплатный ресурс на английском языке– mobiReady. Сервис дает возможность увидеть, как смотрится ваш сайт на всех устройствах с разным расширением монитора, что очень важно при тестировании мобильной версии. Еще вам будет предоставлен подробный отчет с перечислением всех недостатков сайта.
22. Whichloadsfaster. Хороший ресурс, позволяющий сравнивать скорость загрузки своего сайта и конкурирующих площадок.Вы сможете сравнить, у кого и во сколько раз выше скорость загрузки сайта.

Продвижение блога — Генератор продаж

Рейтинг: 5

( голосов 1 )

Поделиться статьей

10 инструментов Page Speed ​​для определения скорости загрузки целевых страниц

Большинство сайтов теряют половину своих посетителей во время загрузки страницы. Это шокирующая реальность, в которую трудно поверить, но, возможно, нет, если учесть, что средний показатель отказов веб-страниц сегодня составляет 58,18%. Хуже того, средний показатель отказов целевой страницы после клика колеблется от 60 до 90%.

Мобильные страницы в равной степени страдают от низкой скорости загрузки страниц. Исследование Google и SOASTA, проведенное в 2016 году, показало, что среднее время загрузки мобильного веб-сайта для сеансов с отказом было примерно на 2,5 секунды медленнее, чем для сеансов без возврата.

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

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

Как это влияет на скорость страницы?

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

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

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

• Большие изображения и текстовая графика
• Видео
• Длина страницы
• Скрипты, шрифты и плагины (HTML, JavaScript, CSS)
• Ненужные перенаправления
• География (страна, город, организация, провайдер, скорость сети)
• Полоса пропускания

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

10 самых надежных инструментов скорости страницы

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

1. GTmetrix

GTmetrix анализирует ваш сайт, используя комбинацию 27 рекомендаций по скорости страницы (тест скорости Google) и 19 рекомендаций YSlow (тест скорости Yahoo). В верхней части отчета представлены оценки производительности от A до F, а также сведения о странице, включая время загрузки, размер страницы и количество запросов.

Время загрузки по умолчанию указывается как «время полной загрузки» (время с момента, когда посетитель впервые перешел на страницу, до 2 секунд после отсутствия сетевой активности). «Время загрузки» является необязательным (когда веб-страница завершила обработку и все ресурсы на странице, включая изображения, текст и скрипты, завершили загрузку). Остальная часть отчета разделена на шесть разных разделов: PageSpeed, YSlow, водопад, тайминги, видео и история.

GTmetrix позволяет тестировать и сравнивать производительность веб-сайта с различными типами подключения, чтобы увидеть, как это влияет на скорость загрузки вашей страницы. Он предлагает функцию регулирования соединения для имитации возможных типов интернет-соединений, которые могут использовать посетители вашего сайта: кабельное, DSL, мобильное 3G, мобильное 2G и коммутируемое соединение 56K. Вы также можете выбрать Chrome или Firefox в качестве возможного браузера.

Этот инструмент имеет 7 тестовых местоположений, но предоставляет в общей сложности 28 выделенных тестовых серверов: 11 в Ванкувере, Канада; 5 в Далласе, США; 7 в Лондоне, Великобритания; 2 в Сан-Паулу, Бразилия; 1 в Сиднее, Австралия; 1 в Мумбаи, Индия; и 1 в Гонконге, Китай.

GTmetrix поддерживает HTTP/2, который загружает веб-страницы быстрее, чем HTTP/1.1, пытаясь устранить многие недостатки и ограничения HTTP/1.1. К преимуществам HTTP/2 относятся:

• Мультиплексирование и параллелизм (можно быстро отправить несколько запросов по одному TCP-соединению)
• Потоковые зависимости
• Сжатие заголовка
• Отправка сервера

Кроме того, GTmetrix является одним из немногих инструментов для определения скорости страницы, который также предлагает тестирование производительности мобильных устройств. Он использует два телефона Samsung Galaxy Nexus, поэтому пользователи могут создавать отчеты о производительности на основе фактических загрузок страниц на этих устройствах.

2. Pingdom

Pingdom позволяет вам проверить скорость вашего сайта из 3 основных мест:

• Даллас, Техас
• Мельбурн, Австралия
• Сан-Хосе, Калифорния

Он обеспечивает оценку производительности на основе рекомендаций Google PageSpeed ​​для бесплатной версии и рекомендаций YSlow для платной версии. Pingdom также отображает время загрузки, размер страницы, количество запросов и то, как ваш сайт тестируется на других сайтах. Дополнительные сведения включают разбивку размера страницы по типу контента, размеру страницы по домену, запросам по типу контента и домену.

Одним из основных преимуществ теста скорости Pingdom является то, что пользователям предоставляется информация о производительности с указанием того, что можно улучшить. Однако, в отличие от GTmetrix, Pingdom предлагает только время загрузки (не время полной загрузки), не предлагает регулирование соединения и не поддерживает HTTP/2.

3. Google PageSpeed ​​Insights

PageSpeed ​​Insights — это тест скорости Google, который предоставляет рекомендации по улучшению и оценивает вашу страницу от 0 до 100 баллов на основе двух параметров:

1. Время до загрузки верхней части страницы (общее время, в течение которого страница отображает содержимое верхней части страницы после запроса пользователем новой страницы)
2. Время полной загрузки страницы (время, которое требуется браузеру для полного отображения страницы после запроса пользователя)

Чем выше ваш балл, тем более оптимизирован ваш сайт, а все, что выше 85, означает, что ваша страница работает хорошо.

PageSpeed ​​Insights предоставляет отчеты как для настольной, так и для мобильной версии вашей страницы. Он извлекает URL-адрес дважды — один раз с мобильным пользовательским агентом и один раз с настольным пользовательским агентом. Мобильный отчет включает в себя дополнительную категорию под названием «Пользовательский опыт», которая включает в себя конфигурацию вашего окна просмотра, размер ваших целей касания (кнопок и ссылок) и размеры шрифта.

Команда PageSpeed ​​Insights также недавно запустила новый инструмент скорости загрузки страниц Think with Google, следующий в списке.

4. Think with Google: Test My Site

Разница в том, что тестируется только скорость мобильных страниц.

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

«Время загрузки» — это индекс скорости (не полностью время загрузки), измеряя, сколько времени требуется для отображения видимого содержимого страницы с помощью Chrome на устройстве Moto G4 в сети 3G. (Примечание: для тестирования используется сеть 3G, поскольку 70 % подключений к сотовым сетям во всем мире будут осуществляться на 3G или более низких скоростях до 2020 г.)

Средняя часть результатов представляет собой отраслевое сравнение, рассчитанное на основе внутреннего исследования Google более 5 миллионов веб-страниц:

Наконец, инструмент Test My Site показывает, сколько времени можно сэкономить, внеся несколько исправлений в вашу страницу с подробным отчетом об исправлениях, рекомендованных PageSpeed ​​Insights:

5. Система показателей скорости Google

Карта показателей скорости включает в свою базу данных тысячи сайтов в 12 разных странах и позволяет сравнивать до 10 доменов, чтобы увидеть, как выглядит ваш мобильный сайт. Вы также можете сравнить скорость загрузки вашей страницы при подключении 3G и 4G.

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

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

6. KeyCDN

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

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

7. Тест веб-страницы

WebPagetest включает в себя более 40 различных мест тестирования на выбор и более 25 браузеров, включая 14 мобильных устройств. Доступно так много тестовых локаций, потому что любой может разместить тестовую локацию для WebPagetest, если они соответствуют минимальным системным требованиям.

Тесты могут быть запущены с функцией регулирования подключения для имитации потенциальных подключений к Интернету, которые посетители сайта могут использовать: кабель, DSL, 3G Slow, 3G, 3G Fast, 4G, LTE, Mobile Edge, 2G, коммутируемое соединение 56K, FIOS, Родное соединение и настраиваемые скорости.

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

Когда WebPagetest предоставляет свои результаты, он присваивает вашему сайту буквенную оценку от A до F на основе времени полной загрузки по умолчанию, с необязательным временем загрузки. Другие параметры оценки включают FTTB, сжатие, кэширование, эффективное использование CDN и многое другое. Отчет разделен на шесть разделов — сводка, подробности, обзор производительности, разбивка содержимого и снимки экрана — предоставляя обширную диагностическую информацию с каскадными диаграммами, проверками оптимизации скорости страницы и предложениями по улучшению.

Последнее замечание: HTTP/2 поддерживается WebPagetest.

8. Dotcom-Monitor

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

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

• Сводка по местонахождению
• Тестирование времени загрузки всех элементов страницы на основе браузера
• Обнаружение медленных/отсутствующих элементов
• 10% самых быстрых элементов
• 10% самых медленных элементов
• Комплексная каскадная диаграмма
• Разбивка по элементам хоста (включая DNS, соединение, SSL, запрос, первый пакет и загрузку)
• Проверка ошибок и диагностика

9. Pagelocity

Инструмент Pagelocity доступен и работает как на настольных, так и на мобильных устройствах. Он присваивает пользователям общую оценку из 100 на основе таких компонентов, как статус контента, структура страницы и кодирование. В отчете:

• Сводка содержания: Ценная информация о текстовом содержании вашей страницы (ключевые слова, ссылки заголовков, альтернативный текст для изображений и т. д.)
• Разбивка ресурсов: Информация о структуре вашей страницы — сколько изображений, скриптов или файлов стилей на ней имеется, а также контент, блокирующий рендеринг, и как эти факторы могут повлиять на время загрузки вашей страницы
• Советы и идеи по коду: Предложения по обновлению кода, чтобы сделать его более удобным в сопровождении и расширяемым, с полезными данными о вашей разметке (классы/идентификаторы, теги, Google PageSpeed, время до первого байта и т. д.)

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

10. YSlow

YSlow — это проект с открытым исходным кодом, который анализирует веб-страницы на основе 23 из 34 правил Yahoo! для высокопроизводительных веб-сайтов. Чтобы сгенерировать результаты теста производительности, необходимо выполнить три шага:

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

YSlow также предлагает сводку страницы со статистикой, предложениями по улучшению и инструментами для анализа производительности (включая Smush.it и JSLint).

Чтобы запустить инструмент скорости страницы YSlow, вы можете использовать расширение YSlow для Chrome или получить результаты YSlow от GTMetrix.

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

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

Как бренды могут ускорить свои веб-страницы?

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

Оптимизация изображений

Убедитесь, что изображения не больше необходимого, что они имеют правильный формат файла и сжаты для Интернета. 25% страниц могут сэкономить более 250 КБ за счет сжатия изображений и текста, а 10% могут сэкономить более 1 МБ. Что касается видео, либо оставьте его, либо разместите файл на другой платформе (например, YouTube или Vimeo), а не на своих серверах.

Загружать асинхронно

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

Сократите CSS, JavaScript и HTML

Оптимизируйте свой код, убрав пробелы, запятые и другие ненужные символы, удалив комментарии к коду и минимизировав форматирование.

Уменьшение числа перенаправлений

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

Кэшируйте ваши страницы

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

Улучшение времени отклика сервера

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

Выберите инструмент скорости страницы, который соответствует вашим потребностям.

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

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

инструментов и предложений • Yoast

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

Почему скорость страницы важна для SEO?

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

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

Скорость страницы — это не единственный показатель

Мы написали обширный пост о концепции скорости страницы и ее важности. Короче говоря, скорость страницы — это не единственный показатель. Вы не должны думать о скорости страницы как о «эта страница загружается через 5 секунд».

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

Даже если вы попытаетесь упростить все это до чего-то вроде «время, необходимое для полной загрузки», все равно сложно дать этому полезное число. Например, вы можете запустить анализ, который покажет, что ваша страница загружается за 5 секунд. Но это число может относиться только к проценту ваших пользователей. Тот, кто живет дальше от вашего веб-сервера, с более медленным подключением к Интернету и использует более медленное устройство, будет испытывать более длительное время загрузки.

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

Сделать так, чтобы страница загружалась быстрее

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

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

Процесс загрузки веб-страницы 101

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

«Временная шкала в одну секунду» из документации по скорости сайта Google.

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

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

Сетевой этап

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

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

Этап ответа сервера

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

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

Этап рендеринга в браузере

Рендеринг на стороне клиента : На этом этапе страница должна быть построена, размещена, окрашена и отображена. Способ загрузки изображений, обработка JavaScript и CSS, а также каждый отдельный HTML-тег на вашей странице влияют на скорость загрузки. Темы и плагины также добавляют дополнительные элементы для визуализации.

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

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

С 2021 года Google представила Core Web Vitals — набор показателей для измерения скорости веб-сайтов и взаимодействия с пользователем, которые вошли в обновление основного алгоритма Google. По сути, Core Web Vitals рассматривает три аспекта веб-страницы: скорость загрузки, интерактивность и визуальную стабильность.

• Загрузка — отрисовка самого большого содержимого (LCP): Измеряет, сколько времени требуется для появления на экране наиболее важной части содержимого.
• Интерактивность — задержка первого ввода (FID): Измеряет, насколько быстро страница может реагировать на первое взаимодействие с пользователем.
• Визуальная стабильность — совокупное смещение макета (CLS): Измеряет стабильность визуальных элементов на странице. Другими словами, перемещается ли что-то на экране во время загрузки?

Метрики в Core Web Vitals

При оптимизации производительности вашей страницы для SEO эти три метрики являются наиболее важными, на которые следует обращать внимание. Чтобы пройти Core Web Vitals, вам нужно, чтобы ваша страница получила зеленый балл по всем этим трем показателям. И хорошо знать, что по крайней мере 75% ваших реальных пользователей должны получить зеленую «оценку», чтобы ваша страница прошла.

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

Другие интересные метрики

В дополнение к этим трем метрикам может быть интересно также посмотреть на:

• Время до первого байта (TTFB) : Измеряет, сколько времени требуется, пока сервер не ответит некоторой информацией. Даже если ваш внешний интерфейс работает быстро, это задержит вас.
• First Contentful Paint (FCP) : Измеряет время, необходимое для появления на экране ключевого визуального содержимого (например, основного изображения или заголовка страницы).
• Время до интерактивного : измеряет, сколько времени требуется, чтобы опыт стал видимым, и реагируют на ввод пользователя.

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

Подробнее об этих метриках можно прочитать в документации Google.

Приступайте к практике: как проверить скорость страницы

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

Ваши лучшие друзья — Google Search Console и PageSpeed ​​Insights.

Google Search Console

По сути, данные о Core Web Vitals и других показателях производительности страницы берутся из PageSpeed ​​Insights. Но мы хотим указать вам на консоль поиска Google (GSC), прежде чем переходить к PageSpeed ​​Insights.

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

Чтобы просмотреть этот отчет, перейдите в Google Search Console и найдите «Впечатления от страницы» на левой панели навигации. Вы должны увидеть обзор того, как работают ваши мобильные и десктопные страницы.

Обзор возможностей страницы в Google Search Console

Взгляните на вкладку «Основные веб-жизненные показатели». Там вы найдете список URL-адресов, которые не работают с Core Web Vitals, которые удобно сгруппированы по категориям, в которых они не работают.

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

Списки групп URL-адресов, не отвечающих Core Web Vitals

Щелчок по одной из этих групп предложит GSC показать вам несколько групп URL-адресов в зависимости от их производительности. Например, на снимке экрана ниже Search Console показывает URL-адреса с низкой оценкой LCP, сгруппированные на основе разных оценок LCP.

Щелкнув по одной из этих групп, вы увидите полный список URL-адресов на правой панели. И если вы нажмете на URL-адрес, появится окно со ссылкой, которая приведет вас к аудиту страницы в PageSpeed ​​Insights.

PageSpeed ​​Insights

Как мы упоминали выше, PageSpeed ​​Insights предоставляет вам данные о производительности вашей страницы. Вы найдете метрики в Core Web Vitals и другие метрики конкретной страницы.

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

Результаты PageSpeed ​​Insights для yoast.com

Если вы прокрутите немного вниз, вы найдете диагностику, которая предоставит вам причины того, почему ваша страница не работает Core Web Vitals. Перечисленные здесь причины уникальны для страницы и могут варьироваться от избыточности стороннего кода, ошибки JavaScript, отсутствия кэширования и т. д. – 9.0003

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

Более продвинутые инструменты

Если вы новичок в оптимизации скорости страницы, то Google Search Console и PageSpeed ​​Insights, вероятно, предоставят вам достаточно информации для начала работы. Этот раздел более полезен для тех, кто хотел бы иметь больше данных и хочет глубже погрузиться в производительность своего веб-сайта.

Инструменты для проверки производительности сервера

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

Мы можем проверить производительность сервера с помощью таких инструментов, как NewRelic или DataDog, которые отслеживают, как ваш сайт ведет себя и реагирует «изнутри».

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

В WordPress есть несколько отличных плагинов для такого анализа. Мы рекомендуем проверить Query Monitor. Он дает отличное представление о том, какие части WordPress могут замедлять работу — будь то ваши темы, плагины или среды.

Еще один инструмент для проверки производительности страницы

Еще один инструмент, на который может быть интересно взглянуть, — WebPageTest.org. Этот инструмент позволяет вам проверить, как ваша страница работает в различных типах сетей и устройств.

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

Например, на изображении ниже показан вид водопада на домашней странице Yoast. com. Поначалу это выглядит довольно устрашающе, но становится легче понять, когда вы сами запустите тест. Помните модель этапов процесса загрузки, о которой мы упоминали ранее? Это каскадное представление говорит нам о том, что первый этап (поиск DNS и соединение TCP) занимает около 0,55 секунды. Затем файл HTML отправляется с веб-сервера в браузер (но не отображается), а затем в другие ресурсы.

Результаты WebPageTest.org для yoast.com

Полевые данные против лабораторных данных

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

Показатели Core Web Vitals можно измерить в полевых условиях, и они отражают опыт, который получают ваши реальные посетители. Вот почему Google требует, чтобы по крайней мере 75% ваших реальных посетителей испытали хорошую производительность страницы, прежде чем дать вам пропуск. Вы можете рассчитывать на то, что PageSpeed ​​Insights предоставит вам полевые данные от реальных пользователей.

Напротив, такой инструмент, как WebPageTest.org, запускает тесты и собирает данные в контролируемой среде с предопределенными устройствами и сетевыми настройками.

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

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

Какой приоритет?

Вообще говоря, если у вас есть как полевые, так и лабораторные данные на странице, вы должны отдавать приоритет использованию полевых данных и основывать на них свои усилия по оптимизации. Это означает просмотр данных в Google Search Console и PageSpeed ​​Insights. Google также рекомендует отдавать приоритет полевым данным. Поскольку полевые данные отражают опыт реальных пользователей, вы можете лучше понять, с какими проблемами они сталкиваются и что вам нужно сделать, чтобы их исправить.

Подведение итогов

Научиться проверять скорость страницы не должно быть сложно. Если вы только начинаете оптимизировать скорость страницы, обратите внимание на Google Search Console и PageSpeed ​​Insights. Эти инструменты дадут вам представление о том, какие страницы падают с Core Web Vitals и как реальные пользователи воспринимают вашу страницу.

Затем определите, чего не хватает вашим страницам, и сосредоточьте свои усилия на оптимизации ваших страниц, чтобы они соответствовали требованиям Core Web Vitals.