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

Итак, в сегодняшней статье мы проведем проверку PageSpeed ​​и устраним все обнаруженные проблемы.


Начальная скорость страницы

Вы можете использовать этот фантастический веб-сайт на базе Google для создания базового отчета для своего веб-сайта.

Посетите веб-сайт PageSpeed ​​Insights

Заполните URL-адрес своего веб-сайта и нажмите кнопку «Анализ».

Для моего портфолио я получил следующие результаты на мобильных устройствах.

Скриншот 14.10.2022 в 08.04.30.png

Я буду честен с вами. Мы сделали хорошо из коробки.
Мы набираем 100 баллов для ПК и 89 баллов для мобильных устройств.

Оба имеют одинаковые замечания. Наши изображения можно оптимизировать!

Итак, давайте решим эту проблему и посмотрим, какой эффект она имеет.


Оптимизация изображений с помощью Next/Image

Вы могли заметить, что я использовал стандартный HTML-код проекта. <img /> теги.

Есть альтернатива, которую мы можем (и должны) использовать в Next.js, это их оболочка, называемая <Image />.
Этот компонент гарантирует, что все необходимые реквизиты установлены, и сделает для нас волшебное кэширование и изменение размера.

Давайте откроем проект и откроем introHeader.js файл и начните с импорта next/image пакет такой:

import Image from 'next/image';
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем измените изображение, чтобы использовать новый тег.

<Image
  src='/profile.png'
  width='240'
  height='240'
  alt='Image of Chris'
  className='z-10 relative rounded-full'
/>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Да, вот так просто, и наше изображение теперь будет максимально оптимальным.

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

Итак, снова откройте work.js компонент и загрузите следующую библиотеку изображений.

import Image from 'next/image';
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это немного отличается от того, что было до того, как у нас было изображение в корне.
Изображение также является адаптивным, что немного усложняет работу с Next/image. Поэтому я добавил обертку div с таким стилем.

<div className='w-full md:w-1/3 mb-3 md:mr-6'>
  <Image
    src={item.image}
    className='rounded-lg'
    layout='responsive'
    width={500}
    height={335}
  />
</div>
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

Однако, если мы теперь запустим наше приложение, мы быстро увидим ошибку Next.js, которую placedog.net домен не является допустимым источником изображений.

Это связано с тем, что это строгая настройка, и мы должны настроить наш веб-сайт так, чтобы этот домен явно разрешался.
Откройте next.config.js файл и добавьте поддержку изображений, как это.

const nextConfig = {
  images: {
    domains: ['placedog.net'],
  },
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

И теперь наши изображения будут загружаться отлично!


Тестирование

Давайте развернем наши изменения и повторно запустим тест PageSpeed.

Окончательный результат PageSpeed

Ух ты! Мы также получили 100 баллов на мобильных устройствах, и все рекомендации исчезли.

Молодцы с нами. Наши пользователи также будут рады получить более быстрый и оптимизированный веб-сайт.

Если вы хотите проверить изменения, просмотрите это Филиал GitHub.


Спасибо за чтение, и давайте общаться!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Фейсбук или же Твиттер