Landing optimizations

[shashkovdanil]

PR Type

Refactoring, Performance optimizations

Context

Closes #4657

Had issue bounty label?

• Fill up your KSM address: Payout

What I've done

1. Optimized fonts using @nuxtjs/google-fonts

Before (360kb):

After (50kb):

2. Optimized image using @nuxt/image and converting png to webp, for example

Before (650kb):

After (3kb):

3. Huge highlight.js to lightweight Prism

4. Load huge @google/model-viewer only if the ModelMedia component is in the viewport

5. Fixed lodash imports (only import someFn from 'lodash/someFn')

6. Disabled prefetch for nuxt links. It's really big nuxt js problem: by default nuxt does prefetch for all pages and layouts, which is very bad for performance as we load a ton of unused JavaScript, currently there is no solution other than disabling prefetch for links manually. This problem is faced by many nuxt users, here is the issue Nuxt 3 prefetch all assets from every pages and every layouts. nuxt/nuxt#13778

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	ad2109c
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/65529b131c11d90008529e69
😎 Deploy Preview	https://deploy-preview-8030--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kodabot]

SUCCESS @shashkovdanil PR for issue #4657 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[Gavin-Gong]

Looks like the page has lost some CSS styles.

[yangwao]

Related as noticed adding @nuxt/image ?

• add @nuxt/image #7924

[shashkovdanil]

@Gavin-Gong please tell me how to reproduce it, or maybe you have errors in the console?

[shashkovdanil]

Related as noticed adding @nuxt/image ?

• add @nuxt/image #7924

@yangwao ye it's related, I think we can keep my version, I've tested it in different browsers, also configured caching

[yangwao]

or maybe you have errors in the console?

current preview looks like this

• https://deploy-preview-8030--koda-canary.netlify.app/

[preschian]

tbh, I would prefer to revisit the issue after SSR is supported

[preschian]

tbh, I would prefer to revisit the issue after SSR is supported

up

[shashkovdanil]

@preschian I can help with SSR task if you don't mind. I've had a lot of experience with it

[yangwao]

I can help with SSR task

here was iirc some work done

• 🔧 POW Server side rendering #7725

[preschian]

@shashkovdanil you can keep these improvements if you want:

1. Optimized fonts using @nuxtjs/google-fonts
3. Huge highlight.js to lightweight Prism
4. Load huge @google/model-viewer only if the ModelMedia component is in the viewport
5. Fixed lodash imports (only import someFn from 'lodash/someFn')

but please, skip prefetch stuff for now

[yangwao]

I've noticed that #7924 loads on explorer items much faster than this PR, curious why

[shashkovdanil]

@preschian jfyi it's ready for merge

[prury]

Talisman wallet image won't load the first time you try to connect wallet on desktop:

connect.wallet.mp4

Featured Articles:

fonts seems to be bold now for the navbar:

fonts.bolder.mp4

[yangwao]

Seems fonts has changed as @prury reported

canary

pr

Talisman wallet image won't load the first time you try to connect wallet on desktop:

For first loads I wasn't able connect pjs

[prury]

@shashkovdanil sorry for the trouble, but connect wallet problem persists

[codeclimate]

Code Climate has analyzed commit ad2109c and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[shashkovdanil]

@prury ufff it was crazy bug. If you import the chain function as import { chain } from 'lodash', everything works fine. But then we're downloading 200kb of lodash. If we import this function correctly, using import chain from 'lodash/chain', then on the first call we get the error that chain(...).map is not function. I just rewrote the code without using the chain function

[prury]

@prury ufff it was crazy bug. If you import the chain function as import { chain } from 'lodash', everything works fine. But then we're downloading 200kb of lodash. If we import this function correctly, using import chain from 'lodash/chain', then on the first call we get the error that chain(...).map is not function. I just rewrote the code without using the chain function

oh 😄, thank you for rewriting, wallet bug is now gone

[yangwao]

Great, we've gained in performance, yet it seems we've lost some points in best practices, you might have a look @shashkovdanil, please ?

[shashkovdanil]

@yangwao, I did a check and got this result. Deviations of 5-7 units are more of a margin of error. In this PR, I didn't change anything SEO or a11y related

[shashkovdanil]

By the way, I can help improve the accessibility of the site in the future. Fix keyboard navigation, put a11y attributes everywhere. If you have a request for this

[Jarsen136]

code lgtm

[yangwao]

Fix keyboard navigation, put a11y attributes everywhere. If you have a request for this

Sure, you can make follow-up!

I think primarily performance would help keep it on green currently LCP, CLS and so on

• LCP, CLS and INP flex  #6322

[yangwao]

Did not notice anything broken, let's see, merging it, great PR @shashkovdanil thanks!

pay 80 usd

[yangwao]

pay 80 usd

updated your address based on previous PR

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $80 @ 5.44 USD/DOT ~ 14.706 $DOT
🧗 16SpvdDgKNiQ3c53DxX7refnQcKUD3uRNim3Z1HBJLNGrtSP
🔗 0xded7066fa6caa4986584a1dc2ed7cf9703fe27c2efd591b906ba137693a4e312

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues