Автор оригинала: Todd Gardner.
Google имеет Длинный пользователь производительности сайта как критерии рейтинга Для результатов поиска. Несмотря на важность Опыт страницы Для SEO многие сайты все еще страдают недопустимыми временем нагрузки. Плохая производительность часто является слиянием факторов: медленное время для первого байта, сотни запросов ресурсов, а также слишком много JavaScript.
Nike.com медленно
Давайте посмотрим на популярный онлайн ритейлер: Nike.com Отказ С открытыми упражнениями увеличиваются в популярности пост-COVID, беговые предложения для обуви Nike являются убедительными (возможно слишком убедительны ), и мы хотим купить некоторые.
Но опыт на мобильном, когда мы ориентируемся на Детали продукта Страница Для паровой ботинки медленнее и ямы.
Есть несколько очевидных проблем:
- Страница занимает много времени для загрузки. Субъективный, чтобы быть уверенным, но это за 5 секунды.
- Существует несколько асинхронных деталей, рендеринга в разное время, вызывая кончанные события краски. (Бесплатная доставка баннер, «Войти, чтобы купить» кнопку и т. Д.)
- Есть Несколько сдвигов макета происходящие загрузки нагрузки страницы выглядят ямыми. Особенно Jarring – это изображение продукта Render под заголовком, а затем прыгать над ним.
Мы видим, что страница «чувствует себя медленно, но можем ли мы оценить его? Можем ли мы определить, какие конкретные части ответственны за медлительность?
Аудит производительности с хром
Chrome имеет отличные инструменты диагностики производительности. Мы начнем на сетевой вкладке инструментов разработчика.
Это дает нам некоторые количественные метрики:
- Первоначальный документ взял 143 мс вернуться с сервера.
- 283 Общие запросы на загрузку страницы.
- 5,7 МБ передается через провод.
- 12,9 МБ несжатых ресурсов.
- 5.6 секунд, чтобы закончить.
283 Запросы неожиданно высоки, и за борт на странице сведений о продукте (или действительно ничего). Это количество запросов собирается поставить пол на то, как быстро может быть сайт, независимо от любых других улучшений.
Многие из запросов обслуживаются по HTTP/2, который помогает с мультиплексированием , но все равно будет лучше для производительности, чтобы сделать резко меньше звонков.
Мы можем дальше выяснить, фильтруя вкладку сети в определенные типы ресурсов. Это давайте увидим размер и количество запросов для каждого типа (JS, CSS и т. Д.).
Несколько вещей выделяются. Во-первых, 87 Запросы на общую сумму 8,9 МБ javascript! Это много JavaScript! Есть также 72 XHR/Fetch запросы на странице нагрузки, которые чувствуют себя как слишком много. 46 Запросы изображения также нажимают его, но это не огромный сюрприз на сайте электронной коммерции, как это. Наиболее относительно вещей здесь является количество запросов JS и общий размер сценария.
Диагностировать проблемы JavaScript с помощью Chrome Performance Audit
Мы можем использовать «Производительность» Особенность аудита в инструментах разработчиков, чтобы узнать, что происходит с JavaScript на этой странице.
Создание профиля производительности дает нам снимок нагрузки на определенную страницу. Мы получаем подробные графики пламени и сроки того, что происходит. Если вы хотите играть вместе, Скачать профиль Используется в этом руководстве и загрузите его в Chrome, чтобы посмотреть.
В нашем профиле Chrome производительности отображается много информации. Сначала он может выглядеть пугающим. Давайте сломаемся и пройду через каждую секцию индивидуально.
Раздел 1: ЦП, сеть и рамки в секунду
Верхняя секция ( 1 ) – это то, где кадры в секунду, сетевой активности и использование процессоров и утилизация CPU с течением времени.
Эти маленькие красные линии на вершине длительные рабочие задачи. Ниже, в зеленом, это количество кадров в секунду (FPS) браузер рендеринг. Выше лучше. Чем ниже ФПС, тем больше желчные анимации будут смотреть на пользователя. Ниже график FPS есть счетчик использования процессора. Желтый представляет собой процессорное время, проведенное выполнение JavaScript, в то время как фиолетовый – это процессорное время, проводимое рендеринга.
В целом этот график рассказывает нам что-то конкретное. Длинные рабочие задачи, возникающие в JavaScript, едят процессор и убивают кадров в секунду. Когда каждая длинная рабочая задача окончательно завершается, браузер проводит рендеринг времени. Это общий шаблон использования в плохо оптимизированных/структурированных приложениях по одной странице (SPA).
Раздел 2: пламенные графики и жизненный цикл страницы
Средний раздел профиля производительности ( 2 ) показывает подробные графики пламени, представляющие анимацию, тайминги функции JavaScript и события жизненного цикла страницы.
Красный «L» – это Oepload стрельба мероприятия. Крупнейшая кончанная краска (LCP) и Первая кончальная краска (FCP) показаны также. Мы также получаем более подробную информацию о том, как долго занимались некоторые задачи. Эти более длинные задачи являются хорошими местами для начала при расследовании, почему выполнение скрипта забирает так долго.
Раздел 3: Сводка и совокупные списки
Нижняя часть профиля ( 3 ) показывает резюме и список данных.
Это подтверждает, что мы подозреваем – скрипты с учетом большинства ( 70% ) общего времени во время нагрузки на странице. Рендеринг занимает следующий крупнейший кусок на 12% и, вероятно, коррелирует на использование тяжелых JS. То есть рабочая JavaScript делает в конечном итоге приводит к изменению до DOM, вызывая рендеринг.
Анализ сценариев в профиле производительности
Хорошее место для начала при расследовании проблем сценариев – это вкладка «снизу вверх». Это дает нам более гранурный вид на круговую диаграмму с таблички сводных данных. Мы можем видеть точные проценты по времени, но теперь мы можем расширить стрелы и погружение глубже.
Когда мы нажимаем на каждую из этих мероприятий, мы получаем гораздо более подробную картину того, где идет время. Сверление в разделе «JavaScript» в верхнем уровне «JavaScript», мы видим список функций Chrome, проводит больше времени.
Из имени файлов ясно, что большая часть нашего времени проводится внутри реагирования. Учитывая количество рендеров и высокого процессора/низкого FPS, вполне вероятно, что приложение в значительной необходимости оптимизации!
Мы можем видеть, что SetState заметно представлен в списке, и повторные вызовы на SetState Часто приведет к линию макета и других проблем с высокой производительностью. С точки зрения улучшения кода, бурение в этих функциях RACT будет хорошим местом для начала!
Так что JavaScript – поэтому Nike.com так медленно?
Как и в случае с большинством сайтов, нет одного курительного пистолета, вызывающего все проблемы с производительностью. В этом случае 87 JS файловые запросы и почти 9 МБ несжатого JavaScript, безусловно, большой фактор.
Неоптимизированное приложение одним страницей
Из графиков мы знаем, что выполнение скрипта вызывает CPU и кадры в секунду, страдают. Мы также знаем, что происходит слишком много рендеров на протяжении всей жизненного цикла страницы. В сочетании с количеством времени, проведенного в реакции, мы можем сделать вывод, что приложение React является большой частью проблемы! Тревочние времени настройки эффективности приложения RACT поможет обратиться к сдвигам макета и многочисленные кончальные краски.
Слишком много сценариев
Там тоже есть еще одна проблема, связанная с JavaScript. Давайте посмотрим на другой взгляд на вкладку «снизу вверх» в профиле производительности, на этот раз сгруппирован URL-адрес скрипта:
Неудивительно, что есть 87 запросов и 8,9 МБ сценария! Существует множество сторонних аналитических и маркетинговых продуктов, представленных здесь, наряду с доказательствами внутренней корпоративной структуры программных групп Nike. Короче говоря, этот список слишком длинный. Каждый из этих скриптов имеет стоимость с точки зрения производительности, а также обслуживание и пользовательский опыт/качество.
Если Nike хотел улучшить производительность своего сайта, они сделали бы следующее:
- Оптимизируйте их приложение React. Обеспечить разумное использование
SetStateОтказ Количество Jank/Layout Shift на нагрузке страницы, в сочетании с привяженными процессорами, настоятельно предполагая, что существуют широкие возможности для обновлений состояния или сделать меньшее значение. - Удалите некоторые из своих аналитиков и отслеживания третьих лиц. Здесь слишком много поваров на кухне, и каждый может способствовать плохому опыту страницы.
- Консолидация некоторых из их первых партийных сценариев. Есть десятки сценариев, загруженных со всего Nike.com. Это Закон в Конвеи в действии.
Создание этих изменений было бы большим началом улучшения производительности на Nike.com!