Add Expires Headers

Web page load speed is a huge factor, not only for SEO (Search Engine Optimization) purposes, but also for the user experience. Having to wait for assets and content to load on a page is frustrating for anyone, but today’s users expect pages to load within a few seconds. If not, they are quickly left frustrated and will leave your page to find what they were looking for somewhere else. Expires headers are one way to help increase page load times, but before we talk about what expires headers are, we need to touch on browser caching. One way to increase web page load speed is to implement a type of browser caching. If you have ever run one of your pages through a website speed test tool, you may have seen a recommendation suggestion that tells you to implement a browser caching policy.

Browser caching provides a way for web developers to tell the browser to save certain files to a user’s browser, like images, such as company logos, background images, etc., so they do not have to be downloaded again on repeat visits. However, you can use browser caching on HTML (HyperText Markup Language), JavaScript, CSS (Cascading Style Sheets), etc. Any part of a web page can be cached, however, it is best practices to only cache assets that are not going to change often. You can see browser caching for yourself by visiting one of your most frequented sites and watching how quickly it loads. Next, clear your cache. Once you have cleared the cache, see how the page load speed time compares without content cached and compare it to your initial visit. Determining what assets to cache is entirely dependent on the needs of the business and the site itself. However, images typically tend to stay static for extended periods of time, so by implementing browser caching for specific images, you remove the download requirement, and reduce the page load time.

Now that we have discussed browser caching a bit, let us get back to expires headers. Essentially, expires headers determine the length of time an asset is cached. Expires headers are one of the types of HTTP (Hypertext Transfer Protocol) headers used to indicate to a user’s browser whether they are going to be served an asset from their local browser cache or whether the asset needs to be downloaded fresh from the server again. For example, if we use the example of images on a web page, you can control the browser caching for specific images by setting the expires headers. Images tend to stay static for longer periods of time, so a common expires header for images may be 30 days, or longer in some cases. So, if we set the expires header to 30 days from the current date, it tells the browser to serve the downloaded version of images for 30 days after the page has been accessed. Once those 30 days have passed, the images must be downloaded again from the server. For components that will not change, you can simply set them to not expire. For components that may change regularly, set short expiration dates.

Like we mentioned previously, the goal of setting the expires headers is to reduce not only the number of downloads from the server, but also to reduce the amount of HTTP requests to the web server. Early web pages consisted of a handful of images and some text. Today’s websites are complex and dynamic, consisting of many third-party assets, high-resolution images, and script files. The cumulative effect of loading each of these assets can add up to a longer load time, which again, affects the user’s perception of how the page is loading. All the little things add up to a lot. And that is not a good thing when you want to keep a visitor on your page and engaged in your offerings.

The important thing about today’s modern web development frameworks is that they now make implementing expire headers a straightforward process. And in some cases, if you are using a Content Delivery Network (CDN), it may already be enabled for you. Out of sight, out of mind. But it is always good practice to make sure the expires headers are working on a regular basis, so make sure to run tests to ensure that everything is operating as expected. Furthermore, Content Management Sytems (CMS), like WordPress, provide a user-friendly way of managing expires headers with an intuitive plugin. Simply point and click what elements, like specific image files, video files, audio files, fonts, and text, and input the expiration time in days.

If you are using a web server, like Apache HTTP Server or Nginx Web Server, adding the expires headers may take a little more manual effort by accessing and editing the server’s configuration files. For a novice, this may seem like a daunting and dangerous task, however, there is plenty of support and documentation articles to help assist with implementing expire headers properly within your specific environment.

Adding and configuring your expires headers may seem like an arbitrary task, but it is an extremely key factor for SEO. While more modern options, like the cache-control header, may provide better flexibility for today’s websites, expires headers is still a great option to managing caching, and it can be used simultaneously with the cache-control header. Web performance is a continuous process. Taking the time to properly configure the expires headers for the appropriate content will provide for better page performance and enhance the user’s experience with your pages.