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

Автор оригинала: FreeCodeCamp Community Member.

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

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

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

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

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

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

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

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

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

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

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

Кроме того, производительность также является метрикой в рейтинге мобильной связи, Согласно Google Отказ

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

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

Вы можете узнать, используя Этот сайт Отказ Тогда вы можете спросить себя: «Я готов заплатить X Центры, чтобы посетить мой сайт?» Вы можете быть удивлены своим собственным ответом.

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

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

Выступление о сочувствии

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

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

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

Планировать худшее

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

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

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

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

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

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

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

Существует два подхода к оптимизации производительности. Бен Шварц суммирует два подхода в его палубе, Критический запрос Отказ

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

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

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

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

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

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

Мера и акт

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

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

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

Как только у вас есть метрики, пришло время установить бюджеты производительности Отказ

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

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

Маяк это удивительный проект и доступен в инструментах Chrome Dev. Это даст вам большие идеи в потенциальные улучшения производительности. Это также даст вам несколько хороших предложений для SEO, Accessibility и лучших практик.
WebPagetest отлично подходит для отслеживания метрик и сравнения графиков водопада до и после развертывания. Я также могу порекомендовать gtmetrix , менее известный инструмент, с очень простым в использовании интерфейс.

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

Добавьте этапы, связанные с производительностью, в ваших CI. Bundlesize Это отличный пакет, если вы хотите определить некоторые жесткие ограничения для ваших связке.
Создание автоматизированных тестов, которые не удаются, если время загрузки или другие соответствующие метрики превышают определенные пороги. Кукла имеет прямой доступ к API Chrome, чтобы вы могли использовать это в ваших тестах.

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

Все в команде должны знать о влиянии кода, которые они пишут. WebPack Bundle Analyzer отличный способ визуализации того, что идет внутри выходных пучков. Люди могут подумать дважды, прежде чем использовать библиотеку, которая увеличивает общий размер на 10%.
Стоимость импорта Для VSCode покажет вам, сколько кода вы добавляете в проект, используя определенные зависимости. Опять же, это все о том, чтобы убедиться, что все полностью осведомлены о влиянии того, что они делают.

Шаг 4: Обеспечение и уполномочить

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

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

Одна постоянная во всем процессе является необходимость Обучать люди.

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

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

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

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

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

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

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

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

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