How I built a High-Performance Jamstack website with nuxt js

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 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 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