--- title: "An in-depth guide to Core Web Vitals" publication: "Frontend Focus" issue: 487 published_at: "2021-04-21" canonical_url: "https://frontendfoc.us/issues/487" --- plus, what's the deal with Google's FLoC? | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​487 — April 21, 2021 | [Read on the web](https://frontendfoc.us/issues/487) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/bnfaa0wlyanu2bp0y3q3.jpg)](https://www.smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals/) [An In-Depth Guide To Measuring Core Web Vitals](https://www.smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals/) — How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Barry Pollard takes a look. Jess B Peck's [_The Almost-Complete Guide to Cumulative Layout Shift_](https://jessbpeck.com/posts/completecls/) is another useful guide digging deeper into one aspect. Smashing Magazine [Introducing CSS Grid Inspector in Safari](https://webkit.org/blog/11588/introducing-css-grid-inspector/) — Safari now has a CSS Grid Layout Inspector (you can try it as of [Safari Technology Preview 123](https://webkit.org/blog/11585/release-notes-for-safari-technology-preview-123/)), this post looks at how to use it. Razvan Caliman (WebKit) [![\](https://copm.s3.amazonaws.com/080d3651.jpg)](https://srv.buysellads.com/ads/long/x/TCYAVODTTTTTTTFTT2XCTTTTTTTFCRIXKTTTTTTT43YUEYTTTTTTTMIIV7CIKNZ4G3QWY7IWVQCDEBSWF3VHVEZ5Q3JT) [Live Webinar: Building Editor X’s Award-Winning Homepage](https://srv.buysellads.com/ads/long/x/TCYAVODTTTTTTTFTT2XCTTTTTTTFCRIXKTTTTTTT43YUEYTTTTTTTMIIV7CIKNZ4G3QWY7IWVQCDEBSWF3VHVEZ5Q3JT) — Discover best practices for building a homepage. Go behind the scenes of the award-winning new Editor X homepage and explore the process from concept to build. Join design & marketing experts for a webinar about creating a powerful homepage. Save your spot now⇢ Editor X sponsor ['CSS is a Strongly Typed Language'](https://css-tricks.com/css-is-a-strongly-typed-language/) — “_As strongly-typed JavaScript becomes more popular, it is my hope that it helps developers become more comfortable with the firm, yet flexible approach of CSS_”. Head to the comments for the expected 'CSS isn't a programming language' debate ;-) Eric Bailey [Resolving Overflow Issues in CSS](https://www.smashingmagazine.com/2021/04/css-overflow-issues/) — Explores the causes of overflow issues and how to solve them, and looks at how modern features in the developer tools can make the process of fixing and debugging easier. Ahmad Shadeed **⚡️ Quick bits:** - [Version 88 of Firefox](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/88) arrived earlier this week, with [a few small CSS fixes and disabling FTP support](https://hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/). - Here's a look at [what's new in DevTools in Chrome 91](https://developer.chrome.com/blog/new-in-devtools-91/). - The W3C has [launched a new Web Machine Learning Working Group](https://www.w3.org/blog/2021/04/w3c-launches-the-web-machine-learning-working-group/). - The Canary version of [Microsoft Edge now has a performance mode](https://www.theverge.com/2021/4/19/22391505/microsoft-edge-performance-mode-ram-cpu-battery-usage) to improve RAM, CPU, and battery usage. - Both [QUIC and HTTP/3 support is now in Firefox](https://hacks.mozilla.org/2021/04/quic-and-http-3-support-now-in-firefox-nightly-and-beta) Nightly and Beta. - The Tailwind UI component library [now has React and Vue support](https://blog.tailwindcss.com/tailwind-ui-now-with-react-and-vue-support). - Ever wondered just [how often people actually copy and paste things from Stack Overflow](https://stackoverflow.blog/2021/04/19/how-often-do-people-actually-copy-and-paste-from-stack-overflow-now-we-know/)? - We often link to Josh Comeau, and this time he's written up [an in-depth look at the tech stack behind his blog](https://www.joshwcomeau.com/blog/how-i-built-my-blog/). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1619008094/qlyckgiblurxxtt340cl.png)](https://web.dev/cookie-notice-best-practices/) [Best Practices for Cookie Notices](https://web.dev/cookie-notice-best-practices/) — A look at how cookie notices can affect performance, performance measurement, and UX, along with advice on how to optimise their overall usability. Katie Hempenius [Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript](https://blog.sentry.io/2021/04/12/slow-and-steady-converting-sentrys-entire-frontend-to-typescript?hss_channel=tw-464217126) — Dozens of developers took a year to convert 1,100 files and 95,000 lines of code from JavaScript to TypeScript. This is one of those _“we did a complicated thing and here’s what we learnt”_ pieces you’ll want to point to if your workplace attempts a similar thing. Priscila Oliveira and Mark Story (Sentry) [Floating an Element to the Bottom Corner](https://css-tricks.com/float-an-element-to-the-bottom-corner/) — Pushing an element to the right or the left is easy enough with the `float` property, but here’s a CSS-only solution to position something to the _bottom_ of an element. Temani Afif [State of Internal Tools Report 2021](https://retool.com/blog/state-of-internal-tools-2021/?utm_source=cooperpress&utm_medium=referral&utm_campaign=soit_2021) — We surveyed 650 developers on how and why they build internal front ends. Find out the most popular tools. Retool sponsor [A Real World CSS vs. CSS-in-JS Performance Comparison](https://pustelto.com/blog/css-vs-css-in-js-perf/) — No huge surprise here, I suspect. Tomas Pustelnik [The Best Approach to Lazy Load Images for Maximum Performance](https://codeadrian.hashnode.dev/the-best-approach-to-lazy-load-images-for-maximum-performance) Adrian Bece [Debugging JavaScript Efficiently with Chrome DevTools](https://lo-victoria.com/debugging-javascript-efficiently-with-chrome-devtools) Victoria Lo [Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling](https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/) Jhey Tompkins **🧐 FLoC Off?** ![](https://res.cloudinary.com/cpress/image/upload/v1619001716/aqchyrrzn6jz95eafth0.jpg) Earlier this year [Google shared an update on their planned replacement for third-party cookies](https://blog.google/products/ads-commerce/2021-01-privacy-sandbox/) — however it's fair to say this proposal for a 'Federated Learning of Cohorts' (or [FLoC](https://github.com/WICG/floc) for short) hasn't gone down well, with backlash from Mozilla, Brave, DuckDuckGo, and others. It's looking like Google may be going it alone on this one. - If you're looking for a primer on all of this [Dieter Bohn has a solid write-up](https://www.theverge.com/2021/3/30/22358287/privacy-ads-google-chrome-floc-cookies-cookiepocalypse-finger-printing) of what it all means. - [WordPress may treat Google's FloC as a security issue](https://www.zdnet.com/article/wordpress-could-treat-google-floc-as-a-security-issue/) — a proposal has been raised in WordPress Core to block the identifier by default. - Bennett Cyphers [writing at EFF](https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea) describes FLoC as "_the opposite of privacy-preserving technology_". - Chromium browser [Brave has removed FLoC](https://brave.com/why-brave-disables-floc/), calling it 'harmful to web users'. - DuckDuckGo have [released a Chrome extension](https://spreadprivacy.com/block-floc-with-duckduckgo/) to block FloC's tracking. - The Verge have [a thorough report](https://www.theverge.com/2021/4/16/22387492/google-floc-ad-tech-privacy-browsers-brave-vivaldi-edge-mozilla-chrome-safari) on the current stance of Vivaldi, Mozilla and Microsoft's Edge. [This from Ars Technica](https://arstechnica.com/gadgets/2021/04/everybody-hates-floc-googles-tracking-plan-for-chrome-ads/) is also worth a look. - [Here's a tweet from John Wilander of the WebKit team](https://twitter.com/johnwilander/status/1381699191609561088) on the matter. - Finally, here's [how you can opt your site out of Google's FLoC network](https://paramdeo.com/blog/opting-your-website-out-of-googles-floc-network) (by altering HTTP response headers). 🔧 **Code, Tools and Resources** [Style Check: Audit The Effect of Different CSS Sources on Plain HTML Elements](https://style-check.austingil.com/) — Shows you a comprehensive set of HTML elements to which you can apply a selected library (Bootstrap, Normalize, etc) or import one via URL to see how the elements behave. Austin Gil [Font Brief: Discover Fonts Based on Font Attributes](https://www.fontbrief.com/fontbrief) — Search a curated collection of paid and free fonts using specific font qualities like elegance, friendliness, classic, and so forth. kore [New Next.js Blog Starter: Headless CMS with Sitemap and Page Management](https://agilitycms.com/starters/blog-with-nextjs?utm_source=frontend&utm_medium=newsletter&utm_campaign=brieflink&utm_term=april21&utm_content=newnextjsstarter) AGILITY CMS sponsor [Soft UI Dashboard: A Free Bootstrap 5 Dashboard](https://github.com/creativetimofficial/soft-ui-dashboard) — Includes individual page components [you can view here](https://www.creative-tim.com/learning-lab/bootstrap/alerts/soft-ui-dashboard) or check out [the full demo](https://demos.creative-tim.com/soft-ui-dashboard/pages/dashboard.html). Creative Tim [Alternative Tweet Embeds: Embed Tweets Without Compromising Your Users' Privacy and Your Site's Performance](https://alternative-twitter-embeds.glitch.me/) Stefan Bohacek [Sergey: A Tiny Static Site Generator](https://sergey.cool/) — A no-configuration SSG that will render your HTML, include partials, and render out slots. The sort of thing you'd use if even [Eleventy](https://www.11ty.dev/) is too much. Trys Mudford Jobs [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)