Google Core Web Vitals 2020

In May 2020 google announced that the so called “Core Web vitals” will influence the google site ranking. So, besides mobile friendliness, safe browsing, HTTPS and “non-intrusive interstitials” (aka popup-ads) the following three elements of the “Core Web vitals” will have a big influence on a sites ranking:
– Loading: Measured by the “Largest Contentful Paint” (LCP)
– Interactibility: Measured by the “First Input Delay (FID)”
– Visual Stability: Measured by the “Cumulative Layout Shift (CLS)”

So, quiet some work to do. That’s what i did to optimize “my” site:

1) CLS – Cumulative Layout Shift
This addresses the “bouncing” or shift of content, as soon as resource like images are loaded. To prevent this:
– Specify height and width of images so that the browser can calculate the aspect ratio and reserve space.
– set the css-properties “max-width: 100%” and “height: auto” (or vice versa).

HTML:
<img src="image.png" width="640" height="360" alt="Example">

CSS:
img {
height: auto;
width: 100%;
}

2) LCP – Largest Contentful Paint
This “is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded” (https://web.dev/lcp/):
– optimize images, by eg using modern formats like WebP and using different sizes with same aspect ratio for responsive design. see: https://youtu.be/F1kYBnY6mwg for an image compression deep-dive. I’m getting a real fan of WebP. The size of the images is about 70% smaller without a considerable loss in visible quality. You can convert images using the cwebp-tool:

cwebp [options] input_file -o output_file.webp

HTML:
<picture>
<source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg">
<source media="(min-width: 800px)" srcset="puppy-800w.jpg">
<img src="puppy-800w.jpg" alt="Puppy with balloons">
</picture>

– Reduce Resource Load Time (eg. by removing unused css and js, or minimizing these) see https://web.dev/minify-css/
– avoid render-blocking JavaScript and css
– “back to the roots”: defer any non-critical JavaScript and CSS and “inline critical CSS”, so that the visible content can be rendered as soon as possible, without the need to access external resources.
– use caching on the server to speed up server response time. The Lighthouse message for this is “Reduce initial server response time”. Other techniques are “[link rel] Preload” and “Server Push” in HTTP/2 to fetch resources, before they are actually requested.

3) FID – First Input Deplay
nothing to to here…

For other optimizations i think i need to change my hosting-provider (Netcup anyone?):
– Enable text-compression (Gzip, Brotli)
– Setting the cache-control in the HTTP-Header
– use HTTP/2 for all resources

Resources
1) Core Web vitals
– Youtube – Core Web Vitals

2) CLS:
– https://web.dev/cls/ web.dev – Optimize Cumulative Layout Shift
– smashingmagazine.com

3) WebP:
– WebP
– squoosh.app
– Client Hints

4) LCP:
– Measure Site: https://web.dev/measure/
– CSS-Minifier, which can also be used by API, wget,..