Popular HTTP Headers for Enhancing Performance

Hypertext transfer protocol (HTTP), the protocol on which the web relies, was introduced in 1991 as a way to handle the transfer of data between users and servers. In 2015, an updated version of the protocol known as HTTP/2 was established and accepted as the new standard, providing multiple improvements in performance and speed.

However, not all performance issues have been resolved under HTTP/2, making it sometimes necessary for webmasters and developers to implement additional code in the form of HTTP performance headers to ensure users have optimal website experiences. Improving user experience is essential for ecommerce and service sites because:

• 52 percent of consumers say fast load times influence brand loyalty.
• 64 percent of shoppers go to competitors if a site performs badly.
• 47 percent of users consider a load time of more than two seconds to be too slow.
• 40 percent of visitors abandon sites with load times exceeding three seconds.

In addition, Google takes page load times into account when ranking sites in organic search results. Slow loading means less visibility, less traffic, and fewer conversions. By using HTTP performance headers, you can take full advantage of the power of HTTP/2 to eliminate the factors slowing your site down and give every visitor a superior experience.

What are HTTP headers?

HTTP headers are pieces of code central to the requests browsers send and the responses servers make in the process of rendering websites. Browser, server and page information is transferred to deliver the content a user wants. These exchanges involve HTML, CSS, JavaScript and other elements essential to the look and feel of the website. Here's a look at what HTTP headers look like in Chrome DevTools:

Although you can't control what request headers visitors use, there are many HTTP response headers you can add on the developer side to help improve site performance. These response headers swap information with user request headers to deliver content in the most efficient way possible.

How HTTP headers improve site performance

Before HTTP/2 was introduced, headers were sent and received in an uncompressed format resulting in increased data transfer and longer wait times. However, HTTP/2 introduced HPACK compression which has been known to reduce the size of your headers by 30% on average. HPACK compression is running on all KeyCDN edge servers so if you're still not running your site over HTTP/2 let this be another reason to make the switch.

With that being said, putting the right headers in place impacts site performance by:

• Caching common elements to lower the burden on the network
• Minimizing the amount of content loaded from scratch during each visit
• Reducing the amount of data traveling between browsers and servers during page rendering
• Speeding up page load times
• Allowing your site to handle a higher traffic load without slowing down or crashing

Together, these improvements result in the kind of user experience designed to encourage engagement and prompt responses to CTAs. Visitors are more likely to stay on your site, browse what you have to offer and make purchases when key pages load quickly. They're also more likely to share their positive experiences with others, increasing exposure to your brand.

HTTP headers you should be using

Because site performance can have such a big impact on engagement, conversions and brand loyalty, your goal when incorporating HTTP headers is to ensure pages load as quickly as possible. Many of these response headers should be included by default with the configuration of your server. However, depending on your particular use-case, certain values can be tweaked to further improve performance.

Caching headers

Caching is the practice of storing unchanging scripts and page elements, known as static resources, on a cache server or local server to minimize delivery time after the initial rendering of a page. This content may include images, CSS, JavaScript, logos, and downloadable files. Caching these elements frees the server from having to send the same data each time a visitor arrives on a page and can make a significant difference in load times.

Headers directing caching include:

• Cache-Control - A common header used to set the length of time data should be cached, where cached elements are stored, whether the cache is public or private and whether a check should be made for updates before delivering cached data. Some directives to dictate Cache-Control actions include max-age, no-cache, no-store and must-revalidate. Read more about which directives are available and how to configure Cache-Control.
• ETag - Or known as an entity tag, these headers serve to identify requested resources so that only new data is downloaded in response to a request and cached data is used in all other cases. An ETag communicates whether a file contains new information or has been recently updated and should be loaded from scratch.
• Vary - The Vary header communicates specific content preferences to cache servers based on the request headers users have in place to distinguish between the need to deliver compressed or raw data.
• Expires - Used with Cache-Control, the Expires header sets an expiry date for content, indicating a time after which the cache should be considered outdated and a fresh version of content delivered instead.

Compression headers

Compressing data reduces file sizes to speed up transmission. HTTP headers directing this practice use resources at both server and client sides to compress and decompress data, often relying on the Gzip application. Compressed files can be up to 90 percent smaller than the originals, making compression headers powerful tools in the pursuit of better site performance.

Apart from Gzip, web developers should also look into using Brotli compression for even further size savings. This new compression method has been known to provide a 20-26% higher compression ratio when compared to Zopfli (another modern compression algorithm). As you'll see below, the Content-Encoding header defines which compression algorithm was used to compress the requested web assets. With Brotli enabled, the content-encoding header will look like this:

Use these common compression headers to reduce large data payloads:

• Content-Encoding - By interacting with the Accept-Encoding request header set in visitors' browsers, this header uses the preferred parameters to deliver compressed data.
• Vary - Employing vary as an agent for compression allows you to store different versions of content for fast retrieval and delivery. This header responds to the Accept-Encoding request on the client side.
• Content-Length - Used to determine the size of an asset. Certain proxy and caching servers use this header to determine whether or not it's worth compressing the asset itself.

It's important to note trying to compress small amounts of information may actually slow your site down if compression and decompression times exceed the time necessary to render the original data. That's why the Content-Length header is important to use. Furthermore, we require that the Content-Length header be present on your origin server in order to be able to cache the asset and have it return a HIT.

Keep-Alive

TCP, the protocol used most often when establishing and maintaining network connections, monitors the time it takes for packets of information to travel between servers and clients. Timeout intervals can be significant, slowing page load times by several seconds because no new packet requests are made until an initial request times out completely.

The Keep-Alive header maintains a single TCP connection to speed up the retransmission of lost or timed out data. This header is more relevant to HTTP/1.1 users as HTTP/2 users can reuse a single TCP connection for multiple asset requests. However, small improvements in delay times can still be realized between the loading of the first HTML request and subsequent assets which must be loaded based on the requirements of the HTML.

Monitoring site performance after optimizing

Properly implementing the right combination of HTTP headers should boost site performance, and watching your analytics is the best way to know where these changes have the biggest impact. Use your preferred analytics platform to look for:

• Increases in traffic from organic search indicating higher site rankings
• More repeat visits resulting in conversions
• Higher numbers of unique visitors spending longer periods of time on key pages
• Decreased bounce rates

In addition to these metrics, you can also measure the time to start render, which is the amount of time elapsing between when an initial request is sent from a visitor's browser and the moment content appears. Time to interact communicates how long it takes a page to load enough for a visitor to click on links or enter information in a text field, such as when responding to a CTA.

Summary

Because website performance is essential if you want a positive response from users, the use of HTTP headers has become a common practice when optimizing page load times. Whether you run an ecommerce site, provide a service or are trying to increase engagement with your content, you want visitors to stay long enough to follow through on intended actions and have a positive overall experience.

Experiment with different performance headers and monitor performance metrics to understand the impact of the changes. Stay informed about new updates/technologies, and keep an eye on how Google and other search giants adjust their ranking algorithms with regards to performance. When you do everything you can to improve the performance of your website, you can expect more traffic, higher conversions, and better user responses.