Регистрация

[Серверное администрирование, Тестирование веб-сервисов] Почему веб-производительность внутренних систем важна и нуждается в оптимизации? (перевод)

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
02-Мар-2021 05:34
Цитировать

Как-то раз у меня был занятный разговор со службой поддержки Департамента международной торговли (DIT). Они хотели повысить производительность одного из своих веб-приложений. Подобные разговоры — это то, что мне больше всего нравится на моей текущей позиции. Я общаюсь на темы, которые мне интересны, знакомлюсь с новыми людьми, рассказываю им про возможности, о которых они могут не знать, например, как улучшить UX приложения.
Если честно, я немного расстроился, когда мне сообщили, что этот сервис предназначен для внутреннего использования и закрыт для общего доступа. Это означало, что мои обычные goto tools для оценки веб-производительности были недоступны. А именно:
Это натолкнуло меня на мысль: а как все-таки тестировать внутренние сервисы и продукты? В этой статьей я постараюсь это выяснить.
Самое важное условие для быстрых внутренних систем
Как мы все знаем, мир значительно изменился из-за глобальной пандемии. Из-за повсеместных локдаунов все, у кого была такая возможность, начали работать из дома. Это значительно повлияло на производительность Интернета во всем мире и привело к высокому трафику и увеличению времени загрузки. Из-за этого все инструменты, которые необходимы сотрудникам для выполнении своей работы, должны быстро загружаться, а также быть интерактивными.
Раньше подобных проблем с производительностью не возникало, так как внутренние пользователи работали из офиса и использовали локальную сеть (LAN). Проблема усугубляется тем, что многие живут в небольших городах с медленным и нестабильными Интернетом. Или, наоборот, в крупных городах с высоким коэффициентом конкуренции (contention ratio). Поскольку мы говорим о внутренних системах, чаще всего сотрудникам нужно использовать VPN, чтобы войти в офисную сеть. Но это тоже не очень удобно: VPN чаще всего снижает скорость Интернета.
Важно не забывать, что сотрудники — тоже пользователи. Поэтому убедитесь, что вы оптимизируете и свои внутренние системы, так как низкая производительность веб-приложений отрицательно влияет на работу сотрудников. Какие инструменты использовать, если внутренние системы, как правило, приватные? Об этом и поговорим далее.
WebPageTest
Первое, что хотелось бы прояснить: когда тестируете внутренние системы, использовать открытую версию WebPageTest не получится. Но зато вы можете установить приватную. Благодаря этому, можно будет использовать ее во внутренней сети.

После запуска откроется доступ к огромному объему данных для всех внутренних систем. Не забудьте прочитать гайд, чтобы получить как можно больше информации из WebPageTest. Настройка собственной версии не так сложна, как кажется. Есть несколько отличных руководств, как самостоятельно ее настроить на AWS за пару минут:
Такой вариант даст возможность запускать WebPageTest автоматически. Сделать это можно несколькими способами:
Таким образом, вы сможете отслеживать, какое влияние на производительность (положительное или отрицательное) оказывают новые изменения в системе.
Lighthouse
Следующий goto инструмент, скорее всего, у вас уже есть, — это Lighthouse от Google. Если вы установили копию Google Chrome на компьютер, то использовать Lighthouse для аудита внутренней системы очень просто:

Во вкладке DevTools найдите «Lighthouse» и нажмите «Generate report».

Спустя минуту после запуска, аудит вернет результат, как показано на картинке выше. Настоятельно рекомендую настроить новый профиль Chrome специально для тестирования Lighthouse, поскольку расширения браузера могут негативно повлиять на производительность (зависит от того, что именно они делают на странице).
Но Lighthouse — это не только панель аудита. Ниже несколько вариантов, как еще можно использовать этот инструмент:
Вы можете запустить Lighthouse, используя Command line interface (CLI)
Можно легко запустить Lighthouse на всех страницах сайта.
Сравнить производительность “до” и “после” с помощью Lighthouse CI Diff
Автоматически запускать Lighthouse через равные промежутки времени на нескольких сайтах через запуск тестов.
Добавить собственный аудит для мониторинга определенных частей сайта
Поделиться результатами через Github Gist и Lighthouse Report Viewer.
Sitespeed.io
Я ставлю Sitespeed.io на одно из первых мест в этом списке, потому что считаю, что многие его недооценивают. Это замечательный набор инструментов для повышения производительности сайта. Его можно быстро и легко настроить с помощью простой команды docker или npm. Также Sitespeed.io просто запустить на локальном компьютере для быстрого тестирования.

