search

AlexLavoie42 / Nuxt-Mapbox

Elegant Mapbox integration with Nuxt
81 stars 11 forks source link

Bad Google LightHouse score with Nuxt Mapbox #40

Closed agracia-foticos closed 1 year ago

agracia-foticos commented 1 year ago

We are testing our web with Google LightHouse:

  1. The script is charged in all pages, even if we doesn't use MapBox map... FEATURE / IMPROVEMENT: Only push Mapbox Scripts and CSS when the component is loaded like https://nuxt.com/docs/guide/directory-structure/components#dynamic-imports

image image

  1. Use async and defer script style like : https://www.speedcurve.com/blog/preload-scripts/ image
AlexLavoie42 commented 1 year ago

For the first suggestion, I believe you would be able to add it yourself by renaming the MapboxMap component to LazyMapboxMap. Granted, I don't think it will do much since we are forced to use the CDN import because of #2.

Once we can stop using the CDN it should greatly improve performance. It may currently be possible to get it to work with esModuleInterop. I will look into adding defer and async to the script if I am not able to get that to work.

agracia-foticos commented 1 year ago

With image

the script is still loaded

image

:(

agracia-foticos commented 1 year ago

still waiting :(

AlexLavoie42 commented 1 year ago

This will ship with v1.4.0 (if I get it to work) which will be a large update with many changes/additions. Don't expect it to be released quickly. But in the mean time, I have released some preview builds under the dev tag. I must warn that they are entirely untested at the moment so expect bugs & issues.

AlexLavoie42 commented 1 year ago

Should be much better after #45.

Let me know the results you get after updating. When testing scores seem much better but I haven't tested without using the map component.

AlexLavoie42 commented 1 year ago

Closing due to inactivity