Как создать культуру веб-производительности в вашей команде

1656578424 kak sozdat kulturu veb proizvoditelnosti v vashej komande

Те, кто со мной работает, знают, что я всегда одержим результатами. Слова типа: критический путь рендеринга, размер пакета и количество кадров в секунду — обычные вещи в офисе. Но это все не зря.

Производительность должна быть a гражданин первого сорта в программной инженерии.

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

Но почему это так важно? И каковы это риски?

Почему производительность имеет значение

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

Производительность зависит от удобства использования.

Есть много исследований ([1], [2], [3]), показывающие прямую зависимость между бизнес-целями и удобством использования в Интернете.

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

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

53% пользователей закроют веб-сайт в течение 3 секунд, если вы не показываете никакого содержимого.

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

Производительность – это доступность.

Поговорим о мировом рынке. Бюджеты производительности также важны, когда речь идет о стоимости данных. Сколько платит пользователь за посещение вашего сайта?

Вы можете узнать, используя этот веб-сайт. Тогда вы можете спросить себя: «Готов ли я заплатить их центов, чтобы посетить мой веб-сайт?» Вы можете быть удивлены своим ответом.

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

Пропуская это, вы делаете свой продукт недоступным для многих людей!

Перформанс – это сострадание

Мы имеем тенденцию смотреть на нашу работу строго своими глазами. Это небезопасно, поскольку приводит к поверхностному пониманию потребностей наших пользователей.

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

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

Планируйте к худшему

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

4u0XBu8dfPbS9KEEuq0Uc1ad5g9cMbqoJb3g
снимок экрана с инструментов разработчика Chrome

Его 9,3 мегабайта данных, занимающий примерно 7 секунд для загрузки через сверхбыстрое соединение Wi-Fi и на MacBook Pro. Можете ли вы представить, сколько времени это займет на мобильном устройстве? Ответ таков бесконечность! Потому что мобильный браузер перестает реагировать, когда вы открываете веб-сайт.

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

Мы не должны винить пользователя. Они хотели показать очень подробное изображение сборника.

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

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

Когда оптимизировать

Существует два подхода к оптимизации производительности. Бен Шварц подытоживает два подхода в своей колоде «Критический запрос».

LQhLZLaEKGlTWi5btGkboK0W2JOjNv6QRxKF
fulD0TWIdNZHkuxffOBGWBmxvWBZftfMwpZc
Реактивный (сверху) против Проактивный (нижний) подход к оптимизации производительности

С одной стороны, мы имеем традиционное: «Хьюстон, у нас проблема!» подход. Это высоко реактивный способ решения проблем производительности Я тоже люблю это называть: «О, стреляйте! Позвоните консультанту!» проблема.

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

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

Если вы хотите убедить деловую сторону попробовать проактивный подход, просмотрите статистику WPO. Это отличный ресурс с тематическими исследованиями, которые показывают преимущества оптимизации производительности.

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

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

Измеряй и действуй

Знаете ли вы, сколько пользователей переходят на ваш сайт с мобильных устройств? Как часто вы тестируетесь в плохих сетевых условиях? Как часто вы получаете устройство среднего класса, например Moto G4, и начинаете играть со своим приложением?

Это все подходящие сценарии, с которыми ваши пользователи могут сталкиваться каждый день!

Знайте свою базу пользователей, знайте, как используете устройство и браузер. Хорошо и актуально метрики это все, если вы хотите внедрить культуру производительности.

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

Наконец-то пора действовать! Ниже приведены некоторые инструменты и методы, которые вы можете внедрить в обычную рабочую среду:

Шаг 1: Измерьте характеристики эффективности

  • Lighthouse – это удивительный проект, который доступен в Chrome Dev Tools. Это даст вам прекрасное представление о потенциальных улучшениях производительности. Он также даст вам несколько приятных предложений по SEO, доступности и лучших практик.
  • Webpagetest отлично подходит для отслеживания показателей и сравнения каскадных диаграмм до и после развертывания. Я также могу порекомендовать gtmetrix, менее известный инструмент с очень простым в использовании интерфейсом.

Шаг 2: Автоматизация

  • Разместите этапы построения, связанные с производительностью, к вашей CI. bundlesize – отличный пакет, если вы хотите определить жесткие ограничения для своих пакетов.
  • Создавайте автоматические тесты, которые не удастся, если время загрузки или другие соответствующие показатели превышают определенные пороги. Puppeteer имеет прямой доступ к API Chrome, так что вы можете использовать это в своих тестах.

Шаг 3: Сделайте это визуальным

  • Каждый в команде должен знать о влиянии кода, которое они пишут. Анализатор пакетов Webpack – это отличный способ визуализации входящего в исходные пакеты. Люди могут дважды подумать, прежде чем использовать библиотеку, увеличивающую общий размер на 10%.
  • Стоимость импорта для VSCode покажет вам, сколько кода вы добавляете в проект, используя определенные зависимости. Опять же все заключается в том, чтобы убедиться, что все полностью осознают влияние того, что они делают.

Шаг 4: Обеспечьте исполнение и расширьте возможности

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

Построение, ориентированное на исполнение культуры это шаг за шагом процесс. И это процесс понимание проблемы и актерский на них.

Одной из констант во всем процессе есть необходимость воспитывать Люди.

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

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

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

hkpZovJ1oITO9WFs3xjZzrDaUKIPzwyZ2Ig6
Постер со шпаргалкой о производительности в нашем офисе Fortech

Производительность как часть качества программного обеспечения

В конце концов, работать над производительностью — это то же самое, что работать над UX, безопасностью или доступностью. Это часть программное обеспечение качество что вы предлагаете.

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

Но, возвращаясь к идее ответственности, наша обязанность – обеспечить лучшее возможное качество. А производительность является одним из столбов качества программного обеспечения.

Если я хочу подытожить путь к культуре продуктивности, то это основные выводы:

  • Повышайте осведомленность и развивайте сочувствие к пользователю
  • Отдавайте предпочтение проактивному подходу и решайте проблемы раньше времени
  • Измеряйте и действуйте в непрерывном цикле
  • Распространяйте знания и вовлекайте в процесс всю команду
  • Сделайте это частью качества вашего программного обеспечения как конечной цели

Ссылки

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

Мне очень интересно услышать ваши мысли на этот счет. Поддерживает ли ваша команда культуру исполнения? Что для вас работает? Что нет? Оставьте комментарий и поделитесь, если вам понравилась статья!

Добавить комментарий

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