Автоматическая оптимизация изображения

Vercel недавно анонсировал последнюю версию своего веб-фреймворка на основе React - Next.js 10.

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

Автоматическая оптимизация изображения

Оптимизация изображения необходима для обеспечения первоклассного качества работы конечных пользователей, взаимодействующих с веб-сайтом. Он предоставляет множество преимуществ
, некоторые из которых описаны ниже:

  • Повышает скорость загрузки страниц
  • Лучшее поисковое ранжирование страниц сайта
  • Позволяет повысить конверсию и взаимодействие
  • Снижает нагрузку на сервер

Как правило, разработчику сложно выполнить задачи, позволяющие оптимизировать изображение, потому что в этом процессе необходимо учитывать множество факторов, таких как размер, вес и формат.

Кроме того, сложные строительные инструменты, используемые для оптимизации изображений, часто не распознают отправленные пользователем изображения, поступающие из внешнего источника данных. В результате возможность оптимизации «всех изображений» сводится к нулю.

Однако автоматическая оптимизация изображений в Next.js 10 может снизить нагрузку на разработчиков, помочь им легко добиться бесшовной оптимизации изображений и облегчить их работу в конце дня. Последняя версия Next.js 10 позволяет оптимизировать магов и обслуживать их в графических форматах следующего поколения, таких как WebP, если браузер поддерживает это.

Это предотвращает отправку больших изображений на устройства с меньшим окном просмотра. Автоматическая оптимизация изображения также может оптимизировать любой источник изображения, даже если изображение размещено во внешнем источнике данных. Результатом является автоматическое решение для оптимизации изображений, которое упрощает рабочую нагрузку разработчика.

Что наиболее важно, Next.js 10 отображает изображения таким образом, чтобы не затрагивать основные веб-ресурсы и увеличивать удобство работы пользователя.

Разработчики могут заменить HTML-теги компонентом изображения на основе React, чтобы улучшить отзывчивость страницы.

Чтобы добавить изображения в приложение, разработчики могут импортировать компонент «next / image», как показано ниже:

Компонент «next / image» по умолчанию обеспечивает указанную выше производительность.
С помощью этого компонента изображения автоматически становятся адаптивными и также загружаются с отложенной загрузкой.

Вы можете использовать различные свойства, доступные для компонента 'next / image', такие как 'src', 'width', 'height' и т. Д., Но помимо этого вы также можете настроить оптимизацию изображения для выполнения более продвинутого использования. случаев с помощью 'next.config.js'. Если конфигурация не была предоставлена, то должна использоваться конфигурация по умолчанию, которая выглядит следующим образом:

Таким образом, если конкретное свойство было упущено из приведенной выше конфигурации, например «размер изображений», то для такого свойства будет выбрано значение по умолчанию из приведенного выше. Это означает, что разработчику нужно будет настроить только те свойства, которые он хочет изменить.

Пользовательская аналитика нового уровня в Next.js 10

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

Кроме того, когда дело доходит до пользовательской аналитики, каждый веб-сайт должен ставить цели по улучшению основных показателей сети, потому что это может помочь не только в улучшении взаимодействия с пользователем и скорости, но и в повышении рейтинга поиска. У основных веб-показателей есть три показателя, которые дают реальную и полезную информацию:

  • LCP (Самая большая содержательная краска)
  • FID (задержка первого входа)
  • CLS (совокупное изменение макета)

Анализ данных важен только в том случае, если он основан на реальных данных, таких как основные веб-данные. В противном случае данные не будут иметь большого значения в процессе принятия решений. В Next.js 10 создание аналитического отчета из реальной жизни - простая задача. Можно создать настраиваемый компонент приложения и определить функцию reportWebVitals для измерения основных жизненно важных показателей сети и даже настраиваемых показателей.

Функцию reportWebVitals можно определить следующим образом:

Следует также отметить, что функция пользовательской аналитики в Next.js 10
позволяет непрерывное измерение данных вместо разового измерения, чтобы маркетологи могли получить доступ к обновленным данным. Не только это, но и пользовательская аналитика из Next.js 10 записывает измерения данных с реальных устройств, которые используются посетителями веб-сайта, вместо того, чтобы полагаться на устройство разработки.

Присоединяйтесь к Hacker Noon

Next.js 10 предлагает пользовательскую аналитику следующего уровня, чтобы помочь разработчикам:

  • Сосредоточьтесь на всей картине
  • Получите глубокое понимание базы целевой аудитории
  • Оцените, насколько веб-сайт работает для целевых пользователей.

Как ImageEngine может выступить катализатором дальнейшего развития Next.js 10?

Нет сомнений в том, что встроенные характеристики Next.js 10 приносят много пользы, но некоторые умные решения, такие как Client Hints, могут еще больше улучшить структуру для лучшего использования. С этой целью ImageEngine помогает брендам с надежной реализацией Client Hints не только для Next.js 10, но и для многих других технологий с единственной целью увеличения столь необходимой веб-производительности. Итак, что такое подсказки для клиентов и зачем они нужны бизнесу?

Подсказки клиента - это группа дополнительных заголовков HTTP-запросов, которые могут предоставить ценную информацию о таких аспектах, как возможности устройств пользователей и сеть, через которую такие пользователи подключены. Это понимание ценно, потому что знание «возможностей устройств пользователей» и «насколько стабильно их сетевое подключение» может помочь изменить способ доставки контента, чтобы можно было разработать более инклюзивную экосистему взаимодействия с пользователем.

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

Эти функции помогут не только повысить производительность в Интернете, но и получить другие преимущества, такие как улучшенный рейтинг в поисковых системах, лучшая конверсия, большая надежность, улучшенный охват и т. Д. Оптимальный цифровой рост компании и экономически эффективная масштабируемость - это окончательное решение. цель ImageEngine.

Создайте бесплатную учетную запись, чтобы разблокировать свой индивидуальный опыт чтения.

Первоначально опубликовано на https://hackernoon.com 22 ноября 2020 г.