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.
Add Expires Headers
What are Expires Headers?
What is Browser Caching?
Expires Headers Explained
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.
How to Add Expire Headers
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.
Expires Headers: Final Thoughts
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.
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.