![\"Nginx](\"https:\/\/linuxadmin.io\/wp-content\/uploads\/2017\/06\/nginx_browser_caching-1.png\")
<\/p>\n<\/p>\n
You can use Nginx to Set cache expiration times to leverage browser caching for the user requesting specific file types. This will cause the browser to retain the downloaded image until the length of the expires header. This will cause faster page time loads on each subsequent request performed by the end user.<\/p>\n
Prerequisites:<\/p>\n
You will need to have Nginx already installed. If you do not please see How To Install Nginx From Source On CentOS<\/a><\/p>\n Check headers on a existing image:<\/p>\n $ curl -Is http:\/\/domain.com\/test.png<\/p>\n HTTP\/1.1 200 OK If you look at the request, It is missing a Expires header. This is what needs to be in place to tell the browser to not check the file again until the cache time has expired.<\/p>\n To implement this, you will need to edit your Nginx server configuration<\/p>\n nano \/etc\/nginx\/nginx.conf<\/p>\n Inside the server{} you will want to place the file types you would like to cache and their respective times:<\/p>\n location ~* .(png|jpg|jpeg|gif|ico|otf)$ { The first block says for the following file types .png, .jpg, .jpeg, .gif, .ico, and .otf you want to cache them for a period of 1 year. The second location indicates you want to cache .js and .css files for a period of 7 days. You can add other file types or adjust the time as you see first based on the needs of your site. Once that has been completed, go ahead and save the file.<\/p>\n Once that has been completed you will want restart Nginx to save the new configuration:<\/p>\n service nginx restart<\/p>\n You can then go ahead and check the same image as you did before adding the headers<\/p>\n $ curl -Is http:\/\/domain.com\/test.png<\/p>\n HTTP\/1.1 200 OK You now see the Expires header and the time which should correspond with the length of the header you set on the file type. This will improve page speed for end users when they make multiple similar requests and it will also reduce overall server consumption per page request as well.<\/p>\n Jun 7, 2017LinuxAdmin.io<\/p>\nHow To Check Current Nginx Browser Cache Behavior<\/h2>\n
\nServer: nginx\/1.11.13
\nDate: Thu, 08 Jun 2017 01:26:19 GMT
\nContent-Type: image\/png
\nContent-Length: 6983
\nLast-Modified: Fri, 28 Apr 2017 02:21:20 GMT
\nConnection: keep-alive
\nETag: “5902a720-1b47”
\nExpires: Thu, 15 Jun 2017 01:26:19 GMT
\nCache-Control: max-age=604800
\nAccept-Ranges: bytes<\/p>\nNginx Browser Cache Configuration<\/h2>\n
\nexpires 1y;
\n}
\nlocation ~* .(js|css)$ {
\nexpires 7d;
\n}<\/p>\n
\nDate: Thu, 08 Jun 2017 01:25:57 GMT
\nContent-Type: image\/png
\nContent-Length: 6983
\nConnection: keep-alive
\nLast-Modified: Fri, 28 Apr 2017 02:21:20 GMT
\nETag: “5902a720-1b47”
\nExpires: Fri, 25 May 2018 23:17:30 GMT
\nCache-Control: max-age=31536000<\/p>\n