Используйте инструменты для измерения производительности

Sam Dutton

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

Для каждой цели необходим аудит.

Существует широкий спектр инструментов и методов аудита веб-сайтов:

• Системные инструменты
• Встроенные инструменты браузера
• Расширения браузера
• Заявки на онлайн-тестирование
• Инструменты эмуляции
• Аналитика
• Метрики, предоставляемые серверами и бизнес-системами
• Запись экрана и видео
• Ручные тесты

Ниже вы узнаете, какой подход актуален для каждого типа аудита.

Запись запросов на ресурсы: количество, размер, тип и время

Хорошим началом аудита сайта является проверка страниц с помощью сетевых инструментов браузера. Если вы не уверены, как это сделать, проработайте сетевую панель Chrome DevTools Руководство по началу работы . Аналогичные инструменты доступны для Firefox , Safari , Internet Explorer и Edge .

Не забудьте сохранить результаты перед внесением изменений. Для сетевых запросов это может быть просто снимок экрана — вы также можете сохранить данные профиля в виде файла JSON. Ниже приведена дополнительная информация о том, как сохранять и делиться результатами теста .

Прежде чем начать аудит использования сети, обязательно отключите кэш браузера , чтобы получить точную статистику по производительности первой загрузки. Если вы уже выполняете кэширование через service worker, очистите хранилище Cache API . Вы можете использовать окно Incognito (Private), чтобы вам не пришлось беспокоиться об отключении кэша браузера или удалении ранее кэшированных записей.

Вот некоторые основные функции и показатели, которые следует проверить с помощью инструментов браузера:

• Производительность загрузки: Lighthouse предоставляет сводку показателей загрузки. Эдди Османи написала отличную сводку ключевых моментов пользователя при загрузке страницы.
• События временной шкалы для загрузки и анализа ресурсов, а также использования памяти. Если вы хотите углубиться, запустите профилирование памяти и JavaScript.
• Общий вес страницы и количество файлов.
• Количество и вес файлов JavaScript.
• Любые особенно большие отдельные файлы JavaScript (скажем, более 100 КБ).
• Неиспользуемый JavaScript. Вы можете проверить с помощью инструмента Chrome coverage .
• Общее количество и вес файлов изображений.
• Любые особенно большие отдельные файлы изображений.
• Форматы изображений: есть ли PNG, которые могут быть JPEG или SVG ? Используется ли WebP с резервными вариантами?
• Используются ли адаптивные методы создания изображений (например, srcset ).
• Размер HTML-файла.
• Общее количество и вес CSS-файлов.
• Неиспользуемый CSS. (В Chrome используйте панель покрытия .)
• Проверьте наличие проблемного использования других ресурсов, таких как веб-шрифты (включая иконочные шрифты).
• Проверьте шкалу времени DevTools на предмет наличия чего-либо, что блокирует загрузку страницы.

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

Проверьте память и загрузку процессора

Прежде чем вносить изменения, ведите учет использования памяти и процессора.

В Chrome вы можете получить доступ к диспетчеру задач из меню «Окно». Это простой способ проверить требования веб-страницы.

Тестирование производительности первой и последующих нагрузок

Lighthouse , WebPagetest и Pagespeed Insights полезны для анализа скорости, стоимости данных и использования ресурсов. WebPagetest также проверит кэширование статического контента, время до первого байта и то, эффективно ли ваш сайт использует CDN.

Сохраните результаты

• WebPagetest : каждый результат теста имеет свой собственный URL .
• Pagespeed Insights : онлайн- инструмент Pagespeed Insights теперь включает данные отчета об опыте использования Chrome, отражающие реальную статистику производительности.
• Lighthouse : сохраняйте отчеты из панели аудита Chrome DevTools, нажав на кнопку загрузки:

  

Тест на соответствие основным требованиям Progressive Web App

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

Lighthouse также проверяет, может ли ваш сайт обеспечить приемлемый опыт работы в автономном режиме.

Вы можете загрузить отчет Lighthouse в формате JSON или, если вы используете расширение Lighthouse для Chrome , поделиться отчетом в формате GitHub Gist: нажмите кнопку «Поделиться», выберите «Открыть в средстве просмотра», затем снова нажмите кнопку «Поделиться» в новом окне и выберите «Сохранить как Gist».

Используйте аналитику, отслеживание событий и бизнес-показатели для отслеживания реальной производительности

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

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

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

Вы можете следить за Google Analytics Site Speed , чтобы проверить, как показатели производительности соотносятся с показателями бизнеса. Например: «насколько быстро загрузилась домашняя страница?» по сравнению с «привел ли вход через домашнюю страницу к продаже?»

Google Analytics использует данные из Navigation Timing API .

Вы можете записывать данные, используя один из API производительности JavaScript или ваши собственные метрики, например:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

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

Реальный опыт: запись экрана и видео

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

Вы также можете захотеть сохранять скринкасты. Существует множество приложений для записи скринкастов для Android, iOS и настольных платформ (и скриптов, которые делают то же самое ).

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

Параллельное сравнение «до и после» может стать отличным способом продемонстрировать улучшения!

Что еще?

Если уместно, получите оценку Web Bloat Score . Это забавный тест, но он также может быть убедительным способом продемонстрировать раздувание кода — или показать, что вы внесли улучшения.

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

Доступно множество других автономных и онлайн-инструментов: взгляните на perf.rocks/tools .