Вообще говоря, инженерам достаточно быть знакомым с определенной системой, если они понимают ее структуру данных и процесс потока данных, Но с точки зрения бизнеса есть еще один важный аспект, на который должны обратить внимание инженеры по интерфейсу и серверу. это производительность системы, которая является чисто технической.С точки зрения производительности ее можно рассматривать как скорость отклика системы (фактически ее также можно рассматривать как эффективность выполнения и т. д.), а с точки зрения пользователя , производительность — это пользовательский опыт.
Почему производительность веб-страницы имеет значение?
Прямым следствием плохой работы страницы является то, что пользователям приходится ждать, а ожидание, особенно если неизвестно, как долго ждать, вызовет у пользователей тревогу. необходимо, пользователи обычно предпочитают закрывать страницу напрямую. Судя по фактическим данным, низкая производительность является одной из важных причин высокого показателя отказов страницы.
Чтобы понять влияние производительности страницы на бизнес-цели, технологические компании, такие как Yahoo, Google и Amazon, вложили много ресурсов в исследования и оптимизацию. Например, ниже приведен анализ нейронной сети ThinkWithGoogle 11 миллионов рекламных целевых страниц. в 2017 годуВыводы о взаимосвязи между скоростью загрузки и показателем отказов страницы:
Вывод очевиден:Чем раньше, тем лучше, меньше значит больше.
Фактически, в последние годы крупные интернет-компании выпустили множество инструментов и документов по исследованиям и разработкам в области оптимизации производительности страниц, что удобно инженерам для анализа и оптимизации производительности веб-сайта.
Среди них есть три классические книги с точки зрения документации:
- High Performance Websites, Стив Содерс, ранее работавший в Yahoo в отделе производительности;
- Even Faster Websites, там же, на основе первого тома перечислено множество эффективных методов оптимизации деталей;
- High Performance Browser Networks, написанный инженером по производительности Google Ильей Григориком, можно читать онлайн бесплатно, конечно, если вы хотите поддержать читателей, вы можете выбрать покупку;
Существует много инструментов, особенно различные инструменты управления производительностью приложений (APM, такие как New Relic), которые начали появляться в 2015 году. Для инженеров более классическими и простыми в использовании инструментами являются:
- WebPageTest, может рассматриваться как Vim в инструменте анализа производительности веб-страницы, чисто проект с открытым исходным кодом, с узлами по всему миру, идея анализа в основном соответствует золотому правилу производительности Yahoo;
- LightHouse, был интегрирован в инструменты разработчика Chrome и может давать результаты анализа нескольких важных аспектов современных веб-приложений, таких как скорость загрузки, PWA, удобство использования, SEO и т. д. Простота использования и доступность инструментов выше, чем у WebPageTest, Personally настоятельно рекомендую;
Как измерить производительность веб-страницы?
Чтобы четко и точно измерить производительность веб-страницы, мы должны сначала определить производительность страницы.Как определить производительность страницы?
- С точки зрения бэкэнда это может бытьвремя первого байта, то есть время с момента, когда страница инициирует запрос, до получения браузером первого байта ответа, англ. Time to First Byte;
- С точки зрения браузера это может быть время, необходимое для загрузки всех статических ресурсов, от которых зависит загрузка страницы, что часто называютвремя полной загрузки;
- С точки зрения пользователя, это может быть время, необходимое для запуска процесса нажатия клавиши Enter, чтобы увидеть начало рендеринга страницы, что часто называютвремя первого рендера, эту концепцию также можно разделить, например, FirstMeaningfulPaint, которая есть и у WebPageTest, и у LightHouse;
Работа по оптимизации производительности находится на разных этапах или бизнес-сценарии различны.Применимость различных точек зрения вышеприведенных определений различна.Также существует взвешенное суммирование трех вышеуказанных методов измерения для получения всеобъемлющего индекса производительности.
Чтобы действительно начать оптимизацию, вам нужно выяснить, какие ключевые ссылки находятся в процессе от инициации запроса до браузера, отображающего страницу и представляющего ее пользователю.К счастью, современные браузеры предоставляютNavigation Timing APIЭтот процесс был стандартизирован для облегчения расчета показателей эффективности, как показано на следующем рисунке:
Например, упомянутое выше время первого байта и время полной загрузки можно рассчитать следующим образом:
время первого байта = responseStart - navigationStart
время полной загрузки = loadEventEnd - navigationStart
Что касается времени первого рендеринга, то метод точного расчета необходимо сочетать с записью экрана, поэтому из соображений экономии места мы не будем его здесь расширять.
Пример использования PressOne Home Performance
PressOne — это общедоступная сеть распространения контента на основе блокчейна, а https://press.one — вход в проект.В настоящее время функции относительно просты, включая создание учетной записи, вход пользователя в систему, трехстороннюю привязку учетной записи, домашнюю страницу пользователя, подпись контента, и т.д. Функция. Домашняя страница является порталом любого веб-сайта. Важность обеспечения ее скорости доступа и опыта очевидна.Помимо новизны, первоначальный опыт работы с press.one также включает в себя медлительность. пользователи загружают страницу, даже если содержимое отображается до того, как содержимое отображается.Загрузка подсказки, по-прежнему есть четкое чувство ожидания.
Хотя press.one является одностраничным приложением, разработанным на основе angular, большинство методов оптимизации производительности, применимых к традиционным страницам, также применимы.Ниже приведен простой анализ производительности домашней страницы press.one в сочетании с LightHouse, а также список перечислены эффективные действия по оптимизации.
LightHouse можно установить и использовать независимо или можно использовать в Google Chrome, поскольку он интегрирован в панель аудита инструментов разработчика, способ использования относительно прост, рекомендуется прочитать непосредственноДокументация.
Вот результаты диагностики производительности с помощью Google Chrome:
Результат перцентильного индекса производительности – 18 баллов., Полное интерактивное время в сети 3G составляет 20 с, обычно 10 с, пользователи в основном думают, что веб-сайт сломан, видно, что возможности для оптимизации огромны.
Методы оптимизации (Возможности) и диагностика возможных причин (Диагностика), перечисленные LightHouse, относительно интуитивно понятны:
- Включить сжатие текста, включение сжатия текста, является очень эффективным методом оптимизации для статических ресурсов, таких как JS и CSS, обычно экономит более 60%, с низкими затратами на реализацию и огромными преимуществами.Если добавить соответствующее кэширование, это может быть более удобным для повторный доступ пользователей;
- Уменьшите количество таблиц стилей, блокирующих рендеринг, чтобы уменьшить стиль, блокирующий рендеринг, необходимо удалить первый стиль рендеринга экрана из общего стиля и загрузить его первым, стоимость реализации высока, а преимущества умеренные;
- Неиспользуемые правила CSS оптимизированы для файлов CSS, чтобы уменьшить код, который на самом деле не нужен для передачи.Я аккуратно отключил код.Введенный проектом шрифт, кажется, действительно бесполезным.На самом деле эта библиотека не маленькая, стоимость реализации мало, а выгоды умеренные;
- Подавайте изображения в форматах нового поколения, используйте более совершенные алгоритмы сжатия для сжатия изображений с низкой стоимостью внедрения и большими преимуществами;
- Изображения надлежащего размера, запрошенное изображение соответствует используемому размеру, избегая масштабирования, вызывая потери, низкая стоимость реализации и преимущества в зависимости от ситуации;
При реализации вышеуказанных методов оптимизации повторная оценка показателя эффективности может быть достигнута с высокой вероятностью.Проходная линия.
В сочетании с водопадным анализом несложно найти дальнейшие точки оптимизации.Критическая цепочка загрузки ресурсов (Critical Request Chain) слишком длинная, как показано на следующем рисунке:
Чтобы начать первый рендеринг (соответствует синей вертикальной линии в правой части блок-схемы водопада ниже) в дополнение к основному документу нам также необходимо загрузить 5 дополнительных файлов JS и 1 файл CSS:
Как оптимизировать проблему слишком длинной цепочки загрузки ключевых ресурсов?
- Запросы на слияние ресурсов, такие как трехсторонние зависимости elliptic и keythereum, могут быть объединены напрямую, а более радикальные также могут быть объединены с полифиллом;
- Разумное использование отложенной загрузки, правильное разделение ресурсов, которые не нужны для первой отрисовки, могут быть реализованы как SPA, так и традиционные страницы, а некритические ресурсы не будут блокировать первую отрисовку страницы;
- Разумное использование CDN, потому что CDN обычно является узлом, который географически ближе к пользователю, что может значительно сэкономить RTT сетевой передачи;
После того, как будет решена проблема цепочки загрузки ключевых ресурсов, переоцененный индекс производительности, вероятно, достигнет 80 баллов.
Так что же дальше?Теоретически кажется, что оптимизация производительности бесконечна, на самом деле любое поле может потратить 20% времени на достижение 80% цели (например, сократить время рендеринга первой страницы до менее 3 с), а затем можно остановиться. и решать более важные задачи., Конечно, если время позволяет, инженеры, которые преследуют, будут постоянно спрашивать себя, это предел, которого я могу достичь?
Дальнейшую оптимизацию следует рассматривать с точки зрения рендеринга страницы, ведь мы уже передали различные ресурсы, необходимые для максимально быстрого рендеринга страницы в браузере, как сделать так, чтобы он отображался в интерактивном режиме быстрее и плавнее. являются следующим важным соображением. Скорость рендеринга связана с организацией узлов DOM, организацией JS и оптимизацией взаимодействия между JS и DOM.В целях экономии места вы можете написать отдельную статью.
Выше, я надеюсь, это полезно для вас.