DEV Community

Cover image for Get Top Lighthouse Scores By Hosting Your Static Site With Cloudflare
EngineeredLeader
EngineeredLeader

Posted on • Originally published at engineeredleader.com

Get Top Lighthouse Scores By Hosting Your Static Site With Cloudflare

We all know it's vital for your site to load as quickly as possible, both for user experience and search engine rankings. Lighthouse tells us: "Walmart found that for every 1 second improvement in page load time, conversions increased by 2%" showing page load optimization is potentially worth millions of dollars.

In this post, I'll show you how we can leverage Cloudflare's global network of edge locations to deliver your static site in under 0.3 seconds 🔥 The best part is: it's extremely straightforward to set up!

In less than 15 minutes, you will have lighthouse scores that look a lot like these! 🏎

Page Speed Scores All 100

What you need to get started 🏃🏻‍♀️

We will need a few things to get started:

  • A static site to host. I use a Nuxt (VueJS) site, but any site will work as long as it does not require server-side rendering (we can add this, it's just a bit more complex).

  • A Cloudflare project. You can sign in or register here. After signing up, you should be prompted to add a site by entering a domain name you own. The setup wizard will then guide you through setting up your site.

  • A Cloudflare API token. Visit this link and click "Create Token". Click "Use Template" next to "Edit Cloudflare Workers" to use a template that gives your API token the needed permissions. Then under "Account Resources" and "Zone Resources" select to include all. Finally, click through the continue buttons at the bottom until you are given your API token, copy this and store it somewhere safe for the next step!
    Cloudflare API Key Generation


  • Cloudflare's CLI tool (which they called Wrangler 🤠)

  npm i @cloudflare/wrangler -g
Enter fullscreen mode Exit fullscreen mode

This command will use npm to install the Wrangler CLI globally. Once installed, run

  wrangler config
Enter fullscreen mode Exit fullscreen mode

And, when prompted, enter the API token we generated in the previous step!

Building 🔨

We initialize our Cloudflare project by running the following command in our project directory.

wrangler init --site my-site-name
Enter fullscreen mode Exit fullscreen mode

This will create a wrangler.toml in your project, which stores all the configuration for our deployment. It should look similar to this

name = "my-site-name"
type = "webpack"
account_id = ""
workers_dev = true
route = ""
zone_id = ""

[site]
bucket = ""
entry-point = "workers-site"
Enter fullscreen mode Exit fullscreen mode

We need to enter the account_id, route, zone_id, and bucket.

For the account_id and zone_id you can simply copy them from your Cloudflare overview page.

Cloudflare Dashboard Showing

For route we want to append /* to our domain name, for example, example.com/*. This will tell Cloudflare that we want every route on this domain to use our hosted static site.

Lastly, for the bucket field we want to provide the directory that contains our static assets generated by our build command. This is the directory where our raw HTML, CS, and JS are stored. For me, this is ./dist but yours will most likely be different (./public and ./build are also popular).

The final step is a little bit of a quirk - we need to tell Cloudflare to resolve traffic visiting our domain to Cloudflare workers (where we are hosting our static site). We do this by adding an A record that points to a random IP, I recommend 192.2.0.1.

Cloudflare DNS Dashboard Showing A New

Deploying 🚀

Good news: this is the easy part! If you have followed all the previous steps correctly, you can simply run

wrangler publish
Enter fullscreen mode Exit fullscreen mode

To deploy your site to the world!

Automating this with CI 🤖

Now we have set everything up it is trivial to automate in our pipeline. Simply install the Cloudflare CLI like we did in this article and set your API key to an environment variable called CF_API_TOKEN.

Cloudflare also has integrations available with popular pipeline solutions which makes it even simpler! I use their integration with Github Actions available here.

How does this work? ⚙️

Cloudflare can deliver your content at lightning-fast speeds because the content is being served from an edge node, close to your user.

Traditionally, a website might be served from a central server or servers. However, this comes with some overheads, namely

  • The cost of servers
  • Managing and scaling servers
  • Users further from the server will take longer to download your site and so will have a worse experience

Here is a map of Cloudflare's edge locations, as of their blog in 2019

Cloudflare Edge Locations

As you can see, the vast majority of your site visitors will be close to an edge location and be able to fetch your site lightning fast. Additionally, all server management overhead is abstracted away, allowing you to focus on what differentiates your offering. 💯

Additional Resources 📚

Cloudflare has excellent documentation with specific examples and tutorials.

This kind of delivery is a core of the Jamstack. Read more about the Jamstack here.

Visit engineeredleader.com for the original article and to subscribe to the newsletter for more articles like this!

Top comments (0)