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

Sam Dutton

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

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

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

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

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

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

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

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

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

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

• Производительность нагрузки: Lighthouse предоставляет сводку показателей нагрузки. Адди Османи написал отличный обзор ключевых моментов, связанных с загрузкой страницы.
• События временной шкалы для загрузки и анализа ресурсов, а также использования памяти. Если вы хотите пойти глубже, запустите профилирование памяти и JavaScript.
• Общий вес страницы и количество файлов.
• Количество и вес файлов JavaScript.
• Любые особенно большие отдельные файлы JavaScript (скажем, более 100 КБ).
• Неиспользуемый JavaScript. Проверить это можно с помощью инструмента покрытия Chrome.
• Общее количество и вес файлов изображений.
• Любые особенно большие отдельные файлы изображений.
• Форматы изображений: существуют ли 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 User Experience, отражающие реальную статистику производительности.
• Lighthouse : сохраните отчеты из панели аудита Chrome DevTools, нажав кнопку загрузки:

  

Проверьте основные требования Progressive Web App.

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

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

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

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

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

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

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

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

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

Вы можете захотеть записывать данные, используя один из 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. Вы получаете реальные данные о скорости загрузки компонентов страницы: что быстро, а что медленно. Сохраняйте видеозаписи и скринкасты, чтобы сравнивать их с последующими улучшениями.

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

Что еще?

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

Сколько стоит мой сайт? , показанный ниже, дает приблизительное представление о финансовых затратах на загрузку вашего сайта в разных регионах.

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