CLS optimization

[anton-karlovskiy]

• Put the cookie consent UI element at the bottom of the main UI using position: fixed; in order to reduce the CLS.
  
• Do not use https://fonts.googleapis.com/css?family=Roboto:300,400,500 to avoid FOUT/FOIT.
  

cc @addyosmani

[anton-karlovskiy]

Reducing the CLS to 0 by adjusting the cookie consent UI and removing using https://fonts.googleapis.com/css?family=Roboto:300,400,500 (FOUT)

PR: #22
Lighthouse CI comparison: https://rocky-taiga-72405.herokuapp.com/app/projects/my-favorite-project/compare/d9dd9605-bb87-4982-9095-543b867d2af7?compareUrl=http%3A%2F%2Flocalhost%3APORT%2F&baseBuild=327747ab-831e-41d5-baab-44c119bdcd75

Before:
GitHub commit: da9520b
Vercel URL: -

After:
GitHub commit: 788dbc2
Vercel URL: https://nuxt-movies-1kaken5it.vercel.app/

FYI: We improved the LCP as well as CLS by not using https://fonts.googleapis.com/css?family=Roboto:300,400,500.

cc @addyosmani

[anton-karlovskiy]

@addyosmani

FYI: Until #1 (comment) is clarified, I'm going to pause improving the CLS for now.

[anton-karlovskiy]

I think we should fix this (in a way similar to what we did to the cookie consent UI element) on mobile cc @addyosmani

[anton-karlovskiy]

On the person page e.g. http://localhost:3000/person/5470, there is a CLS on mobile view. Perhaps the aspect-ratio is broken there. cc @addyosmani

@addyosmani
It's also fixed by using the nuxt-image module with explicit width and height attributes set for aspect-ratio.