От автора: в этой статье мы расскажем о критических концепциях и стратегиях веб-производительности. Понимание их позволит вам начать процесс оптимизации скорости своих сайтов и приложений.
Что такое веб-производительность?
На высоком уровне веб-производительность — это скорость, с которой запрашиваемый контент загружается, отображается и готов к взаимодействию. Это время измеряется несколькими способами с помощью различных метрик производительности (о которых мы поговорим ниже).
Что делает производительность настолько сложной, так это то, что, наблюдая только за метриками, мы можем не точно определять опыт наших пользователей, поэтому мы говорим об объективной (измеряемой метриками) и субъективной (воспринимаемой людьми) производительности.
Производительность в сети постоянно балансирует между улучшением ключевых показателей и проверкой предположений с помощью людей, использующих наше программное обеспечение.
Хотя веб-производительность в первую очередь проявляется в аспекте фронт-энд (через взаимодействие с интерфейсами), оптимизация в этом пространстве охватывает не только HTML, CSS или JavaScript. Иногда улучшение веб-производительности означает оптимизацию запросов к базе данных, переработку внутренних компонентов приложения (что особенно актуально в случае мобильных приложений) или настройку конвейера хостинга и CDN.
Производительность не должна быть специфичной для разработки. Вы можете зайти настолько далеко, чтобы определить производительность как один из принципов своего продукта — насколько легко и быстро пользователь может достичь своих целей?
На что влияет веб-производительность?
Низкая производительность в сети имеет далеко идущие последствия не только для удобства пользователей и доступности, но и для роста бизнеса, возможностей рекламы и продаж товаров.
Компании, которые вкладывают средства в повышение скорости, отмечают значительное снижение показателя отказов, увеличение трафика, вовлеченности, конверсии и, следовательно, доходов.
Если задержка в 1 секунду может привести к снижению конверсий до 20%, производительность становится слишком дорогой, чтобы ее игнорировать.
Воздействие низкой производительности на пользовательский опыт поддается количественной оценке. 53% мобильных пользователей оставляют страницы, которые не загружаются в течение 3 секунд. Наше восприятие также ограничено; через 1 секунду поток мыслей прерывается, и через 10 секунд мы отвлекаемся от задачи, которую пытались выполнить.
Алгоритм поискового ранжирования Google наказывает медленные сайты. Кроме того, ваша реклама может быть более дорогой. В будущем Google может заметно помечать медленные сайты в интерфейсах своих браузеров, эффективно сигнализируя пользователям о том, что их ожидает плохой опыт.
Низкая скорость — это вектор дизайна, который напрямую влияет на ваш бренд — на его надежность и качество.
Каковы наиболее важные показатели производительности?
Десятки показателей производительности отображают различные этапы процесса запроса, рендеринга и взаимодействия со страницей. Выбор тех, которые подходят вам и точно отражают пользовательский опыт, может быть затруднительным. Понимание того, на каком этапе доставки и выполнения страниц они находятся, имеет решающее значение.
Вот как мы классифицируем показатели производительности:
Категория: Отображение. Описание: Метрики, описывающие визуальные изменения, которые происходят во время загрузки страницы. Пример метрики: Первое отображение, Первое отображение контента, Первое значимое отображение, Отображение основного контента.
Категория: Время выполнения. Описание: Метрики рассчитываются путем наблюдения за активностью в главном потоке JavaScript, который сильно зависит от аппаратных возможностей. Пример метрики: Общее время блокировки, Парсинг и компиляция JavaScript, Время до первого взаимодействия, Время простоя процессора.
Категория: Запрос. Описание: Метрики, описывающие сжатый размер переданных активов и время, необходимое для ответа на запросы. Пример метрики: Время до первого байта, Общее количество переданных страниц, Общее количество переданного JavaScript, Общее количество переданных изображений.
Категория: Размер в байтах. Описание: Метрики, отображающие несжатый размер активов после их доставки пользователям. Пример метрики: Общий размер страницы в байтах, Общий размер изображений в байтах, Общий размер CSS в байтах.
Категория: Lighthouse. Описание: Агрегированные результаты аудита, предоставленные Lighthouse, основанные на других показателях производительности и пользовательских условиях. Пример метрики: Показатель эффективности, Показатель доступности, Показатель SEO, Рейтинг передового опыта.
При начале отслеживания производительности полезным набором метрик для начала будет «Время до первого взаимодействия», «Отображение основного контента», «Общее время блокировки», «Первое отображение контента», «Время до первого байта» и «Оценка производительности Lighthouse».
Этот выбор обеспечивает исчерпывающий набор метрик, отражающих не только общую производительность, но и пользовательский опыт с точки зрения визуальных эффектов и интерактивности.
Каковы основные узкие места производительности?
Значительные проблемы неизбежно будут зависеть от вашего контекста, но существуют типы ресурсов и конкретные области, которые вызывают большинство проблем производительности.
JavaScript несет ответственность за подавляющее большинство проблем с производительностью, тем более что его использование постоянно растет — 90% сайтов теперь обслуживают не менее 1 МБ скриптов. Как загрузка, так и выполнение скрипта очень ресурсоемки и требуют больших затрат времени, особенно на мобильных устройствах.
Что часто упускается при анализе скрипта, так это тот факт, что несжатый размер часто в 2-3 раза больше оптимизированного пакета, обычно отправляемого в одном файле, который необходимо парсить. Размер определяет огромное время выполнения, которое ухудшается в более медленных сетях и устройствах.
Избегайте длительных задач и блокировки основного потока JavaScript — это одна из самых важных стратегий производительности.
Говоря о скриптах, важно упомянуть влияние сторонних ресурсов. Внешний скрипт сложнее контролировать и он часто остается неоптимизированным, поскольку разработчики переносят ответственность на поставщиков услуг. Когда большинство сайтов обслуживают около 40 внешних скриптов, их влияние нельзя игнорировать.
Мы можем эффективно управлять внешним скриптом, применяя прогрессивные стратегии загрузки. Всегда загружайте и выполняйте только то, что имеет отношение к конкретному контексту клиента (хорошим примером является наша псевдо-реализация в чате, которая позволила снизить время до первого взаимодействия на 30%).
Надлежащее управление и определение приоритетности критических запросов — это еще одна область, которая может повлиять на производительность ваших сайтов. Имея возможность управлять тем, как браузеры извлекают ресурсы с помощью подсказок приоритетности, мы можем обеспечить своевременную доступность основных ресурсов для обеспечения быстрого рендеринга.
Знание этих общих областей, где возникают узкие места, позволит вам определить направления для оптимизации.
Как контролировать производительность?
Выбор правильного инструмента мониторинга, который соответствует вашим потребностям и масштабу, окажет значительное влияние на вашу успешность. Есть несколько факторов, на которые нужно обратить внимание, независимо от того, какими могут быть ваши конкретные требования.
Первый из них — это всеобъемлющий принцип, определяющий вашу работу.
Понимание ваших клиентов имеет решающее значение. Необходимо определить спектр вашей аудитории.
Только когда вы сможете определить, где находятся ваши пользователи, какие устройства они используют и в каких условиях сети работают, вы сможете соответствующим образом скорректировать стратегию производительности. Подобно тому, как мы анализируем поведение, условия и аудиторию, пытаясь создать успешные продукты, работа по повышению производительности требует аналогичного, направленного мышления.
Часто мы видим, что организации используют различные инструменты для измерения скорости. Чего они часто не знают, так это того, что использование нескольких инструментов ведет к неудачам. Каждый провайдер различается в инфраструктуре тестирования — расположение тестируемых машин, условия сети, устройства с различными процессорами. Попытка провести сравнение между платформами, работающими на разных стеках и алгоритмах (WebPageTest, Lighthouse и PageSpeed или пользовательское решение), невозможна. Это внесет ненужную путаницу в надежность самих показателей. Выберите одну платформу и уделяйте внимание долгосрочному мониторингу, чтобы иметь возможность делать значимые выводы.
Насколько надежны результаты, является еще одним важным фактором. Адекватная проверка теста предотвратит возникновение подозрительных всплесков и учет ложных положительных результатов. Ищите инструменты, у которых есть системы, гарантирующие, что измерениям можно доверять всегда.
Инструменты, обеспечивающие прозрачность состояния пользовательского опыта, выходящего за пределы команды разработчиков, помогут вам повысить культуру производительности. Платформы, предлагающие такие функции, как оповещения об ошибках, отчеты по электронной почте и сравнения запросов GitHub, сделают оптимизацию производительности неотъемлемой частью вашего процесса разработки.
Какое бы решение вы ни выбрали, оно должно быть надежным, заслуживающим доверия, поддерживать метрики нового поколения, расширяемым с помощью надежных API-интерфейсов и предоставлять отчеты, доступные кругу лиц за пределами вашей команды разработчиков.
Надеемся, что вы уже достаточно узнали о веб-производительности, чтобы уверенно начать мониторинг и улучшение пользовательского опыт и адаптацию своих продуктов.
Автор: Karolina Szczur
Источник: https://calibreapp.com
Редакция: Команда webformyself.