Closed rhnmht30 closed 3 years ago
Nice, next/image doesn't work when we do next export
Possible solution:
next start
, which starts the Image Optimization API, and upload that to own serverless platform.next.config.js
.Can you try and deploy it again? I guess there is some error
Okay, checked it. Elements, paddings and margins are not the same as before. You need to fix it.
Also, look for the input focus. When the input box is clicked, the browser adds up a weird border around the element. Fix it as well.
Okay, checked it. Elements, paddings and margins are not the same as before. You need to fix it.
Can you specify those elements?
They may not be exactly the same since tailwind uses rem
instead of px
.
Maximum achievable performance score when using lottie animations
Mobile
Desktop
Desktops have a higher score because it has more resources than mobile :)
Evidence to prove that lottie animations are killing the performance. Let's see the team's page performance, which has images but no animations.
Mobile
Desktop
Mobile scores are still less than 90 because of embedded google maps
Pretty much nothing more can be done to improve performance. ππ½
@mayanksh99 can you please check it? Compare the live version with the PR preview.
Finally π Successfully deployed on Netlify! Deploy previews are working as expected π©οΈ
Also, the problem with next/image
not working with netlify is solved!
Nice, next/image doesn't work when we do
next export
Possible solution:
- Use
next start
, which starts the Image Optimization API, and upload that to own serverless platform.- Use Vercel to deploy, which supports Image Optimization. (will try this, but netlify gives short custom short links)
- Configure a third-party loader in
next.config.js
.
I went with the 3rd option. Using Cloudinary to fetch the remote image URLs, which are now optimized and cached as expected π
Can we just load svg for mobiles rather than loading complete lottie animation ?
closing due to inactivity. To solve deployment issue refer to: https://rhnmht30.dev/blog/next-image-with-netlify
changes:
refactor:
fixes:
I have tried running lighthouse metrics with several scenarios:
Scenario 1: page has embed map and lottie animation (without above optimisations)
Scenario 2: page has embed map and lottie animation (with above optimisations)
Scenario 3: page has no embed map and lottie animation (with above optimisations)
Scenario 4: page has embed map and no lottie animation (with above optimisations)
Scenario 5: page has no embed map and no lottie animation (with above optimisations)
Verdict: Lottie animations are degrading performance more than embed maps :) I have settled for scenario 2.