12 марта 2024 года в Core Web Vitals (основные показатели качества вебсайта) заменят
First Input Delay (FID) на Interaction to Next Paint (INP), который лучше учитывает UX при взаимодействии пользователя с сайтом.
В Google (создатель Core Web Vitals) не раз заявляли, что сайты научились обманывать метрику FID, что давало высокий результат в показателях при плохом пользовательским опыте.
В итоге, как видно на замерах Page Speed, показатели многих сайтов станут неудовлетворительными, в том числе, использующих SSR и гордящихся своими метриками (на картинке выше результаты по nuxt.com). У Vue SPA падение тоже есть, хотя и не такое большое.
#webvitals #nuxt #google
First Input Delay (FID) на Interaction to Next Paint (INP), который лучше учитывает UX при взаимодействии пользователя с сайтом.
В Google (создатель Core Web Vitals) не раз заявляли, что сайты научились обманывать метрику FID, что давало высокий результат в показателях при плохом пользовательским опыте.
В итоге, как видно на замерах Page Speed, показатели многих сайтов станут неудовлетворительными, в том числе, использующих SSR и гордящихся своими метриками (на картинке выше результаты по nuxt.com). У Vue SPA падение тоже есть, хотя и не такое большое.
#webvitals #nuxt #google
Хм..
Почитал как работают Core Web Vitals и прозрачным прямоугольником на сплэш-скрине смог свести LCP до минимума (ранее был в районе 2 секунд)
Это этим занимаются SEO-специалисты?
#seo #webvitals
Почитал как работают Core Web Vitals и прозрачным прямоугольником на сплэш-скрине смог свести LCP до минимума (ранее был в районе 2 секунд)
Это этим занимаются SEO-специалисты?
#seo #webvitals
Во всех браузерах кроме Firefox реализован Fetch Priority API
Это атрибут
Это важно в первую очередь для метрик
Учитывая, что ресурсов на странице может быть много, а браузеры выделяют на сетевые соединения около 5 потоков на один домен, то может образоваться очередь, и ваша
Также можно указать
#tip #optimization #webvitals
Это атрибут
fetchpriority
на тэгах img
, script
, link
, который указывает, насколько приоритетен данный ресурс для загрузки.Это важно в первую очередь для метрик
Core Web Vitals
, а именно - LCP
. Если элемент LCP
- картинка, имеет смысл указать ей fetchpriority="high"
.Учитывая, что ресурсов на странице может быть много, а браузеры выделяют на сетевые соединения около 5 потоков на один домен, то может образоваться очередь, и ваша
LCP
картинка появится не сразу.Также можно указать
fetchpriority="low"
для картинок вне области видимости, - в том числе, в слайдере.#tip #optimization #webvitals
web.dev
Optimize resource loading with the Fetch Priority API | Articles | web.dev
The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.
На
C фронтом на бесплатном (= небыстром, плохо конфигурируемом) хостинге, с бэком на другом бесплатном (= небыстром) хостинге и реальным среднего размера веб приложением.
При повторных запусках сайта он будет открываться вообще мгновенно (за счет
#spa #pwa #webvitals #ssr
SPA
тоже можно выбивать страйки в Web Vitals
C фронтом на бесплатном (= небыстром, плохо конфигурируемом) хостинге, с бэком на другом бесплатном (= небыстром) хостинге и реальным среднего размера веб приложением.
При повторных запусках сайта он будет открываться вообще мгновенно (за счет
PWA
кэширования)#spa #pwa #webvitals #ssr