reportwebvitals react что это такое
Как Next.js может помочь улучшить SEO
Дата публикации: 2020-09-09
От автора: есть несколько способов создания современных приложений, два из наиболее распространенных приложений включают одностраничные приложения и приложения, отображаемые на сервере.
Одностраничные приложения могут быть очень полезны, когда требуется более высокая производительность. Хотя Google внес некоторые изменения в то, как их сканер обрабатывает одностраничные приложения, у нас по-прежнему имеются проблемы с SEO. Отрисованные на стороне сервера приложения могут достигать лучших результатов SEO в поисковых системах и при этом иметь довольно приличную производительность.
Выпуск некоторых замечательных фреймворков JavaScript, таких как Next и Gatsby, привел к созданию большего количества серверных приложений. Давайте рассмотрим несколько причин, по которым одностраничные приложения не лучший выбор для некоторых случаев, особенно для приложений, которые будут сильно зависеть от SEO.
Проблема с одностраничными приложениями (SPA)
Перед тем как создавать одностраничные приложения или приложения, отображаемые на стороне сервера, вам следует учесть контент, который вы хотите показать.
Одностраничное приложение (SPA) — это приложение, которое не обслуживается с новой HTML-страницы каждый раз, когда должен отображаться новый контент, но оно динамически генерируется с помощью JavaScript, управляющего DOM. Поскольку нет необходимости загружать новую HTML-страницу каждый раз, когда что-то нужно изменить, в чем проблема с SEO в SPA?
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Проблема заключается в том, что приложение не может быть правильно проиндексировано поисковыми системами, в отличие от приложений, отображаемых на стороне сервера. SPA обслуживает только исходный HTML-файл, поэтому поисковые системы не могут индексировать контент, потому что в одностраничном приложении у вас есть JavaScript, генерирующий новый HTML каждый раз, когда что-то изменяется. Хотя у SPA есть много других преимуществ, таких как производительность, экономия времени и пропускной способности, лучшая скорость отклика на мобильных устройствах, повышенная производительность при более медленных интернет-соединениях и т. д.
С помощью приложений с рендерингом на стороне сервера, особенно с Next.js, вы можете создать высокопроизводительное приложение и в то же время иметь хорошее SEO.
SEO (поисковая оптимизация)
SEO означает поисковую оптимизацию, которая представляет собой деятельность по оптимизации веб-сайта для получения большего количества органического трафика от поисковых систем. SEO включает в себя множество различных методов и аспектов, на которые мы должны обратить внимание, чтобы сделать наш сайт более привлекательным и доступным для поисковой системы.
Как улучшить SEO с помощью Next.js
Перевод статьи подготовлен в преддверии старта курса «JavaScript Developer. Basic».
Хотите узнать больше о курсе «JavaScript Developer. Basic»? Приглашаем вас на бесплатный вебинар, в рамках которого преподаватель курса даст ответы на все интересующие вопросы.
Есть несколько современных подходов к разработке приложений. Два самых популярных — это одностраничные приложения (SPA) и приложения с серверным рендерингом.
Одностраничные приложения отличаются высокой производительностью.Хотя после некоторых обновлений поисковый робот Google стал обрабатывать их немного иначе, результаты SEO для них все еще не впечатляют. Серверный рендеринг позволяет более эффективно оптимизировать приложения для поисковых систем, при этом их производительность в этом случае тоже будет вполне приличной.
С появлением таких замечательных JavaScript-фреймворков, как Next и Gatsby, стало появляться больше приложений с серверным рендерингом.Давайте разберемся, почему одностраничные приложения — не всегда хорошее решение, особенно в тех случаях, когда вам нужен высокий поисковый рейтинг.
Что не так с одностраничными приложениями?
Прежде чем выбирать между одностраничными приложениями и серверным рендерингом, стоит определиться с контентом.
Одностраничные приложения загружают только одну HTML-страницу. Каждый раз, когда пользователь запрашивает новое HTML-содержимое, его динамически загружает JavaScript, манипулируя DOM-элементами. Но если не нужно каждый раз загружать новую HTML-страницу, почему возникает проблема с поисковой оптимизацией?
Дело в том, что поисковые системы не могут как следует индексировать одностраничные приложения, в отличие от приложений с серверным рендерингом.Одностраничное приложение загружает только начальную HTML-страницу. В результате поисковые системы не могут индексировать контент, который при каждом изменении создается заново с помощью JavaScript.Хотя надо отметить, что одностраничные приложения обладают множеством других преимуществ: помимо высокой производительности, они быстро загружаются даже при низкой скорости соединения и не требуют высокой пропускной способности канала, лучше работают на мобильных устройствах и т. д.
С другой стороны, приложения с серверным рендерингом, особенно созданные с использованием Next.js, могут похвастаться и хорошей производительностью, и эффективностью SEO-оптимизации.
SEO (оптимизация для поисковых систем)
SEO (от англ. search engine optimization) — это оптимизация для поисковых систем, то есть действия по изменению вашего сайта для привлечения большего объема органического поискового трафика. Для того чтобы сделать сайт более привлекательным и доступным для поисковых систем, нужно держать в уме множество разных методов и приемов SEO.
Next.js — это фреймворк для React-приложений, генерируемых статически или с рендерингом на сервере.Он открывает много возможностей для разработчиков: создание не требующих настройки приложений, готовых к использованию, разделение кода, экспорт статической HTML-страницы и т. д.
Next.js обеспечит высокие результаты поисковой оптимизации, и для этого вам не придется делать ничего особенного — достаточно просто создать приложение.Впрочем, высокие результаты SEO обеспечивает не конкретно Next.js, а серверный рендеринг.
Давайте рассмотрим на примере, как работает Next.js.
Next.js позволяет вам создать приложение одной командой с использованием структуры Create Next App:
Для того чтобы сгенерировать новый маршрут внутри приложения, нужно просто создать новый файл в папке pages и новый компонент React для него:
Примечание. Работая над приложением, вы можете посмотреть отчеты о его SEO-рейтинге даже на ранних этапах, например, с помощью сервиса Lighthouse.
Создать новое приложение с Next.js предельно просто. Давайте посмотрим, как Next.js поможет повысить поисковый рейтинг и привлечь на сайт больше органического трафика.
Как улучшить SEO с помощью Next.js
Благодаря Next.js можно существенно улучшить результаты SEO, но нельзя забывать и о других аспектах приложения. Если хотите получить хорошие результаты SEO, обратите внимание вот на что:
Метатеги предоставляют данные о вашей странице поисковым системам и посетителям сайта. Они влияют на то, как страница отображается на страницах с результатами поиска и сможет ли она привлечь посетителя на ваш сайт. Метатеги не видны пользователям, но для приложения, которое вы хотите вывести в топ поисковиков, это важнейшая часть кода.
Метатег сообщает поисковой системе данные о типе контента, размещенного на странице, о теме этой страницы и о том, как поисковая система должна отображать ее.
В Next.js встроен компонент, который добавляет метатеги в контейнер head> вашей страницы:
Для того чтобы вставить метатег на страницу, используйте встроенный компонент Head :
export default Example
Встроенный компонент Head позволяет избежать дублирования метатегов на сайте — если добавить свойство key, метатег будет отображаться только один раз:
Вы можете поднять поисковый рейтинг приложения, просто добавив на страницу несколько метатегов. Здесь вы можете почитать о важных для SEO метатегах.
Проверьте свой код прямо сейчас: есть ли в нем метатеги и те ли это метатеги, которые нужны? Поверьте, правильные метатеги — это то, что вам нужно для повышения качества индексации и привлечения органического трафика.
Пользователи привыкли, что страницы загружаются быстро, и не готовы ждать целую вечность. Разрабатывая приложение, прежде всего подумайте о его производительности. Это также и один из ключевых факторов ранжирования для поисковых систем.
Поисковые системы, особенно Google, используют время отображения первого контента (First Contentful Paint, или FCP) как ключевую метрику производительности.FCP измеряет время с начала загрузки страницы до момента отображения первого элемента контента на экране. При низком показателе FCP низким будет и SEO-рейтинг.
С помощью Next.js можно проанализировать метрики FCP и LCP (время отрисовки большей части контента, Largest Contentful Paint).Для этого нужно создать пользовательский компонент App и объявить функцию reportWebVitals :
Функция reportWebVitals будет вызвана, когда будут рассчитаны окончательные значения показателей для страницы.
Более подробно об измерении производительности в Next.js можно почитать здесь. Здесь рассказывается, над чем вам нужно поработать, чтобы улучшить FCP.
SSL-сертификат
В августе 2014 г. Google объявил, что будет учитывать HTTPS при ранжировании. Протокол безопасной передачи данных HTTPS обеспечивает дополнительный уровень защиты для пользователей, которые передают свои данные на ваш сайт.
Для того чтобы подключить HTTPS, нужно получить SSL-сертификат.Хороший SSL-сертификат может обойтись в кругленькую сумму. Как получить SSL-сертификат бесплатно с Next.js?
Для этого приложение нужно развернуть на облачной платформе, например Vercel.Vercel — это компания, которая создала Next.js, поэтому интеграция пройдет без проблем. Для того чтобы развернуть приложение Next.js на платформе Vercel, нужно установить интерфейс командной строки Vercel:
Затем перейдите в проект и выполните команду:
Проект будет опубликован на Vercel и защищен SSL-сертификатом.
Контент имеет значение
Очень важно правильно преподнести контент, который видят посетители вашего сайта. Создание качественного продукта — вот главная задача каждого разработчика.
Какое приложение разрабатывать — одностраничное или с рендерингом на стороне сервера — зависит от того, какой контент вы хотите показать и какую реакцию хотите получить от клиентов.
Фреймворк Next.js создан для разработки React-приложений с серверным рендерингом, и благодаря этому мы получаем отличные показатели SEO, UX, производительности и т. д. С его помощью компании и разработчики могут повысить качество своих сайтов и проектов и привлечь больше органического поискового трафика.
Ну что ж, пора перейти на Next.js и оценить весь потенциал приложений с серверным рендерингом. Они будут полезны для вас и вашей компании, да и вообще — они просто потрясающие! Уверяю вас, вы будете удивлены.
Заключение
В этой статье мы лучше познакомились с фреймворком Next.js и узнали, как с его помощью можно оптимизировать современные приложения для поисковых систем. Мы также разобрались в общих понятиях SEO и рассмотрели метатеги, производительность, SSL-сертификаты и т. д., то есть те аспекты, на которые надо обратить внимание при разработке приложения.
LogRocket: полная видимость веб-приложений
Помимо добавления действий и состояний Redux, LogRocket записывает логи консоли, ошибки JavaScript, трассировку стека, сетевые запросы и ответы с заголовками и телами, метаданные браузеров и пользовательские журналы. Он использует DOM для записи HTML и CSS на странице, обеспечивая видеоповторам попиксельное соответствие даже для самых сложных одностраничных приложений.
Core Web Vitals: как Google решил оценивать сайты
Сегодня поговорим о важности пользовательского взаимодействия, ведь совсем скоро придется подготовить свои сайты к максимальному ускорению загрузки. Возможно, вы уже слышали про Core Web Vitals…
В прошлом году Google начал масштабный пересмотр факторов ранжирования в поисковике, чтобы улучшить качество поисковой выдачи. И в ноябре команда Google анонсировала Core Web Vitals — новые факторы оценки качества ресурсов, которые смогут влиять на индексацию и вступят в силу в мае 2021 года. Давайте разбираться.
Существуют сотни факторов ранжирования, однако Core Web Vitals будет анализировать ещё больше информации и иметь непосредственное влияние на дальнейшую индексацию. Нужно отметить, что скорость загрузки напрямую не влияет на индексацию, однако имеет значительное влияние на поведение пользователя, которое является важным сигналом для поисковых алгоритмов Google.
Чем Core Web Vitals отличается от прочих факторов ранжирования?
Положительная сторона Core Web Vitals — в прозрачности: это понятные, публично доступные критерии, которые можно отслеживать и улучшать с помощью специального набора инструментов. Кроме того, с момента анонсирования и до официального запуска есть много времени, чтобы уже начать работать над Core Web Vitals.
Андрей Липатцев, Web Partnerships Google
Core Web Vitals
Среди многих показателей ранжирования (оптимизации для мобильных устройств, безопасный просмотр, безопасность HTTPS и т.д.) Google выделил основные (core), жизненно важные для пользователя. Метрики, составляющие Core Web Vitals, со временем будут развиваться и дополняться.
Текущий набор показателей фокусируется на трех аспектах взаимодействия с пользователем: 
LCP (загрузка)
Для разработчиков всегда было непросто измерить, насколько быстро контент веб-страницы загружается и становится видимым для пользователей.
Старые метрики, такие как load или DOMContentLoaded, не подходят, так как они всегда соответствуют тому, что пользователь видит на экране. А более новые показатели производительности, такие как First Contentful Paint (FCP), отражают только самое начало процесса загрузки.
В ходе исследований обнаружилось, что более точный способ измерить загрузку основного содержимого страницы, – это посмотреть, когда был отрисован самый большой элемент.
Так появилась метрика Largest Contentful Paint (LCP), которая измеряет время рендеринга самого большого элемента на странице.
Что считается большим элементом?
Как это работает?
Веб-страница загружается поэтапно, и в результате самый большой элемент на ней может измениться.
Чтобы справиться с таким изменением, браузер отрисовывает первый кадр и отправляет PerformanceEntry с параметром large-contentful-paint, который идентифицирует самый большой элемент. Но затем, после рендеринга последующих кадров, браузер будет отправлять PerformanceEntry при каждом изменении самого большого элемента.
Важно отметить, что элемент может считаться самым большим содержимым только после того, как он будет отрисован и виден для пользователя.
Браузер перестает сообщать о новых записях, как только пользователь начнет взаимодействовать со страницей, поскольку взаимодействие может визуально изменить страницу (прокрутка, модальное окно и т.д.).
Рис.1. Изменение самого большого элемента по мере загрузки содержимого
Как определяется размер самого большого элемента?
Размер элемента определяется в области видимости пользователя: если элемент выходит за её пределы (обрезан или имеет overflow: hidden), то эти части не учитываются.
Если у изображения видимый и исходный размеры отличаются, то будет учитываться меньший из них. Например, если изображение сжали до меньшего размера, чем его исходный, то передается видимый размер, а если растянули — исходный.
Для текстовых элементов учитывается только размер их текстовых узлов.
Для всех элементов любые margin, padding или border не рассматриваются.
FID (интерактивность)
Метрика First Input Delay (FID) помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта.
FID измеряет время с момента, когда пользователь впервые взаимодействует со страницей, до того, как браузер действительно может начать обработку событий в ответ на это взаимодействие.
Задержка ввода возникает из-за того, что основной поток браузера занят чем-то другим (синтаксическим анализом или выполнением большого бандла), поэтому он (пока) не может ответить пользователю.
FID можно измерить только в реальных условиях.
Почему рассматривается именно первый ввод?
CLS (визуальная стабильность)
Cumulative Layout Shift — важный, ориентированный на пользователя показатель для измерения стабильности верстки и элементов, не препятствующих взаимодействию с контентом.
Например, вы переходите на сайт, почитать статью. Пока сайт прогружался, на странице появилось ещё несколько элементов и положение скролла неожиданно изменилось. Неприятно.
Рис.2. Пример Cumulative Layout Shift
Первая ассоциация при виде этого примера — реклама. Думаю, что каждый хотя бы раз сталкивался с таким неожиданным появлением элемента.
Это может происходить из-за асинхронной загрузки ресурсов или динамического добавления DOM-элементов на странице. Причиной может быть изображение или видео с неизвестными размерами, сторонняя реклама или виджет, которые динамически изменяют размер.
CLS измеряет общую сумму всех показателей визуальной стабильности верстки в течение сессии страницы.
Показатель визуальной стабильности определяет Layout Instability API, который отправляет layout-shift каждый раз, когда существующий элемент меняет свое начальное положение между двумя кадрами.
Обратите внимание, что визуальная стабильность не учитывается, когда новый элемент добавляется в DOM или существующий элемент меняет размер.
Чтобы вычислить коэффициент визуальной стабильности, браузер смотрит на размер области просмотра и перемещение нестабильных элементов между двумя визуальными кадрами. Коэффициент вычисляется двумя показателями: коэффициентом воздействия и расстояния.
Рис.3. Коэффициент воздействия
На изображении выше есть элемент, который занимает половину области просмотра в одном кадре. Затем в следующем кадре элемент смещается вниз на 25% от высоты экрана. Красный пунктирный прямоугольник указывает на объединение видимой области элемента в обоих кадрах, которая в данном случае составляет 75% от экрана.
Рис.4. Доля расстояния
Доля расстояния — это наибольшее расстояние, на которое любой нестабильный элемент переместился в кадре (по горизонтали или вертикали), деленное на размер экрана.
В приведенном примере наибольшим размером экрана является высота, а нестабильный элемент перемещается на 25%.
Коэффициент визуальной стабильности = 0.75 * 0.25 = 0.1875
Как улучшить показатели Core Web Vitals?
Если ваше приложение не дотягивает до идеальных показателей, то нужно заняться вопросом повышения скорости. Итак, что можно сделать:
Библиотеки и инструменты
Самый простой способ измерить все Core Web Vitals — использовать js-библиотеку web-vitals, которая измеряет каждую метрику в соответствии с Инструментами Google.
Или можно использовать расширение Web Vitals для Chrome.
Не забывайте периодически следить за скоростью загрузки своего приложения. Быстрая реакция на любые негативные изменения позволит минимизировать потери и вовремя внести необходимые коррективы. Core Web Vitals влияет не только на индексацию, но и главным образом на конверсию, посещаемость и в результате на прибыль. К счастью, Google предупредил заранее о запуске новых факторов ранжирования, поэтому у вас есть еще время исправить все погрешности к запуску Core Web Vitals (май 2021).
Полезные ссылки и используемые материалы:
Структура React REST API приложения + TypeScript + Styled-Components
Доброго %время_суток, хабровчане!
Какие-либо статьи я еще не писал, опыта в этом нет от слова совсем. Поэтому, пожалуйста, не судите строго и прошу заранее прощения, если где-то совершу ошибки.
Это для меня совершенно новый опыт, мне никогда еще не доводилось делиться своим опытом и наработками с сообществом.
Предисловие
Когда я только начал знакомиться с React, мне приходилось искать, и искать довольно-таки долго, информацию, которая помогла бы мне грамотно организовать структуру моих будущих проектов, но дельной информации было мало.
Кто-то советовал делать плоскую структуру, в том числе и для папки, в которой находятся компоненты, кто-то же советовал просто разделять компоненты на «Молекулы», «Организмы» и т.д., но при этом, почти все, мало внимания уделяли сервисам, хукам, а именно тому, что содержало логику, не говорили о том, где лучше и как лучше их хранить.
Буду очень рад, если вы оставите предложения по улучшению данной структуры, как и вашей конструктивной критике.
Components
Начну, пожалуй, с компонентов.
Компоненты, в данной структуре, разделяются на:
UI (UI, как ни странно)
Первые четыре группы (Smart, Ordinary, Simple и UI) хранятся в папке Components.
Поговорим немного о них:
Данные компоненты не могут использовать свое локальное хранилище и обращаться к глобальному.
Не могут использовать локальное хранилище и обращаться к глобальному.
Не могут использовать хуки, кроме тех, что изначально поставляются с React (за исключением useState).
Могут использовать в своей реализации UI компоненты.
Не могу использовать локальное хранилище, как и обращаться к глобальному.
Не могут использовать хуки, кроме тех, что изначально поставляются с React (за исключением useState).
Могут использовать в своей реализации Simple и UI компоненты.
Могут использовать локальное хранилище, как и обращаться к глобальному (не изменяя его)
Могут использовать все доступные хуки, кроме тех, что взаимодействуют с сетью
Могут использовать в своей реализации Ordinary, Simple и UI компоненты.
Структура папки Componets:
Оставшиеся две группы (Containers и Pages) имеют отдельные папки в корне приложения (папка src).
Структура корневой папки:
Сами компоненты должны иметь отдельные папки, есть 2 (это число не является константой) файла:
Пример компонента Align. Хотелось бы сказать, что этот компонент попадает под группу «Simple», так как он является глупым (не имеет нужды в локальном хранилище) и не заменяет никакой нативный, браузерный, UI компонент.
Теперь, поговорим о самом сладком.
Данная папка является «ядром» вашего приложения. В ней хранится все, для взаимодействия с сервером, глобальное хранилище, тема вашего приложения и т.д.
Эта папка содержит:
Примеры содержимого папок
Довольно-таки удобно хранить все роуты в одном файле. Если вдруг со стороны бэкенда изменятся роуты, то их легко можно будет изменить в одном файле, не проходясь, при этом, по всему проекту.
Ух ты! Как же много получилось.
И напоследок.
Есть еще несколько, немаловажных папок, которые также следует упомянуть:
Остается еще 2 файла:
Примерно так он может выглядеть:
Он же может выглядеть примерно так:
И на этом, я думаю, стоит закончить.
Итоговая структура выглядит вот так:
Заключение
Если вам понравилась эта статья и вы узнали что-то интересное для себя, то я очень этому рад.
Ссылка на репозиторий (прошу прощения за такой скудный ридми, мне еще не по силам разговорный английский).