Stack Overflow
Stack Overflow

Questions tagged [web-vitals]

For questions related to any of the Web Vitals metrics: https://web.dev/vitals/

45 questions
34
votes
6 answers

React JS npm start shows failed to compile web-vitals

I'm getting the error: failed to compile -/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals'. Since new to react JS, could not find what happened. Here is the reportWebVitals.JS file. Thanks in advance for the help. …
ssajid.ru
  • 459
  • 1
  • 4
  • 9
11
votes
1 answer

What is the web-vitals, comming with create-react-app?

I have just recognised that my newly created Reactjs application have a file src/reportWebVitals.js, which is being called in index.js. What is this file/pice of code for? const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry…
Sedat Polat
  • 1,631
  • 2
  • 18
  • 28
6
votes
2 answers

How do I avoid CLS (cumulative layout shift) with Google Adsense "Let Google optimize the size of your mobile ads" enabled?

I am not using responsive ads due to the willing of getting a better Web Vitals score. However, with the Let Google optimize the size of your mobile ads checked, it seems Google will still change/update its ad size in a min-height defined container…
AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
6
votes
1 answer

TypeScript classes and Webpack

Let say I have a typescript class with 10 methods and that the file export a new instance of the class as its default export. Then I have another file, like a React functional component, that import this class and call one method on the class. How…
Johan Nordberg
  • 3,621
  • 4
  • 33
  • 58
6
votes
2 answers

Set height of image with 100% width for CLS (Cumulative Layout Shift)

To work on CLS of Core Web Vitals, I needed to find a way to set height of img tag when an image is 100% width on the screen, since the height of the image changes whenever the window is resized. The site I was working on was built on WordPress and…
shinyatk
  • 855
  • 11
  • 28
6
votes
1 answer

Largest Contentful Paint (LCP) less than First Contentful Paint (FCP)

My company has asked me to add some site speed metrics to our site to help identify less than optimal user experiences. Using a custom HTML Google Tag Manager (GTM) tag, I added PerformanceObserver(s) for both First Contentful Paint (FCP) and…
Jonathan Cuningham
  • 61
  • 4
5
votes
2 answers

How to fix Lighthouse “Serves images with low resolution”

One of the recommendations I get when I audit my website using https://web.dev/measure, is "Serves images in low resolution". As you can see from the screenshot below, my displayed image size matches the actual size. I don't know what's wrong here…
Atef Wagih
  • 377
  • 1
  • 4
  • 22
4
votes
1 answer

CLS (Cummulative Layout Shift ) in sticky navigations with position: fixed

With the new Web Vitals incoming I have a problem with my sticky navigations/menus. In fact most pages will have :-( The problem is that I use an approach like bootstrap affix to make the menu sticky when it would leave the viewport. But every time…
SebK
  • 41
  • 1
  • 2
3
votes
1 answer

Does TTFB include the time for the request that redirects to my page?

I am calculating TTFB (Time to First Byte) and other web vitals on a page using the web-vitals javascript library. The flow is like this: The user, looking at a web page from server A, is clicking a button or other link, resulting in a request that…
Otto Paulsen
  • 334
  • 2
  • 11
3
votes
1 answer

How can I preload correct number of images based on screen size?

I'm working to optimise Largest Contentful Paint (LCP), but am having trouble preloading the correct amount of LCP candidate images based on device size. The problem: on small screens, a single image shows in a carousel on larger screens, up to…
SRack
  • 11,495
  • 5
  • 47
  • 60
3
votes
1 answer

Cumulative Layout Shift (CLS) metric impacted by use of content-visibility property?

Pages on our site have always had near-zero CLS. This makes sense, as they are server-rendered HTML page with a simple static layout. Recently we added use of content-visibility: auto per the below (added only to below-the-fold…
Mike Robinson
  • 41
  • 4
2
votes
0 answers

Vercel cannot collect data for Web Vitals using SvelteKit

I have an application deployed to Vercel using SvelteKit and would like to enable Web Vitals in the Vercel dashboard. I go in and enable it, redeploy, and then visit the site but it just keeps waiting for incoming data. I have CSP configuration in…
Drew Worden
  • 21
  • 2
2
votes
1 answer

How to simulate a bad First Input Delay (Web Core Vitals) score?

I need to create a webpage that will generate a bad First Input Delay (FID) value. In case you aren't aware, FID is part of Google's Web Core Vitals. I want to simulate a bad FID because I am testing a website scanning tool that is supposed to flag…
TinyTiger
  • 1,801
  • 7
  • 47
  • 92
2
votes
1 answer

LCP result is totally opposite from performance API than the pagespeed insights or webpagetest

I am trying to optimise LCP for this page. I read an article on LCP optimisation where I also found a script which can help to determine which part of the LCP most time is spent on. Script: const LCP_SUB_PARTS = [ 'Time to first byte', 'Resource…
Rabin Poudyal
  • 717
  • 6
  • 20
1
vote
0 answers

Nextjs framework.*****.js chunk has high total blocking time

In my project I'm measuring performance of next.js and have a high total blocking time. Typicaly "framework" chunk took more than 50ms multiple times. From what I've read that this chunk represents react/react-dom js files. Does it mean that my…
Олег Войтинський
  • 739
  • 6
  • 17
1
2 3