nginx configuration for expiration specifying

Question

I am trying to improve my pagespeed. I have installed nginx and changed my sites to http2. But in the gtmetrix Performance Report my css,png and js files has no expiration dates. (expiration not specified) in the Leverage browser caching recommendation. I think I have set all possible ways to do this and tried different variants.

If their are another improvements in my nginx instrution and htaccess file, feel free to post it.

nginx addictional instructions in Plesk

gzip on;
gzip_vary on;
gzip_min_length 1240;
gzip_proxied    expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_types text/plain text/css text/javascript application/javascript application/x-javascript application/json text/xml application/xml application/xml+rss image/x-icon image/bmp image/svg+xml;
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    log_not_found off;
}

htaccess-file

<IfModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/plain text/html
   AddOutputFilterByType DEFLATE text/css text/javascript
</IfModule>

<IfModule mod_deflate.c>            
<FilesMatch “\\.(js|css|html|xml)$”>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

<IfModule mod_gzip.c>
   mod_gzip_on       Yes
   mod_gzip_dechunk  Yes
   mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$
   mod_gzip_item_include handler   ^cgi-script$
   mod_gzip_item_include mime      ^text/.*
   mod_gzip_item_include mime      ^application/x-javascript.*
   mod_gzip_item_exclude mime      ^image/.*
   mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>           

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType text/xml "access plus 3600 seconds"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/ico "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
ExpiresByType application/x-shockwave-flash "access plus 1000 seconds"
ExpiresByType application/xhtml+xml "access plus 6000 seconds"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf)$">
Header set Cache-Control "max-age=2629743, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>
#<FilesMatch "\\.(xhtml|html|htm|php)$">
#Header set Cache-Control "max-age=600, private, must-revalidate"
#</FilesMatch>
</IfModule>        

AddType application/x-httpd-php .xml

score -1 · Accepted Answer · answered Feb 08 '18 at 12:26

You need to check and setup Etag header for optimization of page loading.

When we setting up browser caching, we should to keep one main rule: "If file was once loaded by browser, browser should not load this file again if this file wasn`t changed." Browser should to take this file from cache. During every reloading of page, browser should to check, which of file was modified on the server and which not. For those purposes in HTTP protocol we have ETag header which browser receiving from server in first file request and in the next requests browser will send value of that header as value of header If-None-Match or If-non-modified-since. This comunication between browser and server will looks like that:

First request:

    GET /file.css HTTP/1.1
    Host: example.com\r\n\r\n

First response:

    HTTP/1.1 200 OK
    Content-Type: text/css; charset=UTF-8
    Cache-Control: public, must-revalidate
    ETag:W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs"

    --There is content of file--

Second request:

    GET /file.css HTTP/1.1
    If-None-Match:W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs"
    Host: example.com\r\n\r\n

Second response:

HTTP/1.1 304 Not Modified

--There is no content--

Pay attention for:

ETag:W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs" in first response

and

If-None-Match:W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs"

in second request

In this case when we received "304 Not Modified" Browser will pull up this file from cache and this file will have endless expiration. If file will be changed, Etag value will be changed and all browsers will reload this file from server and update their cache. Even when you have dynamical content rendering with php or something else, nginx will compute value of Etag after content is rendered and check before send response to browser;

For loading optimization you need to set up Etag header in server. And this aproach:

ExpiresByType image/jpg "access plus 14 days"

to file caching is incorrect. You can use that only for main html request. Because Expiration header is useful for search engines like google. It tells them when they are need to reindex your page. How to setup Etag you can see here.

nginx configuration for expiration specifying

1 Answers1