reportwebvitals react что это такое
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).
Полезные ссылки и используемые материалы:
Как 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 включает в себя множество различных методов и аспектов, на которые мы должны обратить внимание, чтобы сделать наш сайт более привлекательным и доступным для поисковой системы.
Reportwebvitals react что это такое
Report Web Vitals to your API with one POST request per session.
The web-vitals library is excellent at accurately measuring Web Vitals. But it has no opinion on how to report metrics from a browser to your analytics. It may result in multiple API calls, session tracking, and lost metrics. The web-vitals-reporter makes Web Vitals collecting as simple as sending one POST request.
Features:
① Report Core Web Vitals and device information to an API endpoint:
② Measure performance with Next.js:
③ Load and report Web Vitals using a «>
Create a report function that accepts Web Vitals’ Metric object. At the end of the session, it sends collected data to the url using a POST request.
It accepts any < name: string, value: number >object, making it a useful tool for reporting any metric to the API using the one-request-per-session pattern.
To see output in the console, set Preserve log option and refresh the page.
By default web-vitals-reporter only rounds metric.value for known Web Vitals (code).
Use mapMetric to implement a custom metric mapping. For example:
Use beforeSend to modify the final result before it’s sent to the server. Note: The method should be synchronous because it’s fired at the end of the session when the tab is closed.
Example, compute metric score to pass Core Web Vitals thresholds:
A helper that returns device information (connection type, memory size, or the number of CPU cores). Use these data to add dimensions to your analytics.
About
Report Web Vitals to your API with one POST request per session.
Основы Redux для начинающих
Что такое Redux?
Redux — это инструмент для управления состоянием приложения. Построен на принципах технологии Flux и функционального программирования. Создан компанией FaceBook, но вопреки распространенному мнению может использоваться не только в связке с React, но также и с другими фреймворками/библиотеками.
Flux — это тип архитектуры и набор паттернов проектирования веб-приложений. Подробнее на Wiki
Redux использует методологию flux. Она состоит из 4 понятий:
В React по умолчанию нет какого-то глобального state (состояния), которое было бы доступно во всем приложении. Вы можете только сохранять данные в рамках одного компонента. К примеру, у вас есть интернет магазин и в нем есть корзина с товарами. Если работать только со стейтом компонента Корзина, то вам эти данные будут недоступны в других компонентах. Также например, у вас есть иконка корзины в углу экрана, которая должна показывать количество товара, которые пользователь добавил туда. Так вот средствами чисто React, это будет сложно реализовать.
Вот именно поэтому есть такие библиотеки как Redux, для хранения всех данных приложения в одном месте и удобного их обновления.
Основные понятия Redux
Как я уже писал выше, основные понятия редакса — actions, dispatcher, store.
Store — это состояние веб-компонента, которое хранит в себе всю информацию (или ту которую вы решили сохранить в него). В дальнейшем стор будет доступен из любого компонента вашего приложения.
Action — действие, описывает что нужно сделать. Согласно принципам функционального программирования, мы не можем изменять объект напрямую, поэтому нам нужны экшены, чтобы передать их в диспатчер и «сказать», что нужно сделать.
Dispatcher — сообщает хранилищу о каком-то действии (action) и передает ему обновленную информацию.
Теперь когда мы разобрали основные понятия, давайте посмотрим как работает Redux:
Схема работы Redux
Компонент генерирует действие (action), диспатчер сообщает об этом хранилищу (store), хранилище изменяет состояние и данные передаются в компонент (View).
Есть еще одно понятие в Redux это reducer (редюсер). Редюсер — это чистая функция, которая принимает как аргумент хранилище и экшен. Основные правила редюсеров:
Более подробно про чистые функции можно прочитать тут.
Простой пример использования Redux
Теперь на простом практическом примере разберем как работать с Redux.
Мы сделаем простое приложение ToDo, которое даст возможность создавать свои таски с сохранением их в store. Это будет простое приложение для примера, основной упор сделан на работу с Redux.
Итак, есть 2 варианта, вы можете скачать стартовый проект и просто запустить установку, или пошагово пройти и создать проект со старта.
Установка и настройка проекта
Чтобы создать приложение заново, открываем командную строку или Git Bash
Далее заходим в папку проекта и устанавливаем Redux и пакет для Реакта — react-redux
Если вы скачали архив с уже готовым приложением, тогда его нужно распаковать, войти в папку с приложением и в командной строке/терминале запустить команду:
Теперь, чтобы запустить наш проект нужно воспользоваться следующей командой:
Проект будет собран и запущен, автоматически откроется вкладка в браузере
Результат выполнения команды npm run start
Для того, чтобы не верстать всё заново, мы используем Bootsrap. Давайте его установим.
Также подключим стили в файле src/index.js
Создание базовой структуры для хранилища
Теперь давайте сделаем базовую структуру для Redux. Создадим папку src/store, а в ней 4 файла
Сначала определим какие типы экшенов нам нужны в файле actionTypes.js. Можно типы и не определять, но в дальнейшем это даст нам возможность сократить время на дебагинг, если вдруг понадобится изменить имя экшена, они все находятся в одном месте, что тоже удобно. Если нам понадобится экшен в другом месте, нам достаточно будет импортировать его в другом модуле.
В нашем приложении, например, нам нужен будет экшен в 2 файлах: actions и reducer. Создадим файл actionTypes.js и в нем определим наши типы:
В файле store/actions.js мы опишем все экшены, которые нам потребуются для приложения:
Выше вы видите типичную структуру экшена: это функция, которая возвращает объект с двумя свойствами:
Теперь давайте рассмотрим функцию редюсер (store/reducer.js):
Тут мы импортируем наши типы экшенов, затем определяем переменную для того, чтобы задавать ID каждому новому таску.
Сам reducer принимает в качестве аргументов state (или равняется пустому массиву) и экшен. Далее мы проверяем тип екшена и в зависимости от этого производим определенные манипуляции со стейтом.
Давайте размеберем на примере экшена TASK_ADD. При добавлении нового таска, нам необходимо сделать копию текущего стейта и добавить к нему новый таск
Далее на основании этого редюсера нам нужно создать store с помощью функции createStore. Создадим файл store.js с таким содержимым:
* У меня также вторым параметром добавлена след. строка
Это для работы плагина для Chrome — Redux DevTools. Удобный плагин для дебагинга.
Теперь после создания store, мы можем использовать его в любом модуле нашего приложения.
Основные методы для работы со store
Redux в функциональных компонентах (хуки)
Наше приложение будет построено при помощи функциональных компонентов и хуков, поэтому мы немного рассмотрим какие хуки предоставляет нам Redux для работы в таких компонентах.
. В документации редакса говорится о том, что лучше этот хук не использовать часто, а лучше пользоваться useSelector()
Теперь давайте вернемся к нашему приложению. В index.js нам нужно обернуть наше приложение в компонент Provider и передать ему store через пропсы. Store мы создали в файле store/store.js
Следующим шагом давайте создадим папку, в которой будем хранить наши компоненты и назовем ее componetns. В ней создадим 3 файла:
Для начала импортируем хук useDispatch(), т.к. в этом компоненте мы будем диспатчить 2 экшена: выполнение таска (toggleTask) и удаление (removeTask). В компоненте у нас есть событие onChange — при клике на этот компонент мы будем диспатчить экшен для переключения состояния таска, ну а при клике кнопки удалить — диспатчим экшен для удаления таска из нашего стора.
Далее файл src/components/TaskList.js
Теперь последний компонент AddNewTask.js
Тут у нас будет 2 обработчика handleTaskTitleChange() и handleTaskSubmit(). Последний будет диспатчить экшен для создания нового таска. В идеале, тут бы еще добавить проверку на пустую строку и обрезать лишние пробелы, но у нас не об этом сейчас 🙂
Теперь остался заключительный шаг, изменить файл scr/App.js и добавить немного стилей
В итоге у нас получилась вот такое приложение
Итоговое приложение
Структура 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 файла:
Примерно так он может выглядеть:
Он же может выглядеть примерно так:
И на этом, я думаю, стоит закончить.
Итоговая структура выглядит вот так:
Заключение
Если вам понравилась эта статья и вы узнали что-то интересное для себя, то я очень этому рад.
Ссылка на репозиторий (прошу прощения за такой скудный ридми, мне еще не по силам разговорный английский).