"Это третий день моего участия в августовском испытании обновлений. Ознакомьтесь с подробностями мероприятия: Испытание августовского обновления"
1. Обзор оптимизации производительности
Эффекты (1) Оптимизация производительности
Почему происходит оптимизация производительности? На самом деле оптимизация производительности продуктов вызвана жесткой конкуренцией аналогичных продуктов на рынке, которая неизбежна. В конечном счете сравнение таково: «У меня никого нет, я лучше, если это у меня есть, я честен, если у меня это есть, и я профессионален, если я честен». Сравнение между конечными конкурирующими продуктами будет иметь тенденцию к конкуренции производительности, а производительность продукта может напрямую влиять на его коэффициент конверсии, коэффициент удержания пользователей и другие показатели.
Производительность сайта влияет на следующие показатели:
- Удержание пользователей: удержание продукта — это, как правило, количество пользователей, которые все еще используют продукт по прошествии определенного периода времени с момента входа пользователя в систему и даты регистрации. Отношение удержания пользователей к количеству регистраций пользователей — это коэффициент удержания пользователей. Чем дольше время загрузки страницы, тем больше пользователей отказываются от приложения. В целом, чем быстрее загрузка, тем выше коэффициент удержания пользователей.
- Коэффициент конверсии сайта:Коэффициент конверсии веб-сайта относится к отношению количества посещений пользователями определенного целевого поведения к общему количеству посещений, например, сколько пользователей, которые просматривают определенный продукт на веб-сайте электронной коммерции, в конечном итоге покупают этот продукт, и его пропорция. Это коэффициент конверсии посетителей в потребителей. Чем быстрее загружается страница, тем лучше пользовательский опыт и выше коэффициент конверсии пользователя.
- Опыт и распространение:Плохой пользовательский опыт, вызванный проблемами с производительностью, не только заставит пользователей отказаться от приложения, но также заставит пользователей отказаться рекомендовать приложение окружающим их сетям, и, что еще хуже, пользователи будут давать плохие отзывы из-за низкой производительности приложения. Важность репутации продукта для его развития очевидна.
(2) Модель оценки производительности
Для оптимизации производительности программных продуктов, согласно модели производительности RAIL (модель основана на пользовательском принципе), ее можно разделить на четыре части:
- Ответ
- Анимация
- Загрузить (Загрузить)
- Бездействие (бездействие)
Эти четыре части представляют четыре аспекта жизненного цикла приложения, которые по-разному влияют на производительность приложения.
1) Ответ
Требования сайта к ответному лицу:Получайте обратную связь о действиях до того, как пользователь заметит задержку.Например, пользователь должен получить обратную связь в течение 100 мс при работе со страницей. Если время превышает 100 мс, пользователь воспринимает задержку. Конкретное временное окно, воспринимаемое пользователем, показано в следующей таблице:
| задерживать | Ответ пользователя |
|---|---|
| 0~100ms | Операция пользователя, которая отвечает в течение этого временного окна, будет гладкой. |
| 100~300ms | Пользователи могут заметить небольшую задержку |
| 300~1000ms | Воспринимаемая задержка рассматривается пользователем как часть процесса загрузки или просмотра страницы веб-сайта. |
| >1s | Внимание пользователя будет отвлечено от задачи, которая выполнялась до этого. |
| >10s | Пользователи разочарованы и могут отказаться от задач |
На самом деле за работой пользователя может стоять сложная обработка бизнес-логики, сетевой запрос и вычисление данных. Поэтому старайтесь выполнять асинхронную работу с большими накладными расходами в фоновом режиме, и даже если фоновая обработка занимает сотни миллисекунд, вы должны предоставлять пользователям своевременную периодическую обратную связь, например отображать ход загрузки на странице, когда пользователь загружает контент.
2) Анимация
Анимации, используемые во внешнем интерфейсе, имеют не только крутые спецэффекты, но и интерактивные эффекты, такие как прокрутка и перетаскивание касанием (говоря об этом, я должен упомянуть, что анимации на официальном сайте Apple настоящие 🐂🍺). Для анимации требованием производительности является плавность.
Исследования показали, что для анимации, независимо от того, насколько высока частота кадров анимации, человеческий глаз может различать только 30 кадров, но высокая частота кадров обеспечивает лучшую плавность воспроизведения, поэтому анимация должна стремиться к частоте кадров 60 кадров в секунду. Согласно частоте кадров 60 кадров в секунду бюджет генерации одного кадра изображения составляет 10 мс (1000 мс / 60 ≈ 16,66 мс).Время отрисовки нового кадра в браузере составляет всего около 10 мс для выполнения кода, поэтому старайтесь контролировать каждый кадр анимации.Время выполнения в пределах 10мс.
3) Простой
Рассматривая проблемы с производительностью с точки зрения пользователя, вы можете использовать время простоя для обработки отложенных задач, если пользователь не ощущает задержки, что может уменьшить размер предварительно загруженных данных и обеспечить быструю загрузку веб-сайта или приложения. .
4) Загрузка
Восприятие пользователя требует от нас попытаться завершить загрузку страницы в течение 1 с.Если она не будет завершена, внимание пользователя будет переключено на другие вещи, и текущая задача будет прервана. Конечно, загрузка и рендеринг страницы здесь не означает завершение загрузки всех ресурсов страницы.С точки зрения пользовательского восприятия, пока критический путь рендеринга завершен, пользователь будет думать, что вся загрузка была завершена. завершенный. Для загрузки некритических ресурсов обычной прогрессивной стратегией оптимизации является отсрочка загрузки браузера до времени простоя браузера.
(3) Показатели оптимизации производительности
Для оптимизации производительности мы должны сначала определить индикаторы для измерения производительности. Есть два общих показателя производительности:Сенсорный индекса такжеPerformance API.
1) Сенсорные показатели
Вообще говоря, обычно используемые органолептические индикаторы, признанные в отрасли:
- Время первой краски (FP): для страницы приложения первое визуальное появление пользователя отличается от момента времени содержимого перед переходом или момента времени, когда страница впервые прорисовывается.
- Время первой отрисовки содержимого (FCP): относится к моменту времени, когда браузер заканчивает рендеринг первого контента в DOM, который может быть текстом, изображениями или любым другим элементом.В это время у пользователя должен быть интуитивно понятный визуальный опыт.
-
Время первой значимой окраски (FMP): Относится к времени рендеринга ключевых элементов страницы. Стандартизированного определения этого понятия не существует, потому что ключевые элементы может определить разработчик — что такое «значащее», знает только разработчик или менеджер по продукту.
-
выше сгиба: это очень важный показатель для всех веб-приложений. Говоря простым языком, это время, когда приложение отображает содержимое всего экрана мобильного телефона (до прокрутки) после входа на страницу. Следует отметить, что отрасль также не имеет определенного вывода по этому показателю, например, включает ли это время время завершения рендеринга изображений на экране мобильного телефона.
-
время взаимодействия с пользователем: как следует из названия, количество времени, в течение которого пользователь может взаимодействовать с приложением. Вообще говоря, мы думаем, что это время domready, потому что в это время обычно привязывается событийная операция. Если сценарий взаимодействия на странице не загружен, то, конечно, так называемое время взаимодействия с пользователем не достигнуто.
2) API производительности
Говоря об индикаторах оптимизации производительности, мы должны упомянуть Performance API, новую функцию HTML5. В прошлом для подсчета времени выполнения скрипта вы могли использовать Date.getTime() для получения соответствующего времени; если вы хотите получить время белого экрана, вставьте фрагмент кода, чтобы получить метку времени в конце голову, а затем вычтите метку времени из этой метки времени, чтобы начать прием данных, результатом будет время на белом экране. Такой способ, несомненно, громоздкий, и полученное время не может быть более точным (только до уровня мс), а часть времени, которое больше волнует фон, вообще не может быть получено. Чтобы решить эту проблему, W3C добавил этот API при запуске HTML5.
Объяснение API производительности на MDN:
Интерфейс производительности может получать информацию о производительности на текущей странице. Он является частью API времени высокого разрешения, который также интегрирует API временной шкалы производительности, API синхронизации навигации, API синхронизации пользователей и API синхронизации ресурсов. Объект этого типа можно получить, вызвав доступное только для чтения свойство Window.performance.
Вы можете получить различные индикаторы веб-сайта через окно.Прообразность на панели консоли консоли. Результаты показаны на следующем рисунке:
Как показано на рисунке, производительность включает пять атрибутов, из которыхtimingЗдесь нужно сосредоточиться на времени — это структура данных карты, где значением ключа является показатель оптимизации производительности, а значением значения — соответствующая метка времени. Между этими временными метками и ключевыми узлами во всем процессе загрузки страницы существует однозначное соответствие. Вот изображение веб-сайта разработчика Google, чтобы проиллюстрировать это:
Из рисунка видно, что многие индикаторы появляются парами, и время ключевых узлов в соответствующем процессе загрузки страницы можно рассчитать напрямую, сделав разницу.Вот несколько наиболее часто используемых, таких как:
const timingInfo = window.performance.timing;
// TCP连接耗时
timingInfo.connectEnd - timingInfo.connectStart
// DNS查询耗时
timingInfo.domainLookupEnd - timingInfo.domainLookupStart;
// 获得首字节耗费时间，也叫TTFB
timingInfo.responseStart - timingInfo.navigationStart
// domReady时间(与前面提到的DomContentLoad事件对应)
timingInfo.domContentLoadedEventStart - timingInfo.navigationStart
// DOM资源下载
timingInfo.responseEnd - timingInfo.responseStart
Выше приведены наиболее часто используемые индикаторы, которые также можно получить в разделе «Тайминг» в сетевой панели браузера Chrome:
(4) Шаги по оптимизации производительности
Модель производительности RAIL указывает на то, как пользователь воспринимает разное время задержки.Принцип, ориентированный на пользователя, заключается в том, чтобы пользователи были довольны производительностью приложения.
Для различных типов операций, которые необходимо выполнить в течение определенного временного окна, шаги по оптимизации производительности следующие:
- Количественно оценить производительность веб-сайта;
- На основе жизненного цикла отклика страницы сайта анализировать причины плохой работы;
- Провести техническое преобразование, технико-экономический анализ и другую конкретную реализацию оптимизации.
Жизненный цикл страницы и измерение производительности страницы подробно описаны в частях 2 и 3 соответственно.
Конкретные идеи для оптимизации производительности заключаются в следующем:
- Оптимизация ресурсов передачи: таких как ресурсы изображений, разные типы форматов будут иметь разные сценарии использования и судить о том, подходит ли это в процессе использования;
- Оптимизация процесса загрузки: например, задержка загрузки, есть ли некритическая информация, которую не нужно отображать на первом экране, которая занимает время загрузки страницы;
- Оптимизация JavaScript: сжимается ли код JavaScript, стандартизируется ли написание, учитываются ли утечки памяти и т. д.;
- Критическая оптимизация пути рендеринга: например, нет ли ненужных перекомпоновок и перерисовок и т. д.;
- Локальное хранилище и кеш браузера.
2. Определение производительности интерфейсных страниц
(1) Общие инструменты тестирования производительности
Существует много распространенных инструментов тестирования производительности, например, панели инструментов, связанные с тестированием производительности в инструментах разработчика Chrome, PageSpeed Insights, инструмент анализа производительности загрузки страниц, и WEBPAGETEST, профессиональный инструмент тестирования производительности.
1) Диспетчер задач Chrome
В браузере Chrome вы можете использовать диспетчер задач для просмотра использования GPU, сети и памяти всеми текущими процессами, включая открытые в данный момент вкладки, установленные плагины, а также GPU, сеть, рендеринг и другие браузеры. . Отслеживая эти данные, можно обнаружить проблемные процессы с утечками памяти или аномальной загрузкой сетевых ресурсов, когда возникают значительные накладные расходы, отличные от других процессов. Диспетчер задач Chrome выглядит так:
2) Сетевая панель
Панель «Сеть» — это панель, часто используемая в инструментах разработчика браузера Chrome.Через нее вы можете просматривать статус запроса ресурсов веб-сайта, включая время загрузки, размер, настройку приоритета, запуск кэша HTTP и другую информацию, чтобы найти веб-сайт. запрос ресурсов существующие проблемы. Панель Сеть показана на рисунке:
3) Панель покрытия
Панель «Покрытие» можно использовать для мониторинга и подсчета покрытия выполнения кода во время работы веб-приложения. Объектами статистики панели являются файлы сценариев JavaScript и файлы таблиц стилей CSS. Статистические результаты в основном включают: размер каждого файла в байтах, количество байтов кода, пройденных во время выполнения, и гистограмму визуального покрытия. Низкое покрытие кода означает, что в файле кода много неиспользуемого кода, и разработчики могут разделить код в соответствии с этим результатом и загрузить его по мере необходимости. Панель покрытия, как показано на рисунке:
4) Панель памяти
На панели «Память» можно быстро создать снимок динамической памяти текущего файла или просмотреть изменения памяти с течением времени, чтобы можно было просмотреть и обнаружить возможные утечки памяти и другие ситуации. Панель Память показана на рисунке:
5) Информация о скорости страницы
Это официально запущенный Google автоматизированный инструмент для определения производительности загрузки веб-страницы. В этом инструменте вы можете напрямую ввести URL-адрес страницы для анализа производительности страницы. Следует отметить, что результат основан на экспериментальные данные проанализированы Lighthouse. Ссылка на официальный сайт:PageSpeed Insights. Возьмите статью Юке в качестве примера для проверки:
6) ВЕБ-ТЕСТ
WEBPAGETEST — это профессиональный инструмент для анализа производительности веб-страниц, который может настраивать конфигурацию среды обнаружения и анализа, включая физическое расположение тестового узла, модель устройства, версию браузера, сетевые условия и время обнаружения. Кроме того, он также обеспечивает сравнение производительности между веб-приложениями и конкурирующими продуктами, а также инструменты тестирования для различных ситуаций, таких как просмотр условий сетевой маршрутизации. Ссылка на официальный сайт:WEBPAGETEST .Возьмите домашнюю страницу Yuque в качестве примера для тестирования:
(2) Производительность
Панель «Производительность» в основном предназначена для обнаружения и анализа производительности приложений веб-сайта во время выполнения.Контент, который может быть обнаружен, включает в себя: количество кадров в секунду (FPS) страницы, использование ЦП, время, затраченное на различные запросы, и выполнение сетевых задач состояние.
Панель «Производительность» можно открыть в Chrome DevTools,Рекомендуется использовать этот инструмент в режиме инкогнито., потому что на веб-страницу в этом режиме не повлияют такие факторы, как кеширование или другие плагины:
Видно, что в середине панели «Производительность» на приведенном выше рисунке показано, как начать использовать эту панель.Нажмите черный кружок слева в верхнем левом углу, чтобы начать новую запись мониторинга.Нажмите кнопку обновления, чтобы записать запись мониторинга в течение всего процесса обновления.Вы также можете нажать кнопку справа, чтобы удалить запись обнаружения.
Нажмите кнопку обновления, результаты производительности домашней страницы веб-сайта следующие, а информацию, которую она содержит, можно разделить на четыре категории: панель управления, панель обзора, панель потоков и панель статистики:
1) Панель управления
На панели управления есть пять пунктов выбора и два раскрывающихся списка, и их значения следующие:
- Скриншоты: Указывает, делать ли скриншот каждого кадра.Будет установлен флажок по умолчанию, а анимация скриншота, меняющаяся со временем, будет отображаться на панели обзора.Если флажок снят, то это не будет этой частью контента;
- Память: указывает, следует ли записывать потребление памяти или нет.По умолчанию это не будет кандидатом.Если флажок установлен, кривая потребления памяти различных типов ресурсов будет отображаться между панелью линейного слоя и панелью статистики;
- Web Vitals: это набор индикаторов, предложенный Google для скорости загрузки и взаимодействия с веб-страницами.Этот набор индикаторов используется для проверки скорости загрузки и взаимодействия с пользователем веб-страниц и не будет здесь подробно описываться;
- Отключить образцы JavaScript: если вам нужно имитировать среду выполнения мобильного телефона, вам нужно проверить это, это означает закрыть образцы JavaScript, чтобы уменьшить накладные расходы на работу на мобильном телефоне;
- Включить расширенные инструкции по отрисовке (медленно): указывает, следует ли включить инструмент ускоренного рендеринга для записи соответствующих сведений о событиях рендеринга.Эта функция потребляет производительность, и скорость повторного создания отчета об обнаружении будет ниже после ее включения.
- Сеть: во время тестирования производительности он используется для переключения моделируемой сетевой среды.Он может моделировать некоторые ситуации с производительностью веб-сайта в условиях слабой сети (2g/3g), а затем выполнять соответствующую оптимизацию в соответствии с конкретной производительностью слабой сети. сеть. ;
- ЦП: ограничивает скорость обработки ЦП, в основном используется для имитации производительности обычной среды выполнения ЦП.
2) Обзорная панель
На панели обзора вы можете выбрать начальную точку времени, а затем перетащить левую кнопку мыши, чтобы переместить панель выбора в локальную область Китая, чтобы наблюдать за производительностью в меньшем диапазоне. Информация об эффективности в этой части в основном включает следующие три показателя:
- FPS: важный показатель для измерения плавности анимации. Когда зеленая гистограмма высокая, это означает, что частота кадров в секунду высокая, а работа более плавная.Если частота кадров в секунду низкая, появится красная горизонтальная полоса, указывающая на низкую частоту кадров, что влияет на пользователя. Нет красного цвета, что указывает на то, что весь опыт работы с веб-страницей по-прежнему очень плавный. Вот специальное примечание, чтобы объяснить, является ли это игрой или веб-страницей, чем выше частота кадров, тем лучше опыт.
- ЦП: Отображает использование ЦП. Этот индикатор имеет прямое соответствие с индикатором Sumarry ниже, и их цвета здесь представляют одно и то же значение, и каждый цвет представляет время, затраченное на каждый процесс. Как видно из рисунка, во всем процессе загрузки на белую часть (ldle) приходится наибольшая доля, которая представляет производительность в режиме ожидания, а вторая по величине доля оранжевого цвета соответствует времени загрузки скрипта, поэтому, если вы хотите быть быстрее, вы можете попробовать оптимизировать для более быстрой загрузки скрипта.
- NET: Показать конкретное время, потраченное на каждый запрос. Здесь не понятно. Вы можете напрямую перейти в панель «Сеть», чтобы посмотреть время, потраченное на каждый запрос, а затем проанализировать конкретный запрос.
3) Панель с резьбой
Панель треда — это флейм-граф во время выполнения основного треда.В процессе парсинга HTML и CSS, отрисовки страниц и выполнения JavaScript на этом графике будет отражаться стек вызовов и времязатратность каждого события. Каждый из столбцов представляет собой событие, и при наведении на него курсора мыши можно просмотреть время выполнения и название события в соответствующее время.
Под панелью вы можете увидеть очень важный индикатор:Main, представляющий основной поток, как показано ниже:
Цифры разных цветов представляют разные типы событий. Горизонтальная ось представляет время, а вертикальная ось представляет конкретный стек вызовов. Стек вызовов похож на браузер среди интерпретаторов, вы можете использовать его для отслеживания потока выполнения функций. Когда браузер вызывает ряд функций, которые можно проследить до функции, выполняемой этим механизмом, конкретные функции в теле, которые, в свою очередь, вызывают функцию.
Общие типы событий:
- парсинг HTML;
- JavaScript-события;
- изменение макета страницы;
- пересчет стиля элемента;
- Рисунок покрытия страницы.
4) Панель статистики
Панель статистики отобразит требующие времени значки визуализации различных типов задач в соответствии с разными часовыми поясами, выбранными на панели концепции.Здесь щелкните прямоугольник на панели потока, как показано на следующем рисунке:
После нажатия вы можете увидеть некоторую конкретную информацию, соответствующую этому событию. Вы также можете щелкнуть ссылку справа от диапазона. После нажатия вы сразу перейдете к месту кода, соответствующему панели источников. Эта функция удобна для поиска код:
Панель статистики содержит четыре вкладки со следующими значениями:
- Резюме: Отображение трудоемкой кольцевой диаграммы различных событий задачи;
- Снизу вверх: просмотр отсортированного списка времени, затрачиваемого на каждое событие.Список содержит два измерения: время, затраченное на само событие после удаления подсобытия, и общее время, затраченное на подсобытие из списка. начало до конца;
- Дерево вызовов: просмотр стека вызовов всех или указанного события на графике пламени;
- Журнал событий: просмотр подробных журналов о каждом событии.
(3) Маяк
Lighthouse — это инструмент автоматического обнаружения с открытым исходным кодом для улучшения качества веб-приложений. Просто предоставьте Lighthouse URL-адрес, который необходимо проверить, он проведет серию тестов для этой страницы, а затем создаст отчет о производительности страницы, который включает в себя: определение производительности, обнаружение доступности, обнаружение SEO, обнаружение соответствия PWA, другие тесты. на соответствие лучшим практикам. В отчете о тестировании не только анализируется статус-кво вышеупомянутых аспектов, но также приводятся некоторые рекомендации по оптимизации, чтобы разработчики могли быстро найти потенциальные узкие места в производительности и внедрить улучшения оптимизации.
Плюсы Маяка:
-
Отчет об оценке является исчерпывающим и авторитетным;
-
предоставить решение;
-
Найдите серьезные проблемы с производительностью.
Маяк недостаток:
- Тестовая среда относительно проста, а группы пользователей имеют разные среды;
- Есть колебания, есть различия в группах посетителей в разное время, и данные могут отражать только влияние текущего момента.
Существует три способа использования Lighthouse: расширение Chrome, панель Chrome Developer Tools, командная строка Node.js.
Здесь мы в основном представляем его использование в панели управления Chrome. В новой версии браузера Chrome LightHouse интегрирован в инструменты разработчика, откройте консоль и переключитесь на панель LightHouse, как показано на рисунке:
1) показатель обнаружения
Нажмите кнопку «Создать отчет» посередине, чтобы начать автоматический анализ, и LightHouse автоматически создаст для нас отчет по оптимизации производительности, как показано ниже:
Вы можете видеть, что в отчете подробно приводятся оценки в различных ситуациях, слева направо: Performance (производительность страницы), Accessibility (доступность), Best Practice (лучшая практика), SEO (поисковая оптимизация), Progressive Web App. Нажмите на каждый из них, чтобы увидеть конкретные предложения по оптимизации.
2) Производительность страницы
Для этого результата теста есть шесть показателей производительности, как показано:
Оценка эффективности в основном включает 6 показателей:
- время отрисовки первого контента (FCP, Первая отрисовка содержимого): используется для записи, когда страница впервые отрисовывает текст, изображения, непустой холст или SVG.
- Максимальное время отрисовки контента (LCP, Крупнейшая отрисовка содержимого): используется для записи времени отрисовки самого большого элемента в окне просмотра. Это время будет меняться при рендеринге страницы, потому что самый большой элемент на странице может измениться в процессе рендеринга. Остановить запись после первого взаимодействие.
- Индекс скорости: относится к тому, насколько быстро веб-страница отображает контент, стандартное время4s.
- блокировка времени взаимодействия (TBT, Общее время блокировки): индикатор взаимодействия с пользователем, который показывает, когда страница фактически переходит в состояние, пригодное для использования. Ведь рендеринг легкого контента происходит недостаточно быстро, и необходимо быстро реагировать на взаимодействие с пользователем.
- Время взаимодействия с пользователем (TTI, Время до интерактивности): этот показатель относится не к самому раннему интерактивному времени, а к времени плавного взаимодействия. Конкретное значение — это время, когда нет длительного выполнения задачи (задачи более 50 мс) через 5 секунд после FMP.
- Совокупное смещение макета (CLS, Совокупное смещение макета): регистрируются неожиданные колебания смещения на странице.
После оценки LightHouse выдаст несколько предложений по оптимизации, как показано на рисунке:
Видно, что в общей сложности дано четыре предложения по оптимизации, а именно: удаление неиспользуемых файлов js, устранение ресурсов, блокирующих рендеринг, удаление неиспользуемых файлов CSS и предварительное подключение к запрашиваемому источнику. Нажмите на каждое предложение, чтобы увидеть подробные инструкции по эксплуатации.
3) Доступность
Эта часть элементов аудита, касающихся доступности веб-сайта, может быть улучшена путем ссылки на оптимизацию веб-сайта, но это не обязательно, как показано на следующем рисунке:
В приведенных выше результатах некоторые проблемы доступности поднимаются, что мы можем изменить в соответствии с этими проблемами, такими как:
- Кнопка не имеет доступного имени, что делает ее непригодной для пользователей, использующих программы чтения с экрана;
- Атрибут alt не используется в изображении.При неудачном запросе ресурса изображения при наличии атрибута alt пользователь может узнать информацию об изображении.
4) Лучшие практики
Рассмотрение этой части контента относится к передовой практике разработки веб-сайтов, разработчикам рекомендуется максимально следовать ей. Элементы обзора передовой практики показаны на рисунке:
На изображении выше вы можете увидеть рекомендации по передовому опыту:
- Междоменные ссылки небезопасны, поэтому во внешних ссылках увеличивается значение rel="noopener" или rel="noreferrer" для повышения производительности и предотвращения нарушений безопасности;
- Изображение с неправильным соотношением сторон, которое говорит нам о том, что размер отображаемого изображения должен соответствовать естественному соотношению сторон;
5) SEO
Для этой части контента, если она соответствует требованиям пунктов аудита, это значительно повысит вероятность поиска сайта поисковыми системами. Предложения по оптимизации показаны на рисунке:
На картинке выше видно две проблемы:
- Если у поисковой системы нет полномочий на сканирование страницы, она не может включить вашу страницу в результаты поиска, и здесь устанавливается антисканирование;
- В теге изображения не установлен атрибут alt, и я надеюсь, что его можно будет добавить, чтобы повысить вероятность индексации изображения.
В соответствии с результатами оценки и предложениями по оптимизации, представленными в каждой части, разработчики могут целенаправленно оптимизировать страницы веб-сайта.
наконец:
Вот и все, обзор оптимизации производительности, следующий — фронтенд-разработка.оптимизация изображения, Следите за обновлениями!
Если вы считаете статью полезной, ставьте лайк, ха-ха!