# Optimize Loading Speed



Surface forms load fast already. To cut the wait further, tell the browser to
prepare its connection to
[forms.withsurface.com](http://forms.withsurface.com/) ahead of time, so the
form is ready the moment it is triggered.

## How to Optimize [#how-to-optimize]

Add the following `<link>` tags inside the `<head>` of your site:

```html
<!-- Speed up connections to forms.withsurface.com by performing early DNS resolution and TCP handshake -->
<link rel="dns-prefetch" href="https://forms.withsurface.com">
<link rel="preconnect" href="https://forms.withsurface.com" crossorigin>

<!--  Fetch the form in advance, so it's ready when a user opens it. -->
<link rel="prefetch" href="REPLACE ME WITH FORM URL" as="document">
```

<Info>
  Replace `REPLACE ME WITH FORM URL` with a Surface Form URL.
</Info>

<Info>
  If the form uses a custom domain, replace `forms.withsurface.com` in the connection hints with your verified domain. See [Use the Surface Tag with a Custom Domain](/platform/traffic/custom-domains).
</Info>

## Explanation [#explanation]

1. dns-prefetch → Resolves the domain early to skip DNS lookup delays.
2. preconnect → Prepares the TCP + TLS handshake so the browser is ready to request assets immediately.
3. prefetch → Fetches the form in advance, so it's ready when a user opens it.

## Where to Paste It [#where-to-paste-it]

These are `<head>` tags, so they go wherever your platform puts head code.

<Tabs>
  <Tab title="Webflow">
    **Project Settings** → **Custom Code** → **Head Code**.
  </Tab>

  <Tab title="Framer">
    Project **Settings** → **Custom Code** → **Start of `<head>` tag**.
  </Tab>

  <Tab title="WordPress">
    [WPCode](https://wordpress.org/plugins/insert-headers-and-footers/) →
    **Code Snippets** → **Header & Footer** → **Header**.
  </Tab>

  <Tab title="Next.js">
    `app/layout.tsx`, inside the `<head>` of the root layout.
  </Tab>

  <Tab title="React">
    `public/index.html`, inside `<head>`.
  </Tab>

  <Tab title="Unbounce">
    Bottom toolbar → **JavaScript** → **Add New JavaScript*&#x2A;, placement
    &#x2A;*"Head"**.
  </Tab>

  <Tab title="HTML">
    Inside `<head>`, on every page that shows the form.
  </Tab>
</Tabs>
