{"id":11388,"date":"2016-06-27T18:09:31","date_gmt":"2016-06-27T15:09:31","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=11388"},"modified":"2025-02-25T17:31:05","modified_gmt":"2025-02-25T15:31:05","slug":"static-content-caching-with-nginx","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/static-content-caching-with-nginx.html","title":{"rendered":"How to Cache Static Files With NGINX"},"content":{"rendered":"\n

NGINX is a powerful tool for static content delivery (ex. images, JavaScript, CSS, etc.). It proposes a simple mechanism for caching on a client’s side allowing to reduce server load and increase content delivery speed.<\/p>\n

Below an example of server configuration is shown.<\/p>\n

server {\r\n    listen 80;\r\n    server_name www.example.com;\r\n    root \/var\/www\/html\/example.com\/;\r\n    proxy_set_header X-Real-IP  $remote_addr;\r\n    proxy_set_header X-Forwarded-For $remote_addr;\r\n    proxy_set_header X-Forwarded-Proto $scheme;\r\n    proxy_set_header Host $host;\r\n    location ~* .(ico|jpg|png|gif|jpeg|css|swf|js|woff)$ {\r\n        access_log off;\r\n        gzip_static on;\r\n        gzip_comp_level 5;\r\n        expires 1M;\r\n        add_header Cache-Control private;\r\n        # add_header Cache-Control public;\r\n        try_files $uri @proxy;\r\n    }\r\n    location @proxy {\r\n        proxy_pass http:\/\/www.example.com:8080;\r\n    }\r\n    location ~  {\r\n        proxy_pass http:\/\/www.example.com:8080;\r\n    }\r\n}\r\n<\/pre>\n
Let us examine it.<\/p>\n
We specify the port which should be used by our caching proxy (NGINX):<\/p>\n
listen 80;<\/pre>\n
We specify website URL:<\/p>\n
server_name www.example.com;<\/pre>\n
Then we configure directory where server should look for the static files:<\/p>\n
root \/var\/www\/html\/example.com\/;<\/pre>\n
In order to serve the dynamic content properly we specify the following instructions that allow sending query and IP variables:<\/p>\n
proxy_set_header X-Real-IP  $remote_addr;\r\nproxy_set_header X-Forwarded-For $remote_addr;\r\nproxy_set_header X-Forwarded-Proto $scheme;\r\nproxy_set_header Host $host;<\/pre>\n
The next step will be to define processed extensions of static content files.<\/p>\n
# caching of files with the following extensions ico, jpg, png, gif, jpeg, css, swf, js, woff\r\nlocation ~* .(ico|jpg|png|gif|jpeg|css|swf|js|woff)$<\/pre>\n
We disable logging of static content (increases content delivery speed and reduces the size of log files).<\/p>\n
access_log off;<\/pre>\n
Further on we enable gzip compression:<\/p>\n
gzip_static on;\r\ngzip_comp_level 5;<\/pre>\n
Most favorable compression size is 5. This can be seen from the table below:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Compression rate<\/td>\nNumber queries per second<\/td>\nCompressed size(original 170kb)<\/td>\n<\/tr>\n
1<\/td>\n370<\/td>\n51,7<\/td>\n<\/tr>\n
2<\/td>\n350<\/td>\n48,9<\/td>\n<\/tr>\n
3<\/td>\n294<\/td>\n45,7<\/td>\n<\/tr>\n
4<\/td>\n242<\/td>\n44,2<\/td>\n<\/tr>\n
5<\/td>\n181<\/td>\n41,3<\/td>\n<\/tr>\n
6<\/td>\n134<\/td>\n39,7<\/td>\n<\/tr>\n
7<\/td>\n115<\/td>\n39,5<\/td>\n<\/tr>\n
8<\/td>\n103<\/td>\n39,4<\/td>\n<\/tr>\n
9<\/td>\n102<\/td>\n39,4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Later we specify cache lifetime:<\/p>\n
expires 1M; # - cached files will be stored by the client’s browser for 1 month<\/pre>\n
The next step is to specify caching area:<\/p>\n
add_header Cache-Control private;\r\n<\/pre>\n
Directive «private» allows only browser caching, while «public» option tells to any invisible proxies to cache our content as well (more about Cache-Control header<\/a>).<\/p>\n
Then we try to deliver the requested file or if it is not found — pass request to the dynamic processor:<\/p>\n
try_files $uri @proxy;\r\n<\/pre>\n
In the end we should specify server address for processing dynamic content:<\/p>\n
location ~ {\r\n    proxy_pass http:\/\/www.example.com:8080;# - we proxy a query to the dynamic server.\r\n}\r\nlocation @proxy{\r\n    proxy_pass http:\/\/www.example.com:8080;\r\n}\r\n<\/pre>\n
The NGINX configuration for static content delivery is finished.<\/p>\n
<\/a>
\"full_cache_store\"
Full Cache<\/h3>
Take your online store to the next level with BelVG module<\/p>Download here<\/span><\/a><\/div><\/div><\/div>\n
Check out BelVG’s quality Magento extensions at our official store<\/a>.<\/p>\n\n","protected":false},"excerpt":{"rendered":"NGINX is a powerful tool for static content delivery (ex. images, JavaScript, CSS, etc.). It …","protected":false},"author":82,"featured_media":29180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,15,34],"tags":[],"class_list":["post-11388","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento","category-prestashop","category-tipstricks","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t