Google Page Experience Update 2023 and Core Web Vitals: All You Need to Know!

[{"selector":"#anim-0a45e11e-6114-4545-8951-f015b33f617d","keyframes":{"opacity":[0,1]},"delay":1000,"duration":4000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-279b8436-dc65-4140-b3aa-91d16111f4e1","keyframes":{"opacity":[0,1]},"delay":1000,"duration":4000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e308b143-3877-4797-922e-76664e579552 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":6000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Page Experience, the new ranking signal, combines Core Web Vitals with existing user experience signals to improve the evaluation of the overall experience provided by a page.

The existing Google page experience metrics include the following:

[{"selector":"#anim-bd4d6152-5c6f-40e6-b09d-fbb64b7358b2","keyframes":{"opacity":[0,1]},"delay":0,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c0f5a9c4-358c-426d-aae0-4f823581aaf0","keyframes":{"opacity":[0,1]},"delay":200,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-10e8a892-23e3-4649-96d3-3b134414fbc9","keyframes":{"opacity":[0,1]},"delay":400,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-da10866b-6704-4c40-9e46-1152d0936b79","keyframes":{"opacity":[0,1]},"delay":600,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] No Intrusive interstitials HTTPS-security Safe-browsing Mobile-friendliness

What is Core Web Vitals?

[{"selector":"#anim-13ce036f-375d-4b1f-9d27-36e05357cc60","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-35ab29e4-c17d-4d72-b4b4-fcaa2bfa21ec","keyframes":{"transform":["translate3d(-209.30239%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bbfc51fd-1ed0-42f6-97f1-ad3f6af39fd4","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fa88444b-fe5d-49ee-b8aa-a26236f999ef","keyframes":{"transform":["translate3d(118.57586%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ee66802c-c52b-4f00-9558-938ab2df513d","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2b0637cd-fe06-4a29-a609-fef372e431df","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Introduced in May 2020, Core Web Vitals are a set of metrics related to speed, responsiveness, and visual stability of a website. Core Web Vitals are the subset of Web Vitals that apply to all web pages and should be measured by all site owners.

Google has defined the following as Core Web Vitals:

[{"selector":"#anim-90738baa-a4b3-4a54-8ca2-ef44f0d7d1f4","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e43c3b12-57b5-4b11-ad0d-cf3b89502f34","keyframes":{"transform":["translate3d(119.67212%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fceb1402-f3e6-4db4-a123-6dd85c9c7595","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c1e6dcca-c3b9-44b7-9c0a-7ecefcf8612a","keyframes":{"transform":["translate3d(-209.30239%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e4698e3a-3a50-4785-aaf6-5a7f4c0effa3","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d07c9a4b-c68f-4fc5-872e-c2f4dddd18c5","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS)

HOW TO IMPROVE LCP?

[{"selector":"#anim-89fecfa7-f707-4b9a-92c3-529fe935451c","keyframes":{"opacity":[0,1]},"delay":0,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-80805ee8-bfa9-4465-8789-4d9c72f62514","keyframes":{"opacity":[0,1]},"delay":200,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-52e745b4-e4d5-43e0-90f2-37154cd7711e","keyframes":{"opacity":[0,1]},"delay":0,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d1a98776-43b1-418e-ac7d-b4953c46510c","keyframes":{"opacity":[0,1]},"delay":200,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Fast Slow server response times Check Render-blocking JavaScript and CSS Improve Resource load times Examine Client-side rendering

HOW TO REDUCE FID?

[{"selector":"#anim-ff407727-c63a-4303-8c2e-0cf399118ddd","keyframes":{"opacity":[0,1]},"delay":0,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2119b693-7241-44a4-8a40-30504b884e81","keyframes":{"opacity":[0,1]},"delay":0,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-54d5838c-4047-4167-857f-6ffb38c8ffdd","keyframes":{"opacity":[0,1]},"delay":0,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-45c08daa-1c83-4a34-ac21-46dcdddcc05b","keyframes":{"opacity":[0,1]},"delay":0,"duration":1600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Reduce the impact of third-party code Reduce JavaScript execution time Minimize main thread work Keep request counts low and transfer sizes small

HOW TO IMPROVE CLS?

[{"selector":"#anim-8aab9b3a-54b6-48a5-b203-b847405dff93","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-250078cb-66e1-4fa5-a103-3d300626373b","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dc20fffd-93f7-49aa-8efb-c3286d90a123","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Always include size attributes on your images and video elements Never insert content above existing content Prefer transform animations to animations of properties

OFFICIAL TOOLS TO MEASURE CORE WEB VITALS

Google PageSpeed Insights Search Console Core Web Vitals report Lighthouse

Want to know more about optimizing Core Web Vitals? Get in touch with us today, and we’ll help you out.

[{"selector":"#anim-955152de-3e25-41e4-a0df-c39271daa97b","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d304a1f-2493-4177-ab03-25eae4d671d7","keyframes":{"transform":["translate3d(-209.30239%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6cb897e0-22b4-45dc-991b-7e79215c0094","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3be8f63d-e333-4586-8531-a5485167377e","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Learn more