An online sql editor made with nuxt, vuetify, nuxt-content and highlight.js for syntax highlighting.
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generateFor detailed explanation on how things work, check out Nuxt.js docs.
I have tested page load time using lighthouse in google chrome. I have done the following things to optimize page performance.
- Added treeshaking for Vuetify modules, so that we only import the code for the components that we are using.
- Removed loading of default icons from Vuetify and used the @mdi/js module to only import icons that we need.
- Added nuxt-purgecss to remove unwanted css
- Lazy loading Vue components to reduce the initial bundle size.
Below are results for various matrices before and after optimizations.
| Item | Before | After |
|---|---|---|
| FCP (First Contentful Paint) | 562 ms | 561 ms |
| SI (Speed Index) | 1,282 ms | 1,269 ms |
| LCP (Largest Contentful Paint) | 707 ms | 718 ms |
| TTI (Time to Interactive) | 823 ms | 719 ms |
| TBT (Total Blocking Time) | 6 ms | 4 ms |
| CLS (Cumulative Layout Shift) | 0.00 | 0.00 |
Screenshot:
| Item | Value | After |
|---|---|---|
| FCP (First Contentful Paint) | 2,124 ms | 1867 ms |
| SI (Speed Index) | 5,219 ms | 3,581 ms |
| LCP (Largest Contentful Paint) | 3,044 ms | 2,693 ms |
| TTI (Time to Interactive) | 3,569 ms | 2,919 ms |
| TBT (Total Blocking Time) | 330 ms | 201 ms |
| CLS (Cumulative Layout Shift) | 0.02 | 0.02 |
Screenshot:
