Ускорить диагностику сайтов можно с помощью расширений для браузера, о которых мы расскажем далее. Они существенно облегчают оптимизацию веб-страниц.
Измерение показателей скорости загрузки страницы путем отладки – это критически важно. Во всех браузерах семьи Chrome есть встроенные инструменты, помогающие устранить причины медленной работы того или иного ресурса.
Самое удобное в браузерах Chrome и Firefox то, что они могут быть дополнены инструментами, которые дают возможность устранять неполадки на сайтах. И Chrome, и Firefox поддерживают множественные оптимизационные утилиты к браузерам, загрузить которые можно в специализированном интернет-магазине. В Firefox они называются дополнениями, в то время как в Chrome носят имя расширений.
Что браузерные расширения, что дополнения, способны улучшать функциональность браузеров и давать пользователю то, в чем он действительно нуждается на данный момент.
Зачем использовать анализирующие скорость загрузки расширения для браузера
Браузерный отладчик, как, например, «ChromeDevTools», — набор инструментов. Если пользователю, однако, нужен только один из представленных в аддоне инструментов, то его использование – это не совсем выгодный вариант, ведь браузер предлагает к пользованию весь инструментарий вместе, а не по отдельности.
Это значит, что юзер, прежде всего, должен научиться ориентироваться в интерфейсе приложения: его меню с большим количеством различных вкладок и экранов. Проблема в том, что они могут даже не пригодиться этому человеку в работе.
По этой причине расширения представляются валидной и ликвидной альтернативой встроенным в браузер средствам по устранения неполадок. С их помощью можно подобрать тот инструмент, который требуется в данный момент, и пропустить всю ненужную кривую обучения.
Расширение«Google Lighthouse» для Chrome и Firefox
«Lighthouse» – это отличный инструмент для получения понятной и наглядной информации по производительности веб-страницы с последующей возможностью обратиться за диагностической обратной связью и получить советы по ускорению работы сайта.
Для использования отдельной веб-страница GoogleLighthouse, пользователю сначала нужно скопировать URL-адрес страницы, для которой он хочет получить данные, а затем перейти непосредственно к инструменту «Lighthouse».
С расширением «Lighthouse» вся мощь инструментария по отладке и оптимизации доступна одним нажатием кнопки. Все, что нужно сделать, — это нажать на значок расширения, находящийся на панели расширений вашего браузера, а затем на синюю кнопку Generate Report.
Расширение «Lighthouse» откроет новую вкладку в браузере и сгенерирует полный отчет. Нановой веб-странице будет отображаться экран ожидания, пока приложение генерирует этот самый отчет.
В верхней части страницы утилиты «Lighthouse» отображаются числовые показатели веб-страницы, которые наглядно демонстрируют, по каким критериям сайт работает хорошо, а по каким нет:
Если прокрутить страницу вниз, можно увидеть более подробную информацию, которая поможет диагностировать и устранить выявленные проблемы.
Все, что нужно сделать, — это перейти по выделенному синим цветом тексту. Там можно получить исчерпывающую информацию о том, что именно представляет из себя проблема, а также получить предложения по ее устранению. Компания Google разработала версии «Lighthouse» для Chrome и Firefox.
Расширение для браузера «Page Load Time»
Расширение браузера «Page Load Time» для Chrome, а также для Firefox обеспечивает высокоточную метрику загрузки страницы, поскольку использует современный API под названием «NavigationTiming». Ознакомиться с ним подробнее можно на странице разработчика. Утилита была установлена более 100 000 раз и получила суммарно свыше 260 оценок.
После установки расширения достаточно зайти на какую-либо веб-страницу и посмотреть новую иконку, расположенную в правом верхнем углу браузера. Она выглядит следующим образом:
Числа, отображенные в синем квадрате, показывают, сколько времени потребовалось для загрузки сайта. Нажав на эту иконку, можно увидеть более подробную информацию, которая предоставит пользователю полное и исчерпывающее представление о том, почему этот ресурс загрузился так быстро (или же так медленно).
Из скриншота выше можно заметить, что расширение «Page Load Time Browser» показывает крупное количество информации, организованной в удобном для восприятия формате – таблицах и списках. Интерфейс приложения показывает в отчете: задержку (LoadTimings, или же ms), вызванные перенаправлением, время отклика DNS и время соединения.
В отчете также расписано среднее время отклика с момента начала перехода на веб-страницу и время, которое проходит до его завершения. Можно увидеть время, затраченное на выполнение скриптов, загрузки контента, окончательной загрузки страницы. Это действительно большой объем информации, и что наиболее важно – он представлен в легкой для понимания форме, так что разберется даже начинающий пользователь.
Расширение Performance-Analyser
Расширение«Performance-Analyser» для браузера Chrome похоже на расширение«Page Load Time Browser Extension», только вот оно пошло куда дальше в своем функционале.
Программа создает красочные круговые диаграммы для упрощенного визуального восприятия представленной информации в виде различных показателей. На них, например, можно увидеть время рендеринга сайта. Оно будет отображено в виде шкалы, визуально напоминающий фонтан.
Само описание утилиты в магазине приложений подтверждает вышесказанное:
«Performance-Analyser» помогает проанализировать текущую страницу посредством ресурсов API, что позволит отображать и стратифицировать метрики по их типу, домену, времени загрузки, меткам и прочему – мгновенно.
Расширение Page Size Inspector
Расширение «PageSizeInspector» для Chrome особенно актуально, поскольку оно позволяет моментально получить показатели различных метрик, включая количество запросов на шрифты и размер загрузок без сжатия.
Что выделяет это расширение, так это понятный интерфейс и размер в байтах веб-страниц, основанных на следующих языках разметки:
- HTML
- JS
- CSS
Просмотр размера также доступен для шрифтов, изображений и ПО «Ajax»
Расширение для браузера Chrome также предоставляет время загрузки в секундах для быстрого и удобного обзора показателей скорости страницы. Все очень удобно и прямо “под рукой” – на той же странице.
Checkbot: SEO, Web Speed & Security Tester
Утилита объединяет множество инструментов, так или иначе связанных с SEO. Это расширение примечательно тем, что предоставляет данные, которые помогут юзеру лучше понять, почему веб-страница загружается так долго, и где именно возникают проблемы в процессе загрузки.
Плагин предоставляет пользователю информацию о следующих вещах:
- Минификации файлов (уменьшение размера исходного кода).
- Информации о сетевом сжатии.
- Кэшировании файлов.
- Блокировке рендеринга CSS и JavaScript.
- Дублировании CSS и JavaScript.
- Перенасыщение CSS и JavaScript.
- Перелинковках, а также об их цепочках.
Эти данные полезны для определения потенциальных проблем, которые обязательно потребуют устранения для ускорения загрузки веб-страницы.
В качестве бонуса: «Chrome Checkbot: SEO, WebSpeed& SecurityTester» также отображает различные данные, связанные с SEO. Однозначно интересным моментом является отображение данных по безопасности. Программа способна показывать пользователю, является ли ресурс не верифицированным из-за отсутствия у него протоколов безопасности.
Расширения для браузера, направленные на анализ скорости загрузки страниц
Расширения для браузера, направленные на определение скорости страниц чрезвычайно полезны как для издателей, так и для разработчиков. Они могут помочь быстро определить проблемы в конкретный момент, без необходимости открывать другую веб-страницу и вставлять туда скопированный URL-адрес. Диагностика скорости загрузки страницы может быть проведена прямо во время работы сайта, автоматически или простым нажатием одной кнопки.
Источник: https://www.searchenginejournal.com/page-speed-browser-extensions/440100/