103 Early Hints in Go, or the new Way of How to Improve Performance of a Web Page written in Go

Alex — Mon, 14 Nov 2022 19:40:21 +0000

Since Go 1.19 we can use a new 103 (Early Hints) http status code when we create web applications. Let’s figure out how and when this could help us. We are going to create a simple golang web server that servers some html content. One html page will be served with 103 header and another one without. After loading comparison we will see how early hints can improve page performance.

Early hints is a special HTTP header that is sent before the web server sends the final HTTP response to the client. At this moment it’s supported only by Chrome browser. As soon as the browser requests a page, server immediately returns 103 early hints header. In the meantime, a server will generate a usual HTTP response. This helps us utilize in maximum the loading time by letting browser know what resources it should preload while waiting for the final response from a server.

Enough theory, let’s write some code :)

First, I’m going to create an index.html with some dummy structure. Also, I will load bootsrap frontend framework to simulate some heavy css and js references during page load.

<html>
  <head>
    <title>Hello!title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  head>
  <body>
  <div class="p-2 bg-success">
    <h1 class="text-white">Hello!h1>
  div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">script>
  body>
html>

Now we need to serve it. Let’s create a server.


//go:embed index.html
var index string // embeded index.html

func main() {
	log.Println("Starting server...")
    // Handler for the page without early hints.
	http.HandleFunc("/1", noHintsHandler)
    // Handler for the page with early hints
	http.HandleFunc("/2", withHintsHandler)
	if err := http.ListenAndServe(":8082", nil); err != nil {
		log.Fatal(err)
	}
}

func noHintsHandler(w http.ResponseWriter, r *http.Request) {
	t := template.New("")
	t, err := t.Parse(index)
	if err != nil {
		log.Println(err)
	}
	t.Execute(w, nil)
}

func withHintsHandler(w http.ResponseWriter, r *http.Request) {
    // Adding headers with preload information for bootstrap.min.css and bootstrap.bundle.min.js
	w.Header().Add("Link", "; rel=preload; as=style")
	w.Header().Add("Link", "; rel=preload; as=script")
    // Sending 103 status code.
	w.WriteHeader(http.StatusEarlyHints)

    t := template.New("")
	t, err := t.Parse(index)
	if err != nil {
		log.Println(err)
	}
    // Sending 200 status code.
	w.WriteHeader(http.StatusOK)
	t.Execute(w, nil)
}

Now it’s time to see our pages in action! Run our server go run main.go, open the page without early hints http://localhost:8082/1 in Chrome, open inspector, go to Lighthouse tab and click on “Analyze page load” button. And this is what we can see: It takes a while until bootstrap resources got loaded by a browser. As result, FCP (First Contentful Paint) is 1492,8ms.

Now, let’s do the same for the page with the early hints http://localhost:8082/2 And this is a result: As you can see, the page loaded much faster now. Bootstrap dependencies (bootstrap.min.css and bootstrap.bundle.min.js) were preloaded in the beginning and FCP now is 437,8ms. More than 3 times faster, quite an impressive result!

However, it does not mean that you have to preload absolutely all resources now. Just try to experiment with these things, see how it affects your page performance and decide for yourself the right balance.

You can find the source code here.

If you want to measure the difference on your own service rather than take my numbers for it, an easy way to load test your web apps shows the setup I use. And for the wins that happen before the request even reaches your handler, have a look at how to make Nginx cache cookie aware.

Web Vitals on WebDevStation

103 Early Hints in Go, or the new Way of How to Improve Performance of a Web Page written in Go