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

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

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

Цель Почему? На что тестировать?
Обеспечьте конфиденциальность, безопасность и целостность данных, а также обеспечьте эффективное использование API. Почему HTTPS имеет значение HTTPS реализован для всех страниц/маршрутов и ресурсов сайта.
Улучшите производительность нагрузки 53% пользователей покидают сайты, загрузка которых занимает более трех секунд. JavaScript и CSS, которые можно загружать асинхронно или откладывать. Установите цели по времени интерактивности и размеру полезной нагрузки: например, TTI в 3G. Установите бюджет производительности .
Уменьшите вес страницы • Сокращение затрат на передачу данных для пользователей с ограниченными тарифными планами. • Уменьшение требований к хранилищу веб-приложений, что особенно важно для пользователей на устройствах с низкими характеристиками. • Снижение затрат на хостинг и обслуживание. • Повышение производительности, надежности и отказоустойчивости обслуживания. Установите бюджет веса страницы: например, первая загрузка менее 400 КБ. Проверьте наличие тяжелого JavaScript. Проверьте размеры файлов, чтобы найти раздутые изображения, мультимедиа, HTML, CSS и JavaScript. Найдите изображения, которые могут загружаться отложенно, и проверьте наличие неиспользуемого кода с помощью инструментов покрытия .
Уменьшите запросы ресурсов • Уменьшить проблемы с задержкой. • Снизить затраты на обслуживание. • Повысить производительность, надежность и отказоустойчивость обслуживания. Ищите чрезмерные или ненужные запросы для любого типа ресурса. Например: файлы, которые загружаются неоднократно, JavaScript, который загружается в нескольких версиях, CSS, который никогда не используется, изображения, которые никогда не просматриваются (или могут загружаться отложенно).
Оптимизировать использование памяти Память может стать новым узким местом , особенно на мобильных устройствах Используйте диспетчер задач Chrome, чтобы сравнить свой сайт с другими по использованию памяти при загрузке домашней страницы и использовании других функций сайта.
Уменьшите нагрузку на процессор Мобильные устройства имеют ограниченный процессор, особенно устройства с низкими характеристиками. Проверьте наличие тяжелого JavaScript. Найдите неиспользуемый JavaScript и CSS с помощью инструментов покрытия . Проверьте чрезмерный размер DOM и сценарии, которые выполняются без необходимости при первой загрузке. Ищите JavaScript, загруженный в нескольких версиях, или библиотеки, которых можно избежать с помощью незначительного рефакторинга.

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

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

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

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

Хорошим началом аудита сайта является проверка страниц с помощью сетевых инструментов вашего браузера. Если вы не знаете, как это сделать, воспользуйтесь руководством по началу работы с сетевой панелью 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 вы можете получить доступ к диспетчеру задач из меню «Окно». Это простой способ проверить требования веб-страницы.

Диспетчер задач Chrome показывает использование памяти и процессора для четырех открытых вкладок браузера
Диспетчер задач Chrome — берегитесь памяти и процессора!

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

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

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

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

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

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

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

Снимок экрана, показывающий, как экспортировать отчет Chrome Lighthouse в виде сути
Экспортируйте отчет в суть из расширения Lighthouse Chrome — нажмите кнопку «Поделиться».

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

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

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

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

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

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

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

Что еще?

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

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

Скриншот с сайта Whatdoesmysitecost.com

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