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

Обновлено: 06.07.2024

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

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

Результат анализа веб-ресурса равный 85 баллам является хорошим показателем и говорит о высокой скорости загрузки ресурса. PageSpeed Insights рассматривает только независимые от сети аспекты работы страницы: конфигурация сервера, структура HTML, использование внешних ресурсов (изображений, JavaScript и CSS).

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

Результатом онлайн-теста Pingdom Website Speed Test является множество метрик-показателей скорости загрузки сайта. При этом инструмент дает оценку по скорости разным параметрам. При клике на определенный пункт он разворачивается, предоставляя полный список элементов, которые содержат эту проблему.

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

Консоль разработчика Google Chrome – проверить скорость загрузки сайта можно также при помощи браузера Google Chrome и консоли отладчика.

Для того чтобы выполнить проверку, зайдите на сайт и нажмите клавишу F12. После этого откроется окно разработчика – перейдите на вкладку “Network” и обновите страницу с помощью нажатия клавиши F5. По мере загрузки страницы можно будет увидеть перечень прогружаемых файлов (изображений, скриптов и т.п.), а также количество времени, которое потребовалось на загрузку того или иного элемента. С помощью консоли разработчика Google Chrome можно выявить, загрузка и обработка каких именно ресурсов занимает большее количество времени, чтобы впоследствии знать где и в чем именно можно оптимизировать страницу.

Также стоит отметить что именно в этой вкладке в режиме Large request rows можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики.

Примечание: Обращаем ваше внимание, что технические работы по доработке и оптимизации программного кода сайта, отладке пользовательских скриптов, корректировке контента со стороны службы технической поддержки ActiveCloud не производятся (согласно п. 2.8 Приложения №1 Дополнения об услугах виртуального (мультидоменного) хостинга к Договору Соглашение об уровне обслуживания (SLA) для виртуального хостинга).

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

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

Google Analytics

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

Какие же действия необходимо выполнить для использования функционала Google Analytics?

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

Для новичков в Google Analytics присутствует подробное руководство по работе с ресурсом с удобным и функциональным поиском по ключевым словам.

PageSpeed Insights

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

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

PageSpeed Insights отображает следующие результаты:

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

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

Результат отображается с помощью индикаторов, которые представлены в трех цветах:

красный – выполнение рекомендаций приведет к изрядному повышению скорости загрузки;
желтый – простые исправления улучшат работу ресурса;
зелёный – проблем нет или они практически не отражаются на эффективности работы сайта.

Анализ быстродействия сайта посредством PageSpeed Insights

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

Консоль разработчика Google Chrome

Анализ скорости сайта с помощью консоли разработчика Google Chrome

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

GTmetrix

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

WebPage Analyzer

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

Исходя из этого скрипт предоставляет объекты страницы и их параметры, а также содержит поле комментариев:

После данной таблицы находятся подробные характеристики и рекомендации по исправлению ошибок:

Рекомендации по оптимизации файлов страницы WebPage Analyzer

Pingdom

Предлагает простой тест скорости загрузки страницы с возможностью изменения места расположения сервера (Австралия, США, Швеция).

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

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

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

WebPagetest

Данный онлайн-инструмент позволяет проводить простые и расширенные тесты с указанием массы параметров:

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

Что же необходимо, чтобы проверить скорость ответа сайта?

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

В таблице приведена информация о времени загрузки контента по его типу (графические элементы, скрипты, мультимедиа), позволяя быстро понять, что именно замедляет страничку.

Load Impact

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

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

WhichLoadFaster

Инструмент WhichLoadFaster предназначен для сравнения динамики загрузки двух сайтов, например, собственного и конкурирующего.

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

Monitis Tools

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

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

Seo28

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

Проверка сайта посредством онлайн-инструмента Seo28

Также сервис предлагает постоянную ссылку на результаты проверки скорости ресурса.

Выводы

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

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

Недавно я уже рассказывала о наборе инструментов DevTools, встроенных в Google Chrome. И о их полезных фишках, которые не на поверхности. Таких довольно много, поэтому продолжу. Расскажу об эффективном использовании вкладки Network в меню инструмента. Для SEO-специалистов и не только.

Как запустить Network в DevTools

Напомню, есть несколько способов открыть DevTools:

кликнуть правой кнопкой мыши на элемент на странице и выбрать «Просмотреть код»;
Command + Option + C или Command + Option + I для Mac OS;
Ctrl + Shift + C или Ctrl + Shift + I для Windows, Linux, Chrome OS;
F12 также для Windows.

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

