Logo of Blogologer

Deploy Next.js App on Vercel with a Custom Domain, add Cloudflare CDN, and achieve a Perfect Lighthouse Score

ansh-gujral-profile.jpg
Ansh Gujral
Updated:
Published:
How to Deploy a Next.js App on Vercel with a Custom Domain, Add Cloudflare Caching, and Achieve a 100 Lighthouse Score

Creating a fast-loading website is not a piece of cake. According to a study conducted by Tooltester, the average webpage load time on mobile is 8.6 seconds whereas it is 2.5 seconds on desktop. In this article, I will teach you how to achieve 0.2 seconds of load time on both mobile and desktop. Hard to believe right? As proof, I am sharing the screenshots of the website speed test I ran on the uptrends site speed test tool which is a network speed test website. Here are the screenshots of the performance report:

uptrends score for mobile, lighthouse optimisation
Load Time of 0.2 seconds on mobile (iPhone SE)
uptrends score for desktop, lighthouse optimisation
Load Time of 0.2 seconds on desktop

The website I am using as an example is the Next.js website template which is a very simple website and can get a good lighthouse score easily. But for complicated websites, CDN and good practices make the difference. Blogologer is way more complex than the Next.js website template and has a perfect lighthouse score on desktop and 99 lighthouse score on mobile on most of the pages. The best part here is there is no cost for deployment and enabling the Cloudflare CDN, it's absolutely FREE!

You will have to purchase a top-level custom domain as a prerequisite in case you dont have one. You can purchase a top-level custom domain from GoDaddy.

Setting Up the Website on Cloudflare

You can create a new account on Cloudflare if you don't have an existing account. Once you have created a new Cloudflare account or logged in to an existing account, visit the homepage.

add cloudflare domain, lighthouse optimisation
add cloudflare setup, lighthouse optimisation
select cloudflare website setup free tier, lighthouse optimisation
continue cloudflare domain activation, lighthouse optimisation

Updating the Name Servers

I will be explaining in detail how to update name servers on GoDaddy, In case you have purchased the domain from any other platform, you can go to the domain configuration on the platform and update the name servers from the settings. Here are the steps to update the name servers on GoDaddy:

add cloudflare domain and update name-server, lighthouse optimisation
add cloudflare domain and edit name-server, lighthouse optimisation
add cloudflare domain name server update confirmed, lighthouse optimisation

Creating a Project on Vercel

Create a Vercel account if don't have an existing one. If you have an existing account follow the below steps:

add new project on vercel, lighthouse optimisation
add new project on vercel import github repository, lighthouse optimisation
add new project on vercel deploy your project, lighthouse optimisation

Linking Domain with Your Vercel Project

Congratulations!!! Your project is live in production. Now it is time to configure the domain we purchased.

add new project on vercel setup domain, lighthouse optimisation
add new project on vercel add custom domain, lighthouse optimisation
add new project on vercel add domain settings, lighthouse optimisation

Adding DNS records on Cloudflare

Yeah, we are almost there! Our free deployment is set up. You need to go back to your Cloudflare dashboard, select your website, and select the website. Once selected, follow the steps below:

add DNS configuration on cloudflare, lighthouse optimisation

Type

Name

Content

CNAME

www

cname.vercel-dns.com

A

<your-domain>

76.76.21.21

add DNS configuration on cloudflare setup DNS records, lighthouse optimisation
verify DNS settings on vercel, lighthouse optimisation
configure https on cloudflare, lighthouse optimisation

Setting up Cloudflare Caching

Now, our free Vercel deployment and domain have been set up and working as expected. We need to enable caching on all the incoming traffic. Vercel also provided CDN caching but below are the reasons to prefer the Cloudflare CDN:

  1. Cloudflare CDN has better global coverage with more than 250 data centers scattered across the globe.
  2. Vercel CDN is edge-based and will get terminated and rebuilt if there is no traffic for a longer duration.
  3. Cloudflare provides features like DDOS protection and a Web Application Firewall (WAF) to protect your website from unwanted threats.

You can read about Cloudflare caching rules in detail to set up additional caching rules. Below are the steps to set up a basic CDN rules:

create cache rules on cloudflare, lighthouse optimisation
create cache rules on cloudflare select cache everything option, lighthouse optimisation
create cache rules on cloudflare add caching configuration, lighthouse optimisation
Configuration for the Caching rules

Testing the Website's Performance

Before we should be testing the website's performance, we have to verify in case the caching is working as expected. Follow the below steps to validate the cache headers.

If you dont get the value HIT, you can reload to verify. If you still donot get the expected value even after the reload, you can revisit the Cloudflare caching and verify the set up.
check caching on browser using the dev-tools, lighthouse optimisation

Conclusion

We are done with the entire setup. Thanks for holding up so far. Now it's time to run a page speed test. We will check the lighthouse score on Google's Pagespeed Insights tool. You can enter the website URL in the input bar and click the Analyze button. I have tested the results. Sharing the screenshots of a perfect lighthouse score below:

check desktop lighthouse score, lighthouse optimisation
Lighthouse score for desktop, straight 100s
check mobile lighthouse score, lighthouse optimisation
Lighthouse score for mobile, 99 in performance

To be very candid, the score with and without Cloudflare caching would be comparable as the template website is simple and doesn't consist of many features. You would only be able to know about the true power of the CDN caching once you test it for a full-fledged website. I will also release how to improve the lighthouse score on the existing websites soon. Feel free to check how to set up a custom server in Next.js

Frequently Asked Questions

What is a Lighthouse score?

A Lighthouse score is a performance metric that measures a website's speed, accessibility, and SEO. A perfect score of 100 indicates optimal performance.

Why use Cloudflare CDN with Vercel?

Cloudflare CDN offers better global coverage, persistent caching, and additional security features like DDOS protection and WAF, enhancing your website's performance and security.

How long does it take to update nameservers?

Nameserver updates typically take 30 minutes to 1 hour, but can sometimes take up to 24 hours to propagate fully.

Is this setup free?

Yes, the setup of the deployment on Vercel and Cloudflare CDN is free. You only need to purchase a domain name.