Resolved NGINX enable browser cache expiration

[MichaelG]

Hey I checked my webpage on tools.pingdom.com and it says that the browser cache expiration is not set.
I've looked at different articles but can't seem to fix it. This is what I did.

I've added in plesk additional nginx directives:

# and Cache Control
location ~* .(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
expires 14d;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
try_files $uri @fallback;
}

nginx settings:
Proxy mode = checked
Smart static files processing = checked
Serve static files directly by nginx = unchecked

additional information:
Running CentOS 7
Plesk Onyx v17.0.17_build1700161028.14
PHP 7.0.17 as FPM application served by nginx
mysql 5.5

- site is running Wordpress using plesk toolkit

 

[urki]

Hello @Michael G,

The code below code does what you seek, edit it the way you desire and paste into "Additional nginx directives":

location ~ ^/(plesk-stat|webstat|webstat-ssl|ftpstat|anon_ftpstat|awstats-icon) {
    proxy_pass https://<server IP address>:7081;
    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-Accel-Internal /internal-nginx-static-location;
    access_log off;
}
# cache.appcache, your document html and data
# you should never cache this data, so apply a negative value, which is equal to stating "non-cache"
location ~ \.(manifest|appcache|html?|json)$ {
    expires -1;
    # access_log /var/www/vhosts/system/domain.com/logs/static.log;
}

# Feed
location ~ \.(rss|atom)$ {
    expires 1h;
    add_header Cache-Control "public";
}

# Media: images, icons (xml removed)
location ~* \.(jpeg|jpg|gif|png|ico|cur|gz|svg|svgz|webp)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

# Media: video, audio, HTC
location ~* \.(mp3|mpeg|mpg|mp4|ogg|ogv|webm|webp|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

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

# CORS configuration for fonts
# this is useful when you use webfonts that are hosted elsewhere.
# the drawback is that there is a (minor) security penalty
#location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css)$ {
    # add_header Access-Control-Allow-Origin "*";
#}

Next step is ticking "Serve static files directly by nginx", this has to be enabled.

However, due the nature of Plesk you will have to remove extensions used in "Additional nginx directives" from the list under "Serve static files directly by nginx".

You could use:

ac3 avi bmp bz2 cue dat doc docx dts eot exe flv htm html img iso mkv pdf ppt pptx qt rar rm swf tar tgz ttf txt wav woff woff2 xls xlsx zip

Hope it helps.

 

[MichaelG]

Hi urki,

Thanks for replying.
I tried the steps but still no luck.

Maybe it's conflicting wp-supercache?

This is the total code I got for that domain:

### WP Super Cache Below ###
set $cache_uri $request_uri;

# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
    set $cache_uri 'null cache';
}
if ($query_string != "") {
    set $cache_uri 'null cache';
}

# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
    set $cache_uri 'null cache';
}

# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
    set $cache_uri 'null cache';
}

# Use cached or actual file if they exists, otherwise pass request to WordPress
location ~ / {
    try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri $uri/ /index.php ;
}

# all other requests go to WordPress
if (!-e $request_filename) {
    rewrite . /index.php last;
}

# enable gzip compression
gzip on;
gzip_min_length 1100;
gzip_buffers 4 32k;
gzip_types text/plain text/javascript application/javascript application/x-javascript text/xml text/css;
gzip_vary on;
# end gzip configuration

location ~ ^/(plesk-stat|webstat|webstat-ssl|ftpstat|anon_ftpstat|awstats-icon) {
    proxy_pass https://*******:7081;
    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-Accel-Internal /internal-nginx-static-location;
    access_log off;
}
# cache.appcache, your document html and data
# you should never cache this data, so apply a negative value, which is equal to stating "non-cache"
location ~ \.(manifest|appcache|html?|json)$ {
    expires -1;
    # access_log /var/www/vhosts/system/*****/logs/static.log;
}

# Feed
location ~ \.(rss|atom)$ {
    expires 1h;
    add_header Cache-Control "public";
}

# Media: images, icons (xml removed)
location ~* \.(jpeg|jpg|gif|png|ico|cur|gz|svg|svgz|webp)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

# Media: video, audio, HTC
location ~* \.(mp3|mpeg|mpg|mp4|ogg|ogv|webm|webp|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

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

# CORS configuration for fonts
# this is useful when you use webfonts that are hosted elsewhere.
# the drawback is that there is a (minor) security penalty
#location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css)$ {
    # add_header Access-Control-Allow-Origin "*";
    #}

*** = edited it out

 

[UFHH01]

...
# Use cached or actual file if they exists, otherwise pass request to WordPress
location ~ / {
try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri $uri/ /index.php ;
}

# all other requests go to WordPress
if (!-e $request_filename) {
rewrite . /index.php last;
}
...

Both of these nginx directives conflict here, with the ones from the above suggestion.

You should consider to REMOVE all additional nginx rewrites, in order to see, if the suggestions work as expected. If you desire additional nginx rewrites directives, because you use wordpress ( or/and wordpress plugins which need additional directives ) in your document root as content, you should always make sure, that the additional nginx directives don't interfere with your existent ( working ) directives.

 

[MichaelG]

Thank you so much! This helped.