Измерение производительности - непростая задача. Иногда бывает сложно понять, с чего начать. Я составил список часто используемых инструментов, которые помогают мне разобраться в тонкостях измерения веб-производительности в моих приложениях. Этот список охватывает инструменты, которые я часто использую, но не то, что означают точки данных. Для получения дополнительной информации о точках данных, о которых вам следует заботиться, ознакомьтесь с моей статьей Метрики веб-производительности, о которых должен заботиться каждый.
Маяк
Маяк - один из моих любимых инструментов для измерения производительности и множества других важных точек данных в моих сегодняшних веб-приложениях. Этот инструмент имеет открытый исходный код и был включен во вкладку Chrome DevTools Audit с Chrome 60. Просто откройте DevTools, перейдите на вкладку Audit и установите флажок Performance , и нажмите Выполнить аудит.
При выполнении Выполнить аудит с помощью Производительности Lighthouse сгенерирует отчет, подобный этому. Число в правом верхнем углу служит оценкой (из 100) и цветом, чтобы показать вам, где находится ваше приложение (зеленый = отлично, оранжевый = некоторые улучшения, красный = просто подожги и уходи). Остальные данные дают представление о том, почему вы получили свой балл. Важно разобраться в большинстве этих болевых точек, начиная с самых крупных преступников.
WebpageTest
Хотя пользовательский интерфейс немного устарел, WebpageTest проверен и верен. Этот инструмент дает потрясающие идеи, имеет открытый исходный код и может быть размещен самостоятельно. WebPageTest дает вам возможность тестировать из разных размещенных мест, чтобы увидеть, как ваше приложение работает в географическом плане.
Ваш тест будет выглядеть примерно так, как на изображении ниже. Точки данных в таблице вверху являются одними из наиболее важных. Остальное показывает диаграмму водопада для процессов во время каждого запуска. Обычно WebPageTest запускает тесты для вашего приложения трижды.
Инструменты разработчика Chrome
Chrome DevTools может быть источником, в котором вы можете больше всего узнать о конкретных проблемах с производительностью, которые могут у вас возникнуть. Вот несколько инструментов, которые я считаю наиболее полезными.
Инструмент покрытия
Этот инструмент проанализирует ваши файлы JS и CSS и определит процент кода, фактически используемого вашим приложением. Это поможет вам определить, отправляете ли вы больше кода, чем нужно. Обычно вы используете эти проценты для установки приемлемых пороговых значений, таким образом вы доставляете только то, что важно.
Чтобы получить доступ к этому инструменту, вы можете ввести CMD + SHIFT + P в окне инструментов разработчика и выполнить поиск Покрытие или щелкнуть значок с тремя точками в в правом верхнем углу и перейдите к Дополнительные инструменты - ›Покрытие.
Вкладка производительности
Эта вкладка очень детализирована и требует времени, чтобы привыкнуть к ней. Я рекомендую этот подход в последнюю очередь для поиска таких параметров, как периоды длительных задач и макс. Загрузки ЦП. Общая диаграмма производительности состоит из трех общих разделов: общая шкала времени рендеринга, диаграммы пламени и сводные отчеты.
Движение вперед
Не существует универсального инструмента для повышения производительности. Важно начать с простого и оптимизировать приложение по фрагментам битового размера. Оптимизация производительности - это итеративный процесс, однако эти инструменты могут помочь в поиске ваших крупных нарушителей. Удачи!
Ресурсы
Маяк
Начало работы с Google Performance
WebPageTest
