How I built a High-Performance Jamstack website with nuxt js
Tags: nuxt, ghost, jamstack, staticwebsite
Published: 2020-11-19 17:17:30

###About me
I’m a Fullstack developer with more than 7 years of well-rounded experience in managing all facets of site development from scratch development to cloud deployments using Google Cloud Platform

###The problem I wanted to solve

After running a detailed analysis of the existing website, which was developed in Gatsby. Our team has identified the following areas to improve the website performance

###Areas:
1. Excessive loading of the javascript
2. Efficient utilization of network utilization
3. Image optimization
4. Reducing webpack bundle sizes and making lazy load chunks
5. Avoid using larger CSS files
6. Not Using a Content Delivery Network (CDN)
7. Effective usage of caching the pages

### Information About the website I'm going to migrate?
Family Owned & Operated Company Serving Our Community:

When you need accomplished and trained heating and AC technician, or plumber in Las Vegas, you can count on our team here at [Hawthornephc](http://hawthornephc.com) Plumbing, Heating, & Cooling. For more than 15 years, we have proudly helped our neighbors throughout the Las Vegas Valley stay comfortable in their homes and businesses.

No matter which of our services you need, you will be helped by an experienced, trained, and polite technician. We understand there are many companies with technicians who might be greedy, rude, sloppy, and might not even show up on time. Our team is here to help you with a high level of service.

###Tech stack
1. Nuxt JS
2. Bootstrap
3. Ghost CMS
4. Google Analytics
5. Sentry (Error Tracking)
6. Gohighlevel (Marketing Automation Tool)

###The process of building How I built a High-Performance Jamstack website
We started refreshing the website migration with the existing design and started focusing on the areas to improve:

###Excessive loading of the javascript:
1. Changed the loading of the scripts from synchronous to asynchronous. This will prevent from renders blocking javascript and will allow the page to load separately.
2. Defer the javascript till the dom content got painted and visible to users

###Efficient utilization of network utilization:
1. Lazy Loading of images will improve the network utilization and improve the performance
2. Lazy Loading of webpack bundle chunks

###Image optimizations:
1. As the images are larger in size, will affect the loading of the web page. We used the image optimization plugin to reduce the image size without losing the quality of the image.
2. We added height and width for the image this will allow loading the specific dimension based image from the network

###Reducing webpack bundle sizes and making lazy load chunks:
Reduced the size of webpack generated bundles and loading them in a lazyload way is a great performance improvement step we achieved as part of the [Hawthornephc](http://hawthornephc.com) migration project.

###Avoid using larger CSS files:
1. Prevented using of large CSS files and converted to component inline CSS in nuxt js
2. Removed all the inline CSS from the files
3. Reducing the expensive heavy dom selectors

###Not Using a Content Delivery Network (CDN):
Cached the static assets with CDN. It improves the loading of the webpage without any delay.

###Challenges I faced
1. Preventing duplicate metadata for static generated pages
2. Efficient way of generating the app in production with configuration
3. Minimizing the website initial load