How to serve static assets with an efficient cache policy on Nginx?

user_4480164 0
Viewed 6501

On mobile

I'm trying to improve the page load of my site

enter image description here

I added

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|mp3|ogg|ogv|webm|htc|woff2|woff)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
}

For some reasons, I feel like the changes that I just added to my Nginx is not taking any effect.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.bunlongheng.com%2F

How should I debug this further ?

nginx caching css image performance
1 Answers

You're missing the max-age directive, from http://nginx.org/en/docs/http/ngx_http_headers_module.html

I don't think you really want CSS and JS files to expire so far out, but I could be wrong.

Also, no logging on images and all these file types? What if you're getting hotlinked or serving CSS/JS files that can't be found.

I would rethink your cache control a bit more.

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|mp3|ogg|ogv|webm|htc|woff2|woff)$ {
    expires 1M;
    access_log off;
    # max-age must be in seconds
    add_header Cache-Control "max-age=2629746, public";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "max-age=31556952, public";
}
user_8884620
Related