Руководство по производительности одностраничных приложений

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

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

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

Основное преимущество использования SPA заключается в том, что страницу не нужно перезагружать при изменении содержимого на странице. Однако именно эта функция и тот факт, что страница не перезагружается, затрудняют мониторинг производительности SPA.

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

  • Следите за своими виртуальными страницами
  • Вызовы XHR и производительность виртуальной страницы
  • Отслеживайте индивидуальное время выполнения
  • Развертывания и производительность
  • Коды ответов
  • Ошибки JavaScript

1. Отслеживайте свои виртуальные страницы

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

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

rg4js('trackEvent', {
  type: 'pageView',
  path: `/${window.location.pathname}`
}); 

2. Мониторинг распределения вызовов XHR и производительности виртуальной страницы

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

Читайте также:  Шпаргалка по Big-O Notation: быстрые ответы на вопросы Big-O

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

На главной странице производительности в RUM вы найдете вызовы XHR в модуле «Наиболее востребованные XHR» внизу этой страницы.

На главной странице производительности в RUM вы найдете вызовы XHR

Самый востребованный модуль XHRs в RUM

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

После нажатия на XHR, который вы хотите исследовать, вам будет представлено

Распределение производительности XHR во времени

Гистограмма выше отображает количество вызовов XHR со временем загрузки между двумя конкретными периодами времени. Это распределение показывает диапазон времени загрузки для одного и того же XHR, чтобы лучше понять влияние.

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

3. Отслеживайте индивидуальное время выполнения

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

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

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

rg4js('trackEvent', {
  type: 'customTiming',
  name: 'timeToInteractive',
  duration: 1200,
});

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

Пользовательские тайминги могут быть отправлены в любой момент жизненного

Распределение производительности XHR во времени

4. Соотнесите недавние развертывания с производительностью

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

Читайте также:  Что нового в Python? Руководство по Python 3 и выше

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

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

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

Распределение производительности XHR во времени

5. Отслеживайте коды ответов приложений

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

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

Чтобы увидеть коды ответов XHR, перейдите в раздел «Коды ответов» в RUM.

Легко обнаруживайте тенденции с помощью сгруппированного представления

Легко обнаруживайте тенденции с помощью сгруппированного представления в Raygun кодов ответов вашего приложения.

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

6. Отслеживание ошибок JavaScript

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

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

Заключительные мысли о том, как улучшить работу ваших SPA

Приведенные выше советы должны дать вам то, что вам нужно знать, чтобы улучшить работу ваших SPA.

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

Оцените статью
bestprogrammer.ru
Добавить комментарий