Измерение производительности веб-сайта - PerformanceObserver

С помощью сайта, предоставляемого Google

можно легко измерить производительность веб-сайта.

https://pagespeed.web.dev/
можно ввести URL для измерения или установить Lighthouse в качестве расширения Chrome для измерения.

Что хорошего в улучшении показателей?

Вы можете получить более высокое ранжирование в поисковых системах. SEO часто использует рендеринг на стороне сервера, но

если вышеупомянутые показатели производительности низки, этот эффект резко снизится.

Как улучшить?

На сайте web.dev подробно описано, как улучшить каждый показатель.

В частности, 3 показателя значительно влияют на общую оценку. (Web Core Vitals)

Я хочу записать свои попытки улучшить показатели.

Как измерить локально?

Вставьте этот код. В случае Nuxt поместите его в плагины и проверьте вывод в консоли.

Cumulative Layout Shift (CLS)

Это измерение степени изменения макета во время рендеринга.

Например, предположим, что у нас есть страница, которая рендерит изображения размером 400x400, получая URL-адрес изображения из ответа API.

Позиция определенного макета сместится на 400 пикселей из-за рендеринга изображения.

Это неожиданное для пользователя перемещение, которое негативно влияет на UX, а также косвенно влияет на браузер при рендеринге экрана.

Отрицательно влияет на браузер при рендеринге экрана.

Есть два простых способа улучшить это.

1. Применить скелетный UI

- Большинство сайтов рисуют соответствующий скелет в соответствии с размером изображения или компонента. Учитывайте это при разработке экрана. В Vue вы можете использовать v-if и v-else для рисования скелета для каждого элемента.

2. Зарезервировать высоту

- Если в скелете слишком много стилей, это может усложнить обслуживание и привести к обратному эффекту. Простое резервирование min-height рендеримого элемента может дать положительный эффект.

- В случае адаптивного веб-сайта, где размер изображения меняется в зависимости от устройства, сложно зафиксировать высоту. В этом случае можно использовать высоту самого маленького устройства или vh/vw.

3. Указать ширину и высоту для тега изображения

- Ширину и высоту для тега изображения можно указать следующим образом.

<img src="image.jpg" width="400" height="400">

Даже если фактический размер изображения не 400x400, браузеру сообщается о предполагаемом размере изображения.

4. Использовать font-display: swap для предотвращения изменений макета из-за веб-шрифтов

- Предоставление запасного шрифта предотвращает смещение макета.

Largest Contentful Paint(LCP)

Время рендеринга самого большого элемента на экране. Обычно это изображение, поэтому интуитивно понятно, что нужно ускорить скорость загрузки.

1. Уменьшите размер изображения.

- Проверьте, не слишком ли велик размер изображения по сравнению с размером рендеринга.

- Оптимизируйте рендеринг изображений с помощью таких расширений, как webp. При использовании сжатия с потерями размер файла webp примерно на 30% меньше, чем у JPEG, а при использовании без потерь — примерно на 20% меньше, чем у png.

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

2. Используйте кэширование или CDN.

3. Удалите блокирующие рендеринг элементы.

- Поскольку большинство показателей измерений на это влияют, обязательно удалите их. Браузер сначала извлекает скрипты из тега head, а затем выполняет рендеринг, поэтому проверьте, необходимо ли, чтобы скрипты в теге head (обычно внешние скрипты) рендерились первыми. С помощью атрибутов async и defer вы можете легко управлять этим.

* Позже я напишу другую статью об атрибутах скриптов в head.

4. Сведите к минимуму размер бандла.

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

Если вы используете прокси-сервер, например nginx, вы можете использовать сжатие gzip.

* Позже я напишу другую статью о настройке nginx.

First Contentful Paint(FCP)

Означает момент рендеринга первого контента на странице.

1. Аналогично удалите блокирующие рендеринг элементы.

2. Сведите к минимуму размер HTML.

- Излишнее использование тегов div может привести к созданию сильно вложенного дерева и увеличению размера файла.

3. Внешние веб-шрифты могут быть проблемой. Используйте font-display: swap; для предварительной отрисовки базового шрифта.

First Input Delay(FID)

Означает время, которое требуется браузеру для обработки первого ввода пользователя на странице (щелчок, прокрутка и т. д.). Иногда может возникнуть ситуация, когда при нажатии кнопки ничего не происходит, но на самом деле это не зависание, а ожидание ответа API.

1. Используйте асинхронность для предотвращения блокировки главного потока JavaScript ресурсоемкими задачами.

2. Вы можете использовать web worker для выполнения других задач отдельно от главного потока.

* Позже я напишу еще одну статью о web worker.

Из-за ограничения количества символов я закончу здесь.