Leverage browser caching for Nginx, no css when reloading the page

Question

I amtrying to follow the google pagespeed advice and Leverage browser caching. For that I place the following code into the server block of my nginx.conf file.

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 365d;
}

location ~*  \.(pdf)$ {
    expires 30d;
}

It seems to work nicely, page speed increases my score to from 87/100 to 95/100. However, when I click the refresh button for my site it doesn't seem to load the css files anymore? Did the caching not work?

The error message I get is

Failed to load resource: the server responded with a status of 404 (Not Found)

Here is my entire nginx.conf file

worker_processes 1;

events {

    worker_connections 1024;

}

http {
    include /etc/nginx/mime.types;

    sendfile on;

    gzip              on;
    gzip_http_version 1.0;
    gzip_proxied      any;
    gzip_min_length   500;
    gzip_disable      "MSIE [1-6]\.";
    gzip_types        text/plain text/xml text/css
                  text/comma-separated-values
                  text/javascript
                  application/x-javascript
                  application/atom+xml;

    # Configuration containing list of application servers
    upstream app_servers {

        server 127.0.0.1:8080;
    }

    # Configuration for Nginx
    server {

        # Running port
        listen 80;

        # Settings to serve static files
        location /static/  {

            # Example:
            # root /full/path/to/application/static/file/dir;
            root /var/www/benty-fields/app/;

        }

        location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
            expires 365d;
        }

        location ~*  \.(pdf)$ {
            expires 30d;
        }

        # Serve a static file (ex. favico)
        # outside /static directory
        location = /favico.ico  {

            root /app/favico.ico;

        }

        # Proxy connections to the application servers
        # app_servers
        location / {

            proxy_pass         http://app_servers;
            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;

        }
    }
}

What error messages are you getting in the browser's developer console? e.g Are you getting a 404 or something like that? — ajtrichards, Oct 11 '15 at 07:40
I included the error message and the entire nginx.conf file above — carl, Oct 11 '15 at 17:35

score 0 · Answer 1 · answered Oct 11 '15 at 14:45

0

Take a look at Fiddler traces or Chrome dev tools.

A 304 would mean that the server responded with "not modified, use your local cache". If you clear your browser cache or do Shift + Refresh, you will get a 200 along with the body of the file. 304 on the contrary have zero body length.

answered Oct 11 '15 at 14:45

Rahul Soni

4,941
3
35
58

I included the error message and the entire nginx.conf file above – carl Oct 11 '15 at 17:53
I have tested the configuration http://paste.fedoraproject.org/278182/46116681/ for what you want to achieve, and it works well. – Rahul Soni Oct 12 '15 at 01:02
Btw, just wanted to highlight that you have set your gzip min size has 500, so please ensure that your CSS file is larger than 500 bytes. It is JFYI and not related to 404 status code. Currently Nginx is not able to find your file due to the configuraiton. – Rahul Soni Oct 12 '15 at 01:35

score 0 · Answer 2 · answered Nov 05 '16 at 19:07

I was getting the same issue.

Resolved it by placing:

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
}
location ~*  \.(pdf)$ {
        expires 30d;
}

inside

location /static/

So the final config looks like

location / {

        proxy_pass         http://app_servers;
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;

        location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
            expires 365d;
        }

        location ~*  \.(pdf)$ {
            expires 30d;
        }
    }

Reference: https://developers.google.com/speed/pagespeed/module/filter-cache-extend

Leverage browser caching for Nginx, no css when reloading the page

2 Answers2