Static-web-apps: Allow setting expires headers, use browser caching and improve gtmetrics results

[Misiu]

I have a GatsbyJS site that I tested with Azure Static Web Apps.
I've tested both versions with GTMetrics.
On the left is the version using Azure Static Web Apps and on right my old version (running on Apache). Currently, the code on both sites is identical.

The biggest downsides are:

• browser caching
• expires headers
• cookie-free domains

my current webserver is running on Apache and I'm using gatsby-plugin-htaccess to generate .htaccess files.
what alternatives I should use for Azure Static Web Apps? If there are any available there should be mentioned in the docs.

I've noticed that the version on Azure Static Web App is 114KB bigger. Any ideas why?

[miwebst]

We are working on adding custom headers, you can see that in this issue: https://github.com/Azure/static-web-apps/issues/2

As for the increased size that does seem strange, could this be related to the type of compression? We dont have brotli support right now.

[Misiu]

@miwebst that might be brotli.
My current website is returning x-content-encoding-over-network: br but Azure Static Web Apps is returning x-content-encoding-over-network: gzip
When can we expect brotli? Is there an issue for that?

Looking forward to those customer headers :) they will address first two of my list, but what about cookie-free domains? Ideally, site hosted on Azure Static Web Apps should be all green on gtmetrics or at least better than standard Apache shared host.

[miwebst]

Hi Misiu,

To answer your questions:

1. Brotli support is on our roadmap, I dont have an ETA for you but hopefully this will be out soon :)
2. Cookie-free domains: unless you are using auth static web apps should be cookie free today, let me know if that is not the case
3. Custom headers: we have a preliminary option for this here: https://docs.microsoft.com/en-us/azure/static-web-apps/routes#default-headers - please let us know if you have feedback!

Note on custom headers: right now they are part of the routes.json file, we will most likely move to a general config file later on

[Misiu]

@miwebst thanks for the update.
I'll check cookie-free domains and custom headers right away.
Can I contact you directly? I can send links to both sites hosted in Azure Static Web Apps and on a classic host. They are 1:1 and I use them to compare performance using GTMetrics and other tools.

[Misiu]

@miwebst in my Gatsby project I'm using gatsby-plugin-htaccess.
It builds quite complex .htaccess file, this is part of it, that is responsible for cache-control:

# ----------------------------------------------------------------------
# | Expires headers                                                    |
# ----------------------------------------------------------------------

# This matches the settings described at: 
# https://www.gatsbyjs.org/docs/caching/

<IfModule mod_headers.c>
    <FilesMatch "\.(html|json)$">
        Header set Cache-Control "public, max-age=0, must-revalidate"
    </FilesMatch>
    <FilesMatch "\.(js|css)$">
        Header set Cache-Control "public, max-age=31536000, immutable"
    </FilesMatch>
    <Files sw.js>
        Header set Cache-Control "public, max-age=0, must-revalidate"
    </Files>
</IfModule>

How can I recreate the same functionality with Azure Static Web Apps routes.json? (specify header per file type)

On the right is the same website running on old Apache hosting, on right the website running on Azure Static Web Apps

As you can see in the above picture Expires headers are the main reason for such a low score.

[miwebst]

I see, for now we just added default headers that apply to all static content served. In the future we are planning to add this functionality so you can specify particular headers based on the route.

[Misiu]

@miwebst I hope it is a near future :)

[Misiu]

@miwebst any updates?
Is there a roadmap available for static web apps or a user-voice portal?

[miwebst]

There is currently not a public road map and these Github pages have been serving a little as a user-voice portal. There is also an official Azure App Service user voice page that you can create items on.

As for this specific issue, we need to change how our configuration file is designed to enable a more streamlined experience when editing the headers for a particular path. We are working on this but I dont have any updates right now.

[Misiu]

@miwebst any updates? This is one of two issues that is holding me back from using Azure Static Web Apps 😐

[miwebst]

So for transparency, we are working on revamping our config file experience to be more flexible. This work is nearly done and once we finish the documentation it will be live :) I expect this will finish by the end of the month.

What is the other issue holding you back?

[Misiu]

@miwebst thank you for reply :)
Really looking forward to this. If the format will be flexible I'm sure that soon a plugin for Gatsby will be created that will allow generating such files (similar to htaccess generator that already exists)

The second issue is with password protect, many users (including me) need a way to password protect entire website. I've already created an issue for that: https://github.com/Azure/static-web-apps/issues/94

[anthonychu]

@mkarmark Do you know if the new config file can handle this? (different headers based on file extension)

[Misiu]

@miwebst any updates on this issue?

[mkarmark]

@anthonychu The new config file does not currently support different headers based on file extensions though that is something we can work on supporting if there is a demand for it.

[miwebst]

@Misiu Sorry for the delay on this. We just launched the new config file. It has some breaking changes from routes.json but does have support for applying different headers based on different file types! https://docs.microsoft.com/en-us/azure/static-web-apps/configuration

[Misiu]

@miwebst thank you for the update! I'll definitely take a look and give this a try.