При первом открытии она может оказаться пустой — тогда просто перезагрузите страницу.

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

Каждый столбец — информация о ресурсе. Основные данные по умолчанию:

Status — код ответа;
Type — тип ресурса;
Initiator — что вызвало запрос ресурса. Щелкнув на ссылку в столбце Initiator, вы перейдете к исходному коду, вызвавшему запрос;
Size — размер ресурса;
Time — как долго длился запрос;
Waterfall — графическое представление различных этапов запроса.

Наведите курсор на диаграмму, чтобы увидеть этапы загрузки.

Функционал вкладки Network

Работать в Network удобно, если хорошо знать ее возможности.

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

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

2. Можете фильтровать данные в журнале с помощью панели инструментов Filter.

Допустим, нас интересует только информация по файлам с расширением .svg.

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

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

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

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

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

7. Для сохранения данных в журнале необходимо включить Preserv log.

8. Если нажмете на шестеренку, в панели появятся дополнительные функции:

Group by frame — разбивает ресурсы на четкие группы в зависимости от домена или типа;
Capture screenshots — позволяет делать скриншоты страницы в ходе ее загрузки;
Use large request rows — добавляет дополнительную информацию о файлах в таблицу;
Show overview — позволяет скрывать и показывать графическую информацию о загрузке страницы.

Но чем эти опции полезны именно SEO-специалисту?

Проверка ответа сервера

Можно сделать проверку ответа сервера из панели Chrome DevTools:

Откройте целевую страницу.
Ctrl+Shift+C/Command+Option+C или F12.
Вкладка Network.

Обновите страницу (Ctrl+F5/Command+R).
Найдите основной URL (адрес страницы, которую мы изучаем). В колонке Status можно увидеть ответ сервера для данной страницы.

Например, нам нужно узнать ответ сервера для страницы:

Таким образом можно быстро проанализировать ответ сервера страницы и ее отдельных элементов. Увидеть, например, «битые» картинки.

Изначально ход проверки такой же, как и в случае с ответом сервера.

Но после пятого пункта появится шестой:

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

Смена User-Agent

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

Заходите в дополнительные настройки DevTools.
Выбираете Network Conditions.

Внизу панели появится рабочее пространство с нужным функционалом.

Снимаете флажок Select automatically и выбираете, например, Googlebot Smartphone.

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

Определение ресурсов, блокирующих рендеринг

Используйте данные о времени загрузки ресурсов на панели Network, чтобы определить, какие ресурсы JS и CSS загружаются до DOM и потенциально блокируют его. Фильтруя данные по CSS и JS, можно вычислить проблемные ресурсы.

Блокировка скриптами и по стилям загрузки — одна из наиболее распространенных проблем со скоростью страницы. Их поиск и анализ ее улучшит или увеличит.

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

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

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

Выводы

Таким образом, при эффективном использовании панель Network дает немало возможностей для SEO-оптимизации сайта.

В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.

Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.

Вкладка Console

Вкладка Sources

Теперь заглянем во вкладку Sources. Она показывает все подключенные к странице ресурсы. Чаще всего эта вкладка используется при отладке кода.

Например, так выглядит минифицированный CSS-файл на вкладке Sources.

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

Вкладка Network

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

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

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

Если нажать кнопку фильтра, появится возможность посмотреть, как загружаются определенные ресурсы — например, картинки или шрифты.

В левом нижнем углу — информация о количестве запросов, трафике и времени загрузки. Ещё мы можем выбрать скорость соединения и проверить, как сайт работает на мобильном где-нибудь за городом.

Проверка вёрстки на мобильных

Легко проверить, как выглядит вёрстка на мобильных. Заходим в режим эмуляции и всё — можем поменять ширину экрана, выбрать конкретный девайс (например, айфон), просмотреть все media-выражения, примененные к странице, или выбрать плотность пикселей, чтобы проверить ретиновую графику.

Это незаменимый инструмент в работе над адаптивной вёрсткой.

Скриншоты страниц

Другая возможность — скриншоты страницы. Заходим в режим эмуляции и в выпадающем меню выбираем «сделать скриншот» — изображение сразу сохраняется на компьютер.

Также есть возможность сделать скриншот всей страницы целиком — для этого выберите пункт Capture full size screenshot.

На этом всё — в следующих выпусках расскажем, как пользуются DevTools настоящие профессионалы.

DevTools — инструмент разработчика

Но сила не в инструментах, а в голове. Познакомьтесь с вёрсткой бесплатно прямо сейчас.

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