- PageSpeed Insights
Текст, переведенный ИИ.
Резюме публикации от ИИ durumis
- Использование инструментов для измерения производительности веб-сайтов (PageSpeed Insights, Lighthouse) для улучшения производительности веб-сайта помогает повысить видимость в поисковых системах, а показатели Web Core Vitals играют важную роль.
- Для улучшения таких показателей, как CLS, LCP, FCP и FID, можно применять UI-скелеты, оптимизировать изображения, удалять блокирующие рендеринг элементы, оптимизировать веб-шрифты, обрабатывать JavaScript асинхронно и т.д.
- Вместе с методами улучшения каждого показателя мы представим различные технологии для повышения производительности веб-сайтов (сжатие gzip, веб-воркеры и т.д.) и планируем более подробно рассмотреть связанные темы в будущем.
С помощью сайта, предоставляемого Google
можно легко измерить производительность веб-сайта.
https://pagespeed.web.dev/
можно ввести URL для измерения или установить Lighthouse в качестве расширения Chrome для измерения.
Что хорошего в улучшении показателей?
Вы можете получить более высокое ранжирование в поисковых системах. SEO часто использует рендеринг на стороне сервера, но
если вышеупомянутые показатели производительности низки, этот эффект резко снизится.
Как улучшить?
На сайте web.dev подробно описано, как улучшить каждый показатель.
В частности, 3 показателя значительно влияют на общую оценку. (Web Core Vitals)
Я хочу записать свои попытки улучшить показатели.
Как измерить локально?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
Вставьте этот код. В случае 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.
Из-за ограничения количества символов я закончу здесь.