С помощью sitespeed.io можно непрерывно отслеживать столько страниц, сколько вам нужно, отправляя данные в Graphite / Grafana, чтобы получить подобные дашборды. По сути, Sitespeed.io представляет собой cледующий набор инструментов:
  • Coach — автоматизированный инструмент, который помогает увеличить скорость загрузки страниц.
  • Browsertime — главный инструмент Sitespeed. Он взаимодействует с тестовыми браузерами (например, Chrome, Firefox, iOS Safari), а также собирает показатели производительности, изображений, видео и многое другое.
  • PageXray используется для конвертации файлов формата HTTP-archive (HAR) в JSON для облегчения их чтения и использования. (Подробнее о файлах HAR читайте ниже)
  • Throttle — инструмент командной строки для регулирования сетевого подключения при тестировании производительности.

Примечание: Throttle блокирует соединение с Интернетом на всем компьютере, поэтому не забудьте выключить его после завершения работы.
  • Compare — онлайн-инструмент для быстрого и легкого сравнения файлов HAR (например, “до” и “после”).

DevTools в Chrome
Во всех современных браузерах уже есть встроенные инструменты для разработчика. Мы прошли долгий путь со времен Firebug в Firefox. Что немаловажно, DevTools становятся мощнее с каждой новой версией браузера. Это удобно и для разработчиков, и для юзеров, ведь на сайтах должно быть меньше багов, не так ли? Ха!

На изображении выше показана детальная информация, которую может предоставить аудит о производительности веб-страницы (вкладка Perfomance). Но Chrome DevTools, помимо вкладки измерения производительности, имеет много других функций:
А если вы ищете статьи по этой теме, не относящиеся к Google, обратите внимание на эти:
DevTools в Firefox
Существуют и другие браузеры, которые с помощью DevTools могут помочь в оценке проблем с производительностью. Я пользователь Firefox, поэтому регулярно применяю инструменты этого браузера. В Firefox также есть полный набор вкладок, которые можно использовать для поиска проблем на сайте:

Вы можете использовать эти инструменты для:
Библиотеки для расширения данных аналитики
Это может не сработать с внутренними инструментами, но если вы отслеживаете их использование с помощью аналитики (например, Google Analytics, Fathom, Matomo), то можно расширить собираемые данные, включив в них более полную информацию о веб-производительности.

Несколько библиотек, которые можно использовать:
  • Perfume.js можно настроить для сбора большого набора RUM-данных для передачи их в инструмент аналитики.
  • Analytics — Perfume.js plugin — обертка для Perfume.js, чтобы легко запушить данные о веб-производительности в разные инструменты для аналитики.
  • web-vitals точно захватывает информацию Core Web Vitals так же, как другие Web Vitals.

Perfume.js выделяется среди других инструментов объемом собираемых данных Real User Monitoring (RUM). Его можно полностью настроить для сбора такого количества, которое нужно вам. Вот пара руководств, как это сделать:
Аналитика JavaScript
Тема этой статьи не затрагивает JavaScript во внутренних системах, хотя я считаю, что минимизация его использования может улучшить веб-производительность и общую устойчивость. Но если вы все-таки используете JavaScript, постарайтесь его максимально оптимизировать.

К счастью, для этого есть много инструментов:
  • bundle-wizard — CLI инструмент для создания визуализаций бандла JavaScript-а (см. изображение выше), чтобы можно было удалить все, что не нужно.
  • Bundle Phobia — узнайте, сколько будет стоить добавление npm-пакета в ваш набор.
  • Webpack Bundle Analyzer — визуализируйте внутреннюю структуру выходных файлов webpack с помощью этого инструмента интерактивной масштабируемой карты.
  • source-map-explorer — используйте source maps для анализа раздутого кода JavaScript (этот инструмент также работает с Sass и LESS для анализа CSS).

Специальные фреймворки для анализа инструментов и статьи тоже имеются:
  • reactopt — A CLI-инструмент React'а для оптимизации производительности — определяет, нужен ли повторный рендеринг страницы.
  • TracerBench — инструмент для тестирования контролируемой производительности веб-приложений. Обеспечивает понятный, действенный и удобный анализ разницы в производительности.
  • Приложение для измерения производительности в React — DebugBear

