The Past, the Present, and the Future of Our Website
A corporate website is just as important as a product to a company. To DANA, its website is more than just an official online presence, but also as an extension to reach out to their users and the people. After all, DANA aims for digital transformation in the nation.
Other than being always available, we also want to deliver the best experience to the people and our user that are learning about DANA through our website. We aimed and delivered the best experience with upgrading our website with Nuxt.js and GraphQL.
1. The Past
Our website initially was built on Laravel Blade template with Vue components fetching data via REST API served on top of it. Initially, we thought this is enough for our website, but as time goes, more and more was added to it and our website’s performance took a tank. We are quick to blame the video background on our website to be the main culprit, but soon after our first Lighthouse test, we realize that there is more than one problem. We tried and applied every optimization we could think of such as removing unused CSS class for smaller CSS file size, optimizing our image assets file sizes with TinyPNG, implementing lazy load with lazysizes, adding embedded video deferring, and pre-connecting our site to the CDN and its API endpoint. Yes, we saw improvement on our website’s Lighthouse score, but that’s not enough for us and we want the best for the users and this is nowhere near the best.
We are desperate for a change, and that change was imminent.
2. The Present
After our research, we decided to split our website’s front end with its back end. Choosing Nuxt.js as the new stack for the face of our website and implementing GraphQL for fetching data that were needed from our Laravel back-end.
Nuxt.js is just what we are looking for, server-side rendering and then client’s JavaScript bundle taking over, allowing the Vue.js app to hydrate.
We also found out that our REST API contributed to our poor performance in such a way that not all the data that was sent from the back-end was needed or ever used.
Aiming to solve this issue, we switched to GraphQL for its key feature; ask for what you need, get exactly that. Requesting the data that we only need from back-end is as easy as an afternoon stroll, and the number of requests made to API was lowered a lot, increasing our back-end’s load capacity.
We can improve our fetching process further by configuring the fetch policy of @nuxtjs/apollo in nuxt.config.js .
Looking back at our back-end system, we don’t just leave it as it was. We are keen on keeping Laravel as our back-end system because of its great community support and kind of our personal legacy from maintaining our own back-end project as of most of our website's developer actually have a very minimum background on the back-end, thus we upgraded from Laravel 5.8 to Laravel 8 for more feature like improvements on Eloquent and better optimization. We also add GraphQL support to our Laravel project using Lighthouse PHP.
After three months of hard work rebuilding our front-end by moving our codebase from Laravel and Vue.js to Nuxt.js and overhauling our back-end by creating support for GraphQL, we are ready to deploy our website.
Voila, not only does our Lighthouse score is increased, but our FCP (First Contentful Paint) was improved significantly, from 3.0s to 0.3s and the website does feel snappier and quicker than before.
3. The Future
Aside from keeping delivery of new contents or feature for our website, it becomes our top priority to ensure the upmost best experience for people that are surfing our website and we aim to reach the minimum 90 Lighthouse scores soon. We promise to try more approach for improving our website including from non-engineering side. These all shall be looked upon shortly.
Disclaimer: The first test is taken with Lighthouse V5 on the 30th of June 2020. The second test is taken with Lighthouse V6 on the 18th of December 2020. The scores comparison may not be one to one but the other metrics still be valid.
Resources
- Nuxt.js (https://nuxtjs.org/)
- GraphQL (https://graphql.org/)
- Apollo module for Nuxt.js (https://github.com/nuxt-community/apollo-module)
- Vue Apollo (https://apollo.vuejs.org/)
- Laravel (https://laravel.com/)
- Deferring videos (https://isotropic.co/how-to-defer-parsing-of-javascript-for-youtube-embeds/)
- Preconnect and DNS Prefetch (https://web.dev/preconnect-and-dns-prefetch/)
