How can I tell if my vercel.json file is being picked up by my site?

Help
1

So I tested my site https://jamiecropley.ai here Website Speed Test | Pingdom Tools and it says expires headers and gzip is not being picked up on my site, and I can’t find it in inspector in Chrome browser either the following information from my vercel.json file:

{
  "headers": [
    {
      "source": "/(.*)\\.(jpg|jpeg|png|gif|ico|svg)$",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/(.*)\\.(css|js)$",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=2592000"
        },
        {
          "key": "Content-Encoding",
          "value": "gzip"
        }
      ]
    },
    {
      "source": "/(.*)\\.(html)$",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=604800"
        },
        {
          "key": "Content-Encoding",
          "value": "gzip"
        }
      ]
    }
  ]
}

Firstly, is my vercel.json file correct? Can I trust what that site is saying? How can I validate my vercel.json file overall in respect of gzip and Expires headers?

2

Hi there,

I think what you are trying to achieve is:

"source": "/(.*).(jpg|jpeg|png|gif|ico|svg)",

The compression on Vercel will be based on the Accept-Encoding header sent in the request, if the header specifies brotli (br) is supported it will be used over gzip. Unfortunately you cannot setup custom Content-Encoding header at this point. While double-compressing the file is one way to add the header, it’s the wrong way and makes performance worse. (the browser will natively decompress our second compression, but then JS will still need to decompress the inner compression)

1 Like
3

OK so your advice fixed all my issues.

This is now my updated vercel.json file incase anyone else wishes to see:

{
  "headers": [
    {
      "source": "/(.*).(jpg|jpeg|png|gif|ico|svg)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/(.*).(css|js)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=2592000"
        }
      ]
    },
    {
      "source": "/(.*).(html)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=604800"
        }
      ]
    }
  ]
}

One thing I have noticed I think this https://tools.pingdom.com/ tool does not check for Brotli I believe?

“The compression on Vercel will be based on the Accept-Encoding header sent in the request, if the header specifies brotli (br) is supported it will be used over gzip. Unfortunately you cannot setup custom Content-Encoding header at this point. While double-compressing the file is one way to add the header, it’s the wrong way and makes performance worse. (the browser will natively decompress our second compression, but then JS will still need to decompress the inner compression)”

I was not to sure what was meant from this.

Am I right to presume at this point my site is using brotli compression by default on vercel therefore its not being picked up on that tool? I tried other tools and it says its there, brotli compression that is e.g. on GZIP Compression Test | GiftOfSpeed

4

Only certain MIME types support Compression. If you test https://www.jamiecropley.ai/css/main.min.css against tool like Brotli Test - Verify Brotli Compression Support | KeyCDN Tools, it should show you.

1 Like
5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.