CSS анализ
Помимо вкладки Coverage, упомянутой ранее в DevTools Chrome, есть также инструменты, которые вы можете запускать через интерфейс командной строки (CLI). Они будут анализировать CSS, учитывая его сложность, а также выявлять неиспользуемые селекторы на всем веб-сайте:
  • analyze-css — анализатор сложности и производительности CSS-селекторов, запускаемый с использованием интерфейса командной строки.
  • uCSS — пройдет весь сайт в поисках неиспользуемых селекторов CSS, которые затем можно удалить.

Измерение производительности сервера
Золотое правило производительности гласит, что: 80-90% времени пользователь проводит на фронтенде.
По-прежнему рекомендуется убедиться, что бэкенд / сервер оптимизированы. В конце концов, “Time to First Byte matters”.

Также важно удостовериться, что сервер сможет продолжать работать при большой нагрузке, если это когда-либо произойдет. Существует ряд инструментов, которые помогут вам сделать обе эти вещи:
  • httpstat — небольшой скрипт Python для визуализации данных о времени подключения, возвращаемых из curl (см. изображение выше).
  • h2load — инструмент для тестирования HTTP / 2 и HTTP / 1.1, запускаемый из интерфейса командной строки.
  • Hey — маленькая программа для отправки нагрузки на сервер.
  • k6 — создавайте реалистичные нагрузочные тесты, написав JavaScript. Поставляется с API и CLI.
  • Измерение производительности с помощью Server-таймингов — настройка сервера для отправки заголовка, содержащего информацию сервер-таймингов. Предоставляет тайминги о производительности бэкенд-сервера на фронтенд для более удобного обзора в браузере.

Автоматизация с помощью Puppeteer
Puppeteer — это библиотека Node, которая предоставляет высокоуровневый API для управления Chrome или Chromium по протоколу DevTools. Большинство вещей, которые вы делаете вручную в браузере, можно воспроизвести с помощью Puppeteer. Как это можно использовать для тестирования производительности в Интернете? Адди Османи написал в блоге об использовании Pupperteer для веб-тестирования производительности, а также поделился кодом на Github. Эти тесты можно легко запустить через интерфейс командной строки для тестирования как внутренних, так и внешних веб-сайтов:
Расширения для браузера
Существует много расширений браузера, которые можно использовать для оценки веб-производительности. Я бы рекомендовал использовать отдельный профиль с минимальным количеством включенных расширений, когда вы их запускаете. Это связано с тем, что некоторые расширения браузера взаимодействуют со страницей и могут снизить производительность, что приводит к неверным результатам. Вы можете использовать следующие расширения:
  • sloth — расширение, замедляющее работу процессора и сети в браузере, позволяя легко имитировать производительность страницы на более медленных устройствах.
  • Perfmap — при использовании этого расширения, браузер создает тепловую карту ресурсов, загруженных в браузер, и их индивидуального влияния на производительность в соответствии с Resource Timing API.
  • Web Vitals Chrome Extension — расширение для Chrome, которое отображает основные показатели Web Vitals (LCP, CLS, FID) для любой посещенной страницы. Примечание: это скоро будет встроено в Chrome DevTools, сейчас он доступен в Canary.
  • perf-diagnostics.css — это не совсем расширение браузера, скорее, набор CSS, который вы можете добавить на свою страницу для устранения распространенных проблем с производительностью. Простой и эффективный способ выделения изображений без атрибута ширины / высоты, среди ряда других.

Существуют также расширения, предназначенные конкретно для повышения производительности при использовании определенных фреймворков JavaScript:
  • React Developer Tools — это расширение добавляет вкладку «Profiler» в DevTools, позволяя детально изучить производительность приложения React.
  • Angular Augury — расширение для Chrome и Firefox, позволяющее отлаживать и профилировать приложения Angular.
  • Ember Inspector — можно устранять баги и вникать в детали веб-приложения, созданного с помощью Ember.

