Google: “page experience” will be (June 2021) part of search ranking

What

• LCP: Largest Contentful Paint
• FID: First Input Delay (RUM only)
• CLS: Cumulative Layout Shift

• offline/static
• online/dynamic

Offline

Somebody or something generates the raw HTML “offline”, long before the request, then the generated HTML is served via a static webserver (nginx, apache, …) or CDN.

The problem

Currently we have media queries, but in most cases widgets have not the full width of the viewport.

One of the new CSS Houdini APIs:

• CSS Parser API - possibility to implement sass/less/etc support
• CSS Properties and Values API - more advanced CSS properties (variables)
• CSS Typed OM - CSS values as typed JS objects
• CSS Layout API - create custom layouts (like grid or flexbox)
• CSS Painting API - draw something in CSS

• reusable custom elements
• framework independent
• standardized

How can we load JavaScript code into a website?