{"id":29626,"date":"2021-09-11T17:00:56","date_gmt":"2021-09-11T15:00:56","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29626"},"modified":"2021-09-10T14:51:23","modified_gmt":"2021-09-10T12:51:23","slug":"wordpress-add-expires-headers","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-add-expires-headers\/","title":{"rendered":"How to Add Expires Headers in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you ever ran your WordPress website through a website speed test, you likely saw the recommendation to \u201cadd Expires Headers\u201d. This represents just one of the many methods you can employ to optimize your website speed and reduce the server load. As useful as it is, this method isn\u2019t commonly known or used, and we\u2019re here today to change that.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll shed more light on the topic of the WordPress add Expires Headers. We believe more WordPress users of various knowledge levels and backgrounds should be aware of what it is and how it is implemented. So, without further ado, let\u2019s dive in and begin answering the following questions:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-expires-headers-and-how-are-they-used-in-wordpress\">What are Expires Headers and how are they used in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-expires-headers-using-a-wordpress-plugin\">How to add Expires Headers using a WordPress plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-expires-headers-using-custom-code\">How to add Expires Headers using custom code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-expires-headers-and-how-are-they-used-in-wordpress\"><\/a>What are Expires Headers and how are they used in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]When a visitor comes to your website for the first time, copies of specific files like image, CSS, or JavaScript files are downloaded and stored inside their browser\u2019s cache. Then, on every subsequent visit, instead of downloading those files again, the cached versions are used. <strong>This boosts the overall website loading speed.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The server that provides those assets decides how long the cached versions of the files should be used. Once the set period expires, the browser will download the newer versions of those assets and store them in the cache once more. This is referred to as the <strong>server\u2019s caching policy.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Expires Headers<\/strong> is an HTTP header that<strong> helps implement that caching policy<\/strong>. More precisely, they allow you to specify the precise duration for keeping a resource, or a specific resource type, before it expires and needs to be downloaded again. For more control over the process, you can also specify different expiration durations for different file types.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, keep in mind that this will not improve the website speed during the initial website load. Instead, it will improve it on each subsequent visit by reducing the number of HTTP requests going to the server.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When adding Expires Headers in WordPress, you need to <strong>consider which files should be cached and for how long<\/strong>. Generally speaking, you should set expiry durations for resource types that correspond to the amount of time those resource types wouldn\u2019t be changed.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>For assets that hardly ever change<\/strong>, like images, it\u2019s generally recommended to add <strong>an expiration time of one year<\/strong>. This applies to most websites, except e-commerce ones, as they are more likely to change their images frequently. On the other hand, <strong>for CSS and JS files<\/strong>, you should aim at setting that period to one month.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the section below, we will explain how to set the Expires Headers with expiration durations that apply to most websites. Also, you should know that there is another, more modern, technique called Cache-Control. It allows you to set a more flexible set of caching directives. However, as web servers treat the two equally, we will focus on the Expires Headers method in this article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to add Expires Headers in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that you have a better idea of what Expires Headers is, let\u2019s examine how it can be implemented. This process involves making slight adjustments to the configuration file of your server, and we\u2019ll take you through the steps for that below. As doing this manually may prove challenging for less experienced WordPress users, we\u2019ll also include some WordPress plugins. Using them, you can perform this task with minimal effort.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"how-to-add-expires-headers-using-a-wordpress-plugin\"><\/a>Using a WordPress plugin<\/h3>\n<p>[\/vc_column_text][vc_column_text]One of the many benefits of WordPress as a CMS is the abundance of useful plugins. So, it\u2019s relatively easy to find a plugin that focuses on adding Expires Headers while browsing <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noopener\">the WordPress plugins directory<\/a>. You can also look for plugins that have a broader scope, such as leverage browser caching, caching, or website optimization in general.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will showcase two plugins that help you implement Expires Headers. One is specifically designed for this purpose, and the other is a well-known caching plugin that includes this feature.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Add Expires Headers<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first plugin we\u2019ll cover, <a href=\"https:\/\/wordpress.org\/plugins\/add-expires-headers\/\" target=\"_blank\" rel=\"noopener\">Add Expires Headers &amp; Optimized Minify<\/a>, is more specialized for this purpose. It is a freemium plugin for adding expiration time to your internal resources and for minifying your files. The free version allows you to set precise and differing expiry dates for the cached resources coming from your server, as well as to merge, minify, or inline CSS files. The premium version of the plugin allows you to add expiry duration to external resources as well.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, this plugin allows you to set other caching-related improvements like unsetting ETags and Gzip compression. You\u2019ll also be able to merge, minify, and defer JS files, as well as minify HTML to improve the overall website load.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will focus on adding an expiry duration to internal resources. So, if you\u2019re not decided on the plugin, you can do this with the free version.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To start, <strong>navigate to the Add Expires Headers &gt; Add Expires Headers section<\/strong>. Then, in the left section of the main screen, you will notice five tabs from your position in the first one (Cache Settings). <strong>From this first tab, you will be able to specify the expiry duration for each resource type as they are displayed in separate sections.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Furthermore, you will be able to check or uncheck the exact resource types or even resource sections that you don\u2019t need to apply the Expires Headers for. This provides an extra layer of control over the caching feature.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"569\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cache-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Cache Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cache-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cache-Settings-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cache-Settings-768x451.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cache-Settings-620x364.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>After selecting the resource types that you want to add Expires Headers to,<\/strong> and after <strong>setting the exact number of days, press the <em>Submit<\/em> button<\/strong> at the bottom, to apply your desired settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"699\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-1.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-1-300x216.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-1-768x554.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-1-620x447.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>W3 Total Cache<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The other plugin we will showcase is more versatile, as it focuses on website optimization in general. That plugin is <a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener\">W3 Total Cache<\/a>. It is another freemium plugin that comes with a wide array of options, which are caching and minification-related. Most of the options are available within the free version of the plugin. However, the premium version offers features like fragment and REST API caching, lazy loading for Google Maps, WPML caching extension, and premium support, among others.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Again, if you\u2019re not sure this is the plugin for you, the free version has all the features we need, so you can try it out. It offers several browser caching-related methods like Cache-Control, Expires Headers, and ETags. We will be focusing on the Expires Headers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To start, <strong>navigate to the Performance &gt; Browser Cache section<\/strong>. Then, within the General subsection on the right, <strong>locate the <em>Set expires header<\/em> option. Tick this option,<\/strong> and it will apply the Expires Headers with the values that are predefined within the plugin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/W3-Total-Cache.jpg\" class=\"attachment-full size-full\" alt=\"W3 Total Cache\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/W3-Total-Cache.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/W3-Total-Cache-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/W3-Total-Cache-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/W3-Total-Cache-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"how-to-add-expires-headers-using-custom-code\"><\/a>Using custom code<\/h3>\n<p>[\/vc_column_text][vc_column_text]Another way to apply the WordPress add Expires Headers method is by editing the configuration file on your server. So, if you want more control over the settings, you can skip using a plugin, and opt for custom code as a way of adding Expires Headers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As the steps will differ based on <strong>whether you\u2019re using an Apache or Nginx server<\/strong>, you will first need to figure out which of the two is used by your website. The easiest way to figure this out is by<strong> asking your hosting provider<\/strong>. Otherwise, you can <strong>inspect your website<\/strong> using the developer tools of your browser, which we will explain below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, <strong>open one of your website\u2019s pages<\/strong> and<strong> right-click on any part of that page<\/strong>. Then, <strong>select the <em>Inspect<\/em> option<\/strong> from the menu that opens.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-the-Server-Type.jpg\" class=\"attachment-full size-full\" alt=\"Inspecting the Server Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-the-Server-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-the-Server-Type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-the-Server-Type-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-the-Server-Type-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the developer tools of your website and position you within the <em>Elements<\/em> tab, over the element you right-clicked on. <strong>Switch to the <em>Network<\/em> tab<\/strong> and <strong>make sure that <em>All requests<\/em> are shown by choosing the corresponding filter.<\/strong> If you don\u2019t see any requests at the bottom,<strong> press Ctrl + R<\/strong> to reload the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-Network.jpg\" class=\"attachment-full size-full\" alt=\"Inspecting Network\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-Network.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-Network-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-Network-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspecting-Network-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>locate the request that displays the URL of your website from the <em>Name<\/em> section<\/strong>. After<strong> clicking on it<\/strong>, its <strong>information will be displayed in the <em>Headers<\/em> tab<\/strong> on the right. <strong>Locate the <em>Response Header<\/em> subsection<\/strong> within and <strong>open it<\/strong>. You will be able to find what server your website is using<strong> from the data shown after the <em>Server:<\/em> label.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"636\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Network-Headers.jpg\" class=\"attachment-full size-full\" alt=\"Network Headers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Network-Headers.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Network-Headers-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Network-Headers-768x504.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Network-Headers-620x407.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After that, <strong>skip to the instructions for the appropriate server type.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Apache<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For Apache, <strong>connect to the server<\/strong> using your FTP credentials and <strong>navigate to the root WordPress directory<\/strong> of your website, often called public_html. <strong>Find the .htaccess file<\/strong> within it and <strong>right-click on it<\/strong>. Then, before proceeding, we recommend downloading this file as a backup. Simply <strong>press the <em>Download<\/em> option<\/strong> and you will have a backup version of the .htaccess file in case something goes wrong.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Htaccess-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Htaccess Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Htaccess-Edit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Htaccess-Edit-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Htaccess-Edit-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Htaccess-Edit-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After that, <strong>right-click on the .htaccess file<\/strong> that\u2019s still on your server and <strong>select the <em>View\/Edit<\/em> option<\/strong>. In case you weren\u2019t able to <a href=\"https:\/\/qodeinteractive.com\/magazine\/find-htaccess-file-on-wordpress-site\/\">find the .htaccess file<\/a>, make sure to enable the options for displaying hidden files within your FTP client. Then, proceed as mentioned above.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Htaccess.jpg\" class=\"attachment-full size-full\" alt=\"Htaccess\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Htaccess.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Htaccess-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Htaccess-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Htaccess-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Open the .htaccess file using your preferred text editor<\/strong> and <strong>insert the following code<\/strong> at the beginning of the file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;IfModule mod_expires.c&gt;\r\nExpiresActive On\r\n# Images\r\nExpiresByType image\/jpg \"access plus 1 year\"\r\nExpiresByType image\/jpeg \"access plus 1 year\"\r\nExpiresByType image\/gif \"access plus 1 year\"\r\nExpiresByType image\/png \"access plus 1 year\"\r\nExpiresByType image\/webp \"access plus 1 year\"\r\nExpiresByType image\/svg+xml \"access plus 1 year\"\r\nExpiresByType image\/x-icon \"access plus 1 year\"\r\n# Video\r\nExpiresByType video\/webm \"access plus 1 year\"\r\nExpiresByType video\/mp4 \"access plus 1 year\"\r\nExpiresByType video\/mpeg \"access plus 1 year\"\r\n# Fonts\r\nExpiresByType font\/ttf \"access plus 1 year\"\r\nExpiresByType font\/otf \"access plus 1 year\"\r\nExpiresByType font\/woff \"access plus 1 year\"\r\nExpiresByType font\/woff2 \"access plus 1 year\"\r\nExpiresByType application\/font-woff \"access plus 1 year\"\r\n# CSS, JavaScript\r\nExpiresByType text\/css \"access plus 1 month\"\r\nExpiresByType text\/javascript \"access plus 1 month\"\r\nExpiresByType application\/javascript \"access plus 1 month\"\r\n# Others\r\nExpiresByType application\/pdf \"access plus 1 month\"\r\nExpiresByType image\/vnd.microsoft.icon \"access plus 1 year\"\r\n&lt;\/IfModule&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Htaccess-Code.jpg\" class=\"attachment-full size-full\" alt=\"Htaccess Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Htaccess-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Htaccess-Code-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Htaccess-Code-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Htaccess-Code-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>save the changes<\/strong> you made and <strong>upload the file back to the server<\/strong> to override the version of it that\u2019s currently there.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Nginx<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Nginx users will need to add Expires Headers differently from Apache users. The process involves editing your server\u2019s configuration file. As the location of this file depends on your hosting provider, we suggest asking them for help.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you find the file you need, add the following code to it:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">location ~* \\.(jpg|jpeg|gif|png)$ {\r\nexpires 365d;\r\n}\r\nlocation ~* \\.(pdf|css|html|js|swf)$ {\r\nexpires 30d;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You should know that the default values we used in the codes above will work for most websites. However, you might need to adjust those expiration durations differently, based on the file types used on your website and your requirements for their caching.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After that, the only thing that remains is to check the results. You can do this by re-running the online website performance test and reviewing the change in the metrics for Expires Headers that you get now versus those you got before. If your website speed test didn\u2019t show these metrics, you can also inspect the HTTP requests of your website by inspecting a page. Then look for the <em><strong>Expires<\/strong><\/em>: section within the <em>Response<\/em> headers of each HTTP request, examining them one at a time.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"660\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result.jpg\" class=\"attachment-full size-full\" alt=\"Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-300x204.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-768x523.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-620x422.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Alternatively, as checking each HTTP request can be slow-going, you can also use an <a href=\"https:\/\/www.giftofspeed.com\/cache-checker\/\" target=\"_blank\" rel=\"noopener\">online caching checker<\/a>. After <strong>inserting your website URL<\/strong> and<strong> pressing the <em>Check<\/em> button<\/strong>, you should see a list of cached resources, their expiry duration, and the cache type. Depending on the configuration of your website, it should also note whether you\u2019re using the Expiry Headers or Cache-Control cache type.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"653\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-2.jpg\" class=\"attachment-full size-full\" alt=\"Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-2-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-2-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Result-2-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As a final reminder, the Expires Headers method is used for setting an expiry duration on internal resources, i.e. resources belonging to your server. That means you will need to find other ways of adding the expiry duration for external resources (e.g. Google Fonts or Google Analytics). One way to do so involves hosting the third-party files locally, and another involves using suitable WordPress plugins. The plugins we already mentioned in this article are a good place to start, but you can also explore other WordPress plugins that would help you do this.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h3\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]By implementing Expires Headers in WordPress, you can reduce the number of HTTP requests issued toward your website and improve your website load for repeat visitors. Adding expiry dates to internal resources loaded by your visitors\u2019 browsers will improve the user experience by making it smoother. In time, it can reduce your bounce rate as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we discussed the different ways you can implement the WordPress add Expires Headers method. While it might sound scary, you\u2019ll just need to edit the server\u2019s configuration file. This can be done in several easy steps that we covered in detail. And, for anyone leery of tinkering with server files, we also covered two WordPress plugins that can help you achieve the same thing with no stress.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to use WordPress to add expires headers for your site. This will reduce the load time for repeat visitors, making their user experience better.<\/p>\n","protected":false},"author":11229,"featured_media":29649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[152,151,4,13],"class_list":["post-29626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-optimization","tag-speed","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=29626"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29626\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29649"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}