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:
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.
- After visiting the home page, select the Websites option from the left side menu.
- Click on Add a Domain button as mentioned in the screenshot below
- Enter your domain name (the one purchased from GoDaddy) and click the Continue button. Make sure you have entered the Root Domain
- After following the above steps, you will reach the DNS Settings step, we can skip the settings for now and click Continue to Activation Button. We will set up the DNS configuration later on. In case you are not redirected to the step directly, you can select the default settings and reach this step.
- Copy both the name servers and click the Continue button.
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:
- Click on your Username in the header to open the dropdown. Select the Products option.
- You will get the list of all the domains purchased. Select the domain of your choice. After that, click on the DNS Settings button.
- You will get navigated to the DNS management panel for the domain. Select the Nameservers option from the tab menu and click the Change Nameservers button.
- Edit Nameservers modal will pop up. Select I'll use my own nameservers radio button. Add the nameservers you copied from Cloudflare and paste them as mentioned in the image below. Click the Save button.
- Once the GoDaddy nameservers are updated, navigate back to your Cloudflare dashboard. It usually takes 30mins-1hr to get the nameservers updated. It can also take up to 24 hours in some cases.
- Once the nameservers are updated on Cloudflare, you will get a confirmation email, and your domain configuration will show as active as mentioned in the image below.
- Click the Activate button and activate all the suggested settings. (Optional but recommended)
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:
- Click on the Add New dropdown and select the Project option.
- Import Git Repository modal will open, search for your repository. If you don't have any repository setup, you can clone the repository getting used for this tutorial, or you can create a new Next.js project using the below steps:
- Open up your terminal and execute
npx create-next-app@latest your-project-name
- Select all the default options and push the repository on GitHub.
- Open up your terminal and execute
- Once your repository is ready, search for the repository and click the Import button.
- After importing the repository, you will be redirected to the Configure the Project step. You can keep the default settings and click the Deploy button.
Linking Domain with Your Vercel Project
Congratulations!!! Your project is live in production. Now it is time to configure the domain we purchased.
- Once the deployment is live on Vercel, you will automatically get redirected to the page where you can set up the domain by clicking the Add Domain button as mentioned below. Otherwise, you can navigate to the project settings and configure the domain.
- Once clicked on the Add Domain button, you can type your domain in the search menu and click the Add button.
- One modal will pop up, you need to select the recommended settings and click the Add button.
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:
- Click on the DNS Records button on the right sidebar.
- There would be a few existing records in the DNS records table, you can click on the Edit button for every row and delete it. In short, you delete all the DNS records. Once deleted, you can add the below records
Type | Name | Content |
---|---|---|
CNAME | www | cname.vercel-dns.com |
A | <your-domain> | 76.76.21.21 |
- I am also sharing my DNS records to avoid any confusion
- Once the records are added, you will observe the domains are automatically verified on your Vercel dashboard's project settings shown below:
- Once set, only one step remains i.e. setting up HTTPS. Select the SSL/TLS option from the left side menu. Under the overview option, select the Full (Strict) radio button and click the Save button.
- Awesome, your domain is ready and set up with HTTPS configuration, your website will work seamlessly on the configured domain.
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:
- Cloudflare CDN has better global coverage with more than 250 data centers scattered across the globe.
- Vercel CDN is edge-based and will get terminated and rebuilt if there is no traffic for a longer duration.
- 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:
- Select the Caching menu from the left side menu under your website settings. Under the Caching menu, select the Create Rules options. Click the Create Rules button.
- You will get the options of automated caching rules templates, you can select the template mentioned in the below image.
- You can add the configuration as mentioned in the below settings and click the Deploy button.
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.
- Open the configured domain in your browser.
- Right-click on the website and select the Inspect option. The browser's dev tools will open.
- Select the network tab from the dev tools and select the initial request. Select the Headers option and scroll to the Response Headers. Inside the headers, there would be
Cf-Cache-Status
. We need to ensure its value should beHIT
.
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.
- I am sharing the dev tools screenshot so that you can verify the headers.
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:
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