Network Throttling
Троттлинг сети — это способ замедлить сетевое соединение. Важно понимать, что у многих пользователей не будет быстрого и стабильного широкополосного подключения в большом городе. Другие, наоборот, могут находиться в сельской местности с плохой широкополосной связью и очень слабым сигналом мобильной связи. Регулируя собственное сетевое соединение, вы получаете представление о производительности сайта для пользователей в этих конкретных сетевых условиях.
Вы можете спросить: «Зачем мне блокировать мою сеть, если это встроено в DevTools Chrome?». Важно понимать, что не все методы регулирования сети работают одинаково. При регулировании с помощью Chrome DevTools применяется задержка на уровне браузера при получении каждого ответа. Lighthouse запускает тест на полной скорости, а затем моделирует скорость соединения, жертвуя точностью ради скорости сообщения. Следующие инструменты намного точнее. Они используют регулирование сети на уровне ОС, которое работает на гораздо более низком уровне.
Примечание: эти инструменты ниже регулируют соединение на всем компьютере, поэтому убедитесь, что вы закрыли ненужные приложения при тестировании, а также отключите троттлинг после завершения!
Я всегда использую throttle, потому что он довольно простой:
# Enable 3G Slow
throttle 3gslow
# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250
# Disable throttle
throttle --stop

Анализ файлов HAR
Я упоминал файлы формата HTTP Archive (HAR) ранее в этом статье. Эти файлы позволяют зафиксировать сетевое взаимодействие веб-браузеров с веб-сайтом. Самое замечательное в этих файлах то, что вы можете использовать их для любого сайта, на который можно попасть через браузер (внутренний или внешний). Найти их довольно просто в инструментах разработчика Firefox и Chrome:
Firefox

Chrome

Есть и другие инструменты, которые вы можете использовать для просмотра и анализа:
  • HAR analyzer — браузерный инструмент анализа HAR от Google.
  • YSlow Command Line HAR analyser — довольно старый сервис, но он может анализировать файлы HAR для улучшения производительности.
  • PageXray — конвертируйте файл HAR в JSON, чтобы было легче читать и взаимодействовать (используется в Sitespeed.io).
  • Compare — онлайн-инструмент, позволяющий быстро и легко сравнивать файлы HAR (например, результаты “до” и “после”).
  • HAR Viewer — простой онлайн-просмотрщик HAR для визуализации показателей внутри.
  • Charles Proxy — HTTP-прокси / HTTP-монитор, который может принимать файлы HAR в качестве входных данных для подробного анализа.
  • Fiddler — инструмент для дебаггинга прокси-сервера, который может регистрировать, проверять и изменять трафик между компьютером и веб-сервером. Его также можно использовать для анализа файлов HAR.

Web APIs
Вернемся к нативным возможностям браузера браузера, есть несколько API, которые можно использовать для самостоятельного измерения производительности сайта, без использования библиотек.
  • performance.now() — метод now() интерфейса производительности браузера возвращает timestamp с высокой точностью с момента вызова метода. Позволяет очень легко измерить время между 2 звонками. Добавление их до и после определенной части кода позволит вам измерить и оптимизировать его.
  • Navigation Timing — этот API позволяет разработчикам собирать данные о времени, связанные с навигацией по документу.
  • Resource Timing — этот API позволяет разработчикам собирать полную информацию о времени для ресурсов, загружаемых документом.
  • Assessing Loading Performance in Real Life with Navigation and Resource Timing — Джереми Вагнер — очень подробная статья о том, как два перечисленных выше API могут использоваться для оценки производительности загрузки веб-страницы.

Итоги
Надеюсь, в перечисленных в этой статье инструментах, вы найдете те, которые помогут улучшить внутренние системы. Если сервис или веб-сайт используют только сотрудники внутри компании, это не означает, что его не нужно оптимизировать. Несмотря на то, что сейчас много людей работают удаленно, не у каждого есть быстрое и стабильное соединение. Поэтому помните, что вы и ваши коллеги тоже юзеры!
 ===========
 Источник:
habr.com
===========
 ===========
 Автор оригинала: Matt Hobbs
===========Похожие новости: Теги для поиска: #_servernoe_administrirovanie (Серверное администрирование), #_testirovanie_vebservisov (Тестирование веб-сервисов), #_web_performance, #_web_performance_optimization, #_timeweb, #_blog_kompanii_timeweb (
Блог компании Timeweb
), #_servernoe_administrirovanie (
Серверное администрирование
), #_testirovanie_vebservisov (
Тестирование веб-сервисов
)
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 05:23
Часовой пояс: UTC + 5