Web Vitals

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

web-vitals

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

Tools

web vitals

Google believes that the Core Web Vitals are critical to all web experiences. As a result, it is committed to surfacing these metrics in all of its popular tools. The following sections details which tools support the Core Web Vitals.

Field tools to measure Core Web Vitals
The Chrome User Experience Report collects anonymized, real user measurement data for each Core Web Vital. This data enables site owners to quickly assess their performance without requiring them to manually instrument analytics on their pages, and powers tools like PageSpeed Insights, and Search Console’s Core Web Vitals report.

Front end developer

This is not a brand new title or position, but it’s certainly moved in scope over the years.

​​“Front-end” essentially means web browser. I consider myself a front-end developer. As a front-end developer, you work very closely with web browsers and write the code that runs in them, specifically HTML, CSS, JavaScript, and the handful of other languages that web browsers speak (for instance, media formats like SVG).

Browsers don’t exist alone, they run on a wide landscape of devices. We learned that through the era of responsive design. And most importantly: users use those browsers on those devices.

Nobody is closer to the user than front-end developers. So front-end developers write code for people using browsers that run on a wide variety of devices.

​​Just dealing with this huge landscape of users, devices, and browsers is a job unto itself!

​​All the while, the “front-end” is still just the browser. The browsers languages, HTML, CSS, and JavaScript are still the core technologies at play.

​​Being a front-end developer is still caring about users who use those browsers on those devices. Their experience is our job. The tooling just helps us do it, hopefully.

​​So what are you doing as a front-end developer?

  • ​​You’re executing the design such that it looks good on any screen
  • ​​You’re applying semantics to content
  • ​​You’re building UI abstractly such that you can re-use parts and styles efficiently
  • ​​You’re considering the accessibility of what renders in the browser
  • ​​You’re concerned about the performance of the site, which means
  • you’re dealing with how big and how many resources are being used by the browser.
  • ​​Those things have always been true, and always will be, since they are fundamentally browser-level concerns and that’s what front-end is.

​​What’s changing is that the browser is capable of more and more work.

There are all sorts of reasons for that, like browser APIs getting more capable, libraries getting fancier, and computers getting better, in general.

Offloading work from the server to the browser has made more and more sense over the years (single page apps!).

​​Front-end development these days might also include:

  • ​​Architecting the entire site from the tiniest component to entire pages up to the URL level
  • ​​Fetching your own data from APIs and manipulate the data as needed for display
  • ​​Dealing with the state of the site on your own
  • ​​Mutating/changing data through user interaction and input and persist that data in state and back to the servers through APIs
  • ​​Those are all things that can be done in the browser now, much to the widening eyes of this old developer. That’s a heck of a haystack of responsibility when you consider it’s on top of all the stuff you already have to do.

​​While that haystack of jobs tends to grow over the years, the guiding light we have as front-end developers hasn’t changed all that much.

Our core responsibility is still taking care of users who use web browsers on devices.