Сегодня к сети можно получить доступ через множество устройств, всех форм и размеров, со скоростями сети от 2G 0,3 Мбит / с до 5G 10 Гбит / с. При таком большом разнообразии интернет-пользователей скорость загрузки сайта важна как никогда.

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

Чувствуйте себя комфортно, возьмите чашку чая и начнем!

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

Производительность внешнего интерфейса оказывает значительное влияние на следующие ключевые факторы:

• Сохранение посетителей сайта
• Улучшение конверсии
• Увеличение органического трафика
• Экономия денег пользователей

Сохранение посетителей сайта

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

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

В этих реальных примерах можно ли предположить влияние хорошей производительности (или ее отсутствия) на пользовательский опыт?

Улучшение конверсий

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

Вот еще несколько примеров. Можете ли вы догадаться, как веб-производительность влияет на показатели конверсии?

Средний размер веб-сайтов неуклонно растет из года в год, при этом текущий средний размер страницы (в мегабайтах) выглядит следующим образом:

Размер страницы (в мегабайтах) — май 2019
Median Desktop	Median Mobile
1.9MB	1.7MB
75-й процентильный рабочий стол	75-й процентиль подвижный
3.7MB	3.3MB

Знаете ли вы, оригинальный DOOM составляет всего 2340 КБ (или 2,3 МБ)? Это ставит в перспективу растущий размер сайтов.

Давайте сравним некоторые популярные сегодня веб-сайты с этой классической видеоигрой. Вот подходящая музыка для следующего раздела.

DOOM против The Guardian

DOOM vs MailOnline

DOOM против CNN

DOOM vs веб-сайт DOOM

Благодаря удобному инструменту на whatdoesmysitecost.com мы можем оценить, сколько это будет стоить. По данным сайта: —

«Цены собирались у оператора с самой большой долей рынка в стране, используя наименее дорогой план с (минимум) разрешением на передачу данных 500 МБ в течение (минимум) 30 дней. Цены указаны с учетом налогов. Поскольку эти цифры основаны на наименее дорогом плане, они являются наилучшими сценариями ».

Используя эти данные, мы можем оценить, сколько будет стоить посещение домашней страницы CNN в планах «плати как есть»:

Стоимость веб-сайта CNN.com (5 лучших)
Страна	Стоимость (долл. США)
Канада 🇨🇦	$ 1,45
Япония 🇯🇵	$ 1,01
Бразилия 🇧🇷	$ 0,99
Германия 🇩🇪	$ 0,94
США 🇺🇸	$ 0,75
Великобритания 🇬🇧	$ 0,19

