Review Lighthouse recommendations and apply enhancements

[pournasserian]

For mobile & desktop (both)

[TheHadiAhmadi]

@pournasserian here is the results:

I wrote custom css for styles and css size is now ~2kb (tabler.css is 1.5mb right now and we should optimize it too).

after css, the main problem is large size of Javascript code. I tested multiple ways to reduce javascript size:

1- use html tags instead of El component:

<h1>Hello World!</h1>

2- use El component from @ubeac/svelte:

<script>
    import {El} from '@ubeac/svelte'
</script>

<El tag="h1">Hello World!</El>

• in above example browser also imports a file related to momentjs. (which we don't need in our page)

3- and finally import el directly from @ubeac/svelte/components/El/El.svelte

<script>
    import El from '@ubeac/svelte/components/El/El.svelte'
</script>

<El tag="h1">Hello World!</El>

we should inevstigate more about tree-shaking and code splitting.

[TheHadiAhmadi]

also we have this warning after npm run build

[TheHadiAhmadi]

after build there is a large javascript file (287kb | 81kb compressed) which most of components are depends on it. we should check how we can reduce size of that file or see why components depends on it.

[pournasserian]

@pournasserian here is the results:

I wrote custom css for styles and css size is now ~2kb (tabler.css is 1.5mb right now and we should optimize it too).

after css, the main problem is large size of Javascript code. I tested multiple ways to reduce javascript size:

1- use html tags instead of El component:

<h1>Hello World!</h1>

2- use El component from @ubeac/svelte:

<script>
  import {El} from '@ubeac/svelte'
</script>

<El tag="h1">Hello World!</El>

• in above example browser also imports a file related to momentjs. (which we don't need in our page)

3- and finally import el directly from @ubeac/svelte/components/El/El.svelte

<script>
  import El from '@ubeac/svelte/components/El/El.svelte'
</script>

<El tag="h1">Hello World!</El>

we should inevstigate more about tree-shaking and code splitting.

Why the SEO rank is lower than initial screenshot? It was 100% before.

[TheHadiAhmadi]

Why the SEO rank is lower than initial screenshot? It was 100% before.

this is not the landing page. thhis page only shows 'Hello World!' in h1 tag.