tastejs/nuxt-movies

Nuxt.js Movies - a TMDB client optimized for Core Web Vitals

nuxt-movies's Issues

Sliding is not smooth when images are being lazy-loaded by nuxt-image and the CSS aspect-ratio is not there

After removing the CSS aspect-ratio, the transition does not work as expected.
Here are the changes https://github.com/addyosmani/nuxt-movies/pull/31/files and I believe there's not a special thing.

The transition working in the dev branch:

The transition seems broken in the perf/cls-with-nuxt-img branch:

@pi0 @danielroe
Could you please give me advice on it?
cc @addyosmani

FYI: it's my bad, the transition is there.

Combining Server-Side Rendering and Responsive Design

@pi0 @danielroe cc @addyosmani

One of the pains I've experienced in SSR of Next.js is to realize responsive design without unnecessary DOM elements being rendered.
In this project, we have the same case.

Problems in universally rendered apps with conditional rendering in regard to the responsive layout

• window.mediaQuery cannot be used since it's not available on server-side rendering and there would be a DOM tree mismatch issue.
• Using CSS media query would result in rendering all of the elements regardless of whether they are used either on desktop or on mobile.

I think this article explains this well.

We managed to avoid rendering unnecessary DOM elements by using https://github.com/artsy/fresnel in the Next.js project.

@pi0 @danielroe Could you please suggest what to use in Nuxt.js? Thank you.

LCP optimizations

This is an umbrella issue to track current LCP issues: (related: CLS => #21)

• Cookie consent display is delayed until client bundle loads (#46)
• Hero and first row of cards shall be preloaded (#29, nuxt/image#105)
• Lazy loading animation is probably also adding some penalty (subject to test)

---

Currently, this measurement is only red one:

Document Nuxt.js issues and opportunities

To help the Nuxt.js team understand what opportunities there are to improve the defaults for the Core Web Vitals, it would be great if we can keep a running log of 'here's a pain point I ran into' or 'here's a change I needed to improve LCP manually' etc.

I would like to suggest we create a new issue for each 'type' of pain-point and use the label nuxt-issue so that it is easier for the team to keep track.

If after checking with Nuxt we determine that it's definitely a bug or feature request worth making upstream, perhaps we can consider posting it to the appropriate Nuxt repo at that point?

What do folks think?

Cookie consent banner improvements

• Position can be fixed to reduce CLS (#21)
• We can show it earlier to reduce LCP (#45)

Some other ideas (to be implemented if we go by module approach):

• Respcting do-not-track
• Lazy loading banner component when does not needs to be displayed

I expect artifact of this issue (other than fixing in nuxt-movies) can be a nuxt module for implementing SSR-friendly cookie and probably an blog article to mention tips

Add preconnects to required origins like https://image.tmdb.org and http://fonts.gstatic.com

Re: https://googlechrome.github.io/lighthouse/viewer/?gist=45a455e15a2d1c5ae12b5c37404e953b

cc @addyosmani

@addyosmani
A preconnect to https://image.tmdb.org is added.
http://fonts.gstatic.com does not have to be added as it's handled by the @nuxtjs/google-fonts.

use Shared Element Transition API

particularly when navigating into a movie + out again, could be nice to use Shared Element Transition API to make it smooth and beautiful

Defer offscreen images

The original project was using https://github.com/addyosmani/nuxt-movies/blob/dev/plugins/lazyload.js for lazy-loading images but it seems like it's not compatible with responsive images using srcset and sizes attributes.
@pi0 @danielroe @addyosmani
Could you please teach me what (a third-party package or an approach) to use for lazy-loading images?
FYI: in the first place, I'm going to test with the native lazy-loading (https://web.dev/browser-level-image-lazy-loading/) but from my experience, due to Distance-from-viewport thresholds, the payload was not small enough.

Font use-case without FOUT or FOIT

The original project was using Roboto font (Google font) but it contributed to CLS (FOUT/FOIT) so I removed it and ended up using the system fonts. The CLS score was reduced (Re: #21 (comment)) but I think people may want to use some custom fonts.
Do you think we could solve this issue by using https://github.com/nuxt-community/google-fonts-module without using any manual approaches e.g. https://web.dev/preload-optional-fonts/?
cc @pi0 @danielroe cc @addyosmani

Using `nuxt-image` module

@pi0

I might be wrong but I guess there's a bug in using modifiers like so:

for (const image of this.images) {
  image.thumb = this.$img(image.file_path, {
    modifiers: {
      width: this.type === 'poster' ? 370 : 533,
      height: this.type === 'poster' ? 556 : 300
    }
  }).url;
  image.src = this.$img(image.file_path).url;
}

Could you please review the following scenarios?

When we set width and height directly as props, it seems to work as expected (like so).

By taking this workaround d66ae7a, I managed to fix those broken images.

CLS optimization

• 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

Properly size images

Styling for some non-image placeholders is broken after the CSS aspect-ratio was removed

This is because the non-image placeholders were using the CSS aspect-ratio styling so after removing the CSS aspect-ratio, they were broken.
I have not fixed this issue yet and just add some comments named TODO: should add styling for span element.

cc @addyosmani

Application requirements

After discussing it with Sebastien, we think that a Nuxt.js TMDB implementation would be complex enough to give us early signals into where some of the main gaps are hitting the Core Web Vitals when building with Vue and Nuxt.

Aspects that make this a good fit:

• It's based on an API with a good level of complexity (a TMDB client often needs to reason about multiple routes, nested components/views, data-fetching and so on)
• It's beyond a toy application - TMDB supports incorporating authentication and creating custom user data (e.g lists of favorite movies). Reasoning about the loading and chunking stories for these features will be good.
• Interesting challenges relevant to both the work done with Next.js and that will be helpful for Nuxt: e.g when should you preload the LCP image for movie posters? should you preload the API responses? For CLS, we may need to optimize via image dimensions, hero image dimensions etc. How far does critical-CSS optimization get you? etc.
• Flexibility: one of the downsides to demo applications is that we don't often need to reason too much about third-party scripts for tag management and so on. This may be fine, but we should have the flexibility to experiment if needed.
• Metrics: we will aim to optimize the current Core Web Vitals as well as FCP

What am I hoping we will be able to get out of this exercise?

• List of issues and opportunities for improvement hitting CWV out of the box with Nuxt.js
• An understanding of how feasibility it is to hit CWV with this stack (ideally a lot of the patterns we have been exploring via Next.js will translate over)
• Perhaps enough material for a case study, but at minimum an open-source application developers can take a look at will be useful for continuing discussions in public

In terms of 'what' we are aiming to build here, here is a similar implementation Anton and I worked on using Next.js.

Non blocking navigation

One of newer features nuxt introduced in v2.12 (it is before original nuxt-movies project created i guess) is fetch hook which in comparation to asyncData, awaits during server-side-rendering but does not blocks route change with client-side navigation. This gives us possibility to quickly navigate to next page while individual parts of page are loading. Which can be by a skeleton but we usually have some vital meta from current page in global state like movie title so can reuse it. (this technique is used in nuxt hackernews demo for example)

Action points:

• Try method for landing to movie navigation
• Investigate limitations that it brings that developers may want to avoid
• Compare user experience and possible introduced layout shifts

Measuring Core Web Vitals (RUM)

It would be helpful to have CWV measurement in place early on in the project so we can see how the metrics trend as optimizations are experimented with.

I believe https://github.com/nuxt-community/web-vitals-module is the current official solution Nuxt.js recommends (need to check if it is baked in now...)

Once we decide where dev/staging should be deployed, I will get GA setup so we have an ID we can use.

production deployment

Vercel assumes main branch for production. We can rename current dev to main or create new main branch for staging/production deployments flow. /cc @addyosmani @anton-karlovskiy (related to #42)

Hosting

Perhaps it would be interesting to get a sense of where most Nuxt.js users are hosting their deployments so that are aren't picking a hosting environment that's overly slow or overly optimal. Some of the candidates for hosting I have in mind are Netlify or Vercel, but I'm very open to whatever we think makes the most sense here.

Unused payload removal

One of pain parts with SSR applications when depending on external REST APIs, is that we fetch and hydrate payload data. For instance by checking landing page's html source, we have ~34250 minified chars of json data which is barely used in page this causes network latency, js parsing overhead (CPU) and memory usage.

Action points:

• Use a serverMiddleware as BFF layer to reduce payload for landing page
• Investigate actual perf improvements
• Investigate possibility of creating a nuxt tool to analyze this for users about how much of hydrated data is accessed (via a proxy maybe)

Miscellaneous

@pi0 @danielroe

Could you please teach me one thing in Vue.js development?
Our project has SASS preprocessor set up and re-uses the same classes across different components.

According to a best practice in React componentizing (https://create-react-app.dev/docs/adding-a-sass-stylesheet/), the approach mentioned above is not recommended and I also found that such an approach might make it difficult to maintain the project.
Is it also true in Vue.js world?

SVG use-case in nuxt.js

@pi0 @danielroe cc @addyosmani

In this project, SVGs are inlined and duplicated whenever the same SVG is needed.
I think we should use https://github.com/nuxt-community/svg-module#vue-svg-loader.
What do you think?

I think we can compare the performance in the two cases where one is using manually inlined SVGs and the other one is using @nuxtjs/svg.
I guess that although the latter might increase the bundle size, it's super better for DX compared to the former.

Preloading a hero image for LCP

Re: #25 (comment), #25 (comment)

Hi @pi0 @Atinux @danielroe cc @addyosmani
On the home page, there is a hero image which is detected as an LCP element.
Although the hero image is dynamic (randomly picked up), since we're using Nuxt.js (SSR), I think we can write a dynamic script using JS which is to be rendered first on the server-side and hydrated as a plain script (no dynamic part included) to the client.
Is there any package or approach in Vue/Nuxt to preload it?

Manual approaches:
https://web.dev/preload-responsive-images/
https://addyosmani.com/blog/preload-hero-images/

Build from scratch or migrate existing app?

There may be value in us taking an existing TMDB implementation in Vue or Nuxt and 'porting' it over to the latest Nuxt then work on our optimizations from there.

One benefit over beginning from scratch is that some of the views are already in place and we can see what dependencies (or slip-ups it can be common to make when building an app) that may otherwise not be visible if we're starting from scratch on our own. Do folks have opinions on this?

https://github.com/jasonujmaalvis/vue-movies is one good existing app. Based on #3, if we went in this direction we would still want to add support for auth and so on.