^{Источник: https://whatdoesmysitecost.com/test/190623_CQ_fd39240f3e59f96708d2a158fc5580b6}

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

Как вы оцениваете хорошую внешнюю производительность как разработчика? Каковы наиболее распространенные метрики в использовании? Какие внешние инструменты оптимизации производительности следует использовать? Каковы лучшие методы оптимизации производительности интерфейса? Давайте узнаем!

Общие показатели производительности

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

Время до первого байта

Этот показатель используется для измерения скорости отклика веб-сервера. Поэтому, когда вы посещаете веб-сайт, сколько времени требуется веб-серверу для ответа на запросы браузера. Плохая конфигурация сервера или плохое внутреннее кодирование могут быть причиной плохой производительности в этом показателе, а не внешнего кода. ( Рассматривали ли вы переход на сервер без использования этих преимуществ? )

Первая содержательная краска

Первая содержательная краска — это показатель, измеряющий от ввода URL-адреса и ввода ключа до точки, где браузер начинает отображать первый бит видимого содержимого. Думайте об этом как о времени, проведенном на пустом белом экране загрузки до того, как веб-сайт загрузит первый бит контента.

Первая значимая краска

Это еще одна метрика, ориентированная на рисование, которая измеряет, сколько времени требуется браузеру для отрисовки большинства содержимого над свертыванием, включая любые зависимости от веб-шрифтов (шрифты Google, Typekit и т. Д.), Которые есть у веб-сайта. Думайте об этом как о том, сколько времени требуется браузеру для загрузки чего-то узнаваемого и ожидаемого.

Индекс скорости

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

Первый бездействующий процессор

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

Время до интерактива

Это очень похоже на метрику First CPU Idle, но требует более полного уровня страницы в интерактивном режиме. Чтобы это активировалось, страница должна отображать большую часть своего полезного содержимого и регистрировать большинство прослушивателей событий страницы. Кроме того, любой пользовательский ввод или действия должны быть обработаны в течение 50 миллисекунд.

Предполагаемая задержка ввода

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

Последний нарисованный герой

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

.

Документ завершен

Документ «Complete» отслеживает время, необходимое для запуска события браузера onLoad которое происходит, когда загружаются все статические ресурсы, такие как изображения, CSS, JavaScript. Это полезный показатель, позволяющий получить представление о скорости загрузки веб-сайта.

Полностью загружен

Это не слишком отличается от события завершения документа, за исключением того, что оно учитывает любую асинхронную активность, которая происходит (с помощью сторонних сценариев) после того, как событие onLoad браузера наступило и исчезло. Как правило, измерение наконец фиксируется, когда сетевая активность прекращается примерно на 2 секунды.

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

Существует множество внешних инструментов повышения производительности — бесплатных и на основе подписки — которые позволяют вам проверять производительность вашего веб-сайта и собирать показатели, описанные в предыдущем разделе. Тем не менее, эти 2 стоят выше остальных. Это Google Lighthouse и WebPageTest.

Google Lighthouse

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

Одной из наиболее полезных функций является система оценки, которая применяется к производительности вашего веб-сайта и другим показателям по шкале от 0 до 100. Это облегчает разработчикам обмен информацией об эффективности с заинтересованными сторонами нетехнического проекта, так как не требуется никаких предварительных знаний — просто способность понимать, что чем выше число производительности, тем лучше.

Маяк можно запускать прямо из Dev Tools (выше), через Интернет (через Pagespeed Insights ), через терминал или программно в виде модуля NodeJS ([ Документы ).

Плюсы Маяка

• Маяк имеет небольшую кривую обучения, так как он разработан с учетом простоты. Это идеальный вход в мир веб-аудита производительности.
• Полезно для создания общих отчетов с заинтересованными сторонами и другими нетехническими людьми.
• Множество различных вариантов использования Lighthouse через браузер, Интернет, терминал или через Node. Эта гибкость означает, что он может встраиваться в любой рабочий процесс.
• Поскольку Google часто находится на переднем крае веб-производительности, вы можете быть уверены, что любые рекомендации по улучшению, охватываемые аудитом, актуальны и технически обоснованы.

Минусы Маяка

• При запуске в режиме онлайн с помощью PageSpeed, результаты тестов не сохраняются, поэтому вы несете ответственность за сохранение результатов, экспортируя их вручную или используя другой сервис, который сохраняет их для вас.
• Не обязательно "против", но при выполнении регулярных тестов Lighthouse для отслеживания производительности с течением времени их лучше запускать из PageSpeed ​​Insights, поскольку это гарантирует, что тесты всегда будут выполняться в одной базовой среде. Если вы выполняете их локально через DevTools, тестовый запуск с использованием последней версии MacBook Pro VS на более старом ноутбуке с ОС Windows может дать разные показатели, поскольку они зависят от того, какие ресурсы локальной системы доступны.
• Непонятно, откуда запускаются тесты. Они могут быть запущены локально, или они могут быть запущены с другой стороны мира. Это полезно знать, потому что для того, чтобы эмулировать истинное восприятие клиента, вам необходимо запустить тесты из аналогичных географических регионов, чтобы смоделировать скорости соединения и т. Д.

WebPagetest

Хотя Google Lighthouse отлично подходит для генерации аудитов производительности, которые могут быть усвоены менее техническими пользователями, такими как заинтересованные стороны и маркетологи, Webpagetest предназначен исключительно для самих инженеров веб-производительности.

Он собирает огромное количество данных за тест: от отдельных показателей времени, записей загрузки веб-страницы, временных шкал, отображающих запросы страницы, до даже отчетов Google Lighthouse.

Советы и хитрости веб-страниц

Метрические медианы

Установите «Количество тестов для запуска» на 5, поскольку это дает вам набор медиан для метрик, избегая искажения данных, если один тест выполняется, когда на вашем сервере происходит небольшая ошибка.

Массовое тестирование

Добавление ? Bulk = 1 к URL-адресу, например https://www.webpagetest.org/?bulk=1 включает дополнительную опцию вкладки под названием «Bulk» Тестирование». Здесь вы можете автоматизировать тестирование нескольких URL-адресов, один за другим.

Повторный просмотр

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

Тест из соответствующего места

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

Плюсы Webpagetest

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

Минусы веб-страницы

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

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

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