Nginx and Apache set up static resource caching

Usually the website is composed of dynamic and static resources. The dynamic resources are generally PHP, ASP, ASP.net, JAVA and other programs, while the static resources are generally pictures, style files (CSS), JS code files and so on. Since static resources rarely change in general, the WEB server can save network bandwidth and improve efficiency by setting the cache time of the client.

In general, the recommended cache time for image files, CSS style files, and JS code files is up to one year, which PageSpeed Insights recommends.

Nginx method for setting static resource caching

Add the following code to the Server block in the Nginx virtual host configuration file:

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|WebP)$
    {
        expires      365d;
        error_log /dev/null;
        access_log off;
    }
    
    location ~ .*\.(js|css)?$
    {
        expires      365d;
        error_log /dev/null;
        access_log off; 
    }

Note that the above code needs to be inserted into the Server block, Server {……. } before}.

expires 365d; Sets expires to a 365 day cache for this type of file.

expires 60s;   #Cache 60 seconds
expires 10m;  #Cache for 10 minutes   
expires 12h;   #Cache for 12 hours
expires 30d;   #Cache 30 days

After the Settings are complete, restart Nginx to take effect.

Apache sets up static resource caching

Before setting Apache’s cache, you need to enable LoadModule expires_module modules/mod_expires. So, edit Apache’s “httpd.conf” and find this line:

#LoadModule expires_module modules/mod_expires.so

Delete the “#” font in front of this line, save it, and restart Apache to take effect.

Then add the following code (sample) to the host configuration file:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType text/css "access plus 30 days"
ExpiresByType image/gif A31536000
ExpiresByType image/png A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType text/plain A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType video/x-flv A31536000
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>

A31536000 is 31536000 seconds, which is equivalent to a year. Alternatively, it can be written as “Access plus 365 days”, as in the following example:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon "access plus 365 days"
ExpiresByType application/x-javascript "access plus 365 days"
ExpiresByType text/css "access plus 365 days"
ExpiresByType image/gif "access plus 365 days"
ExpiresByType image/png "access plus 365 days"
ExpiresByType image/jpeg "access plus 365 days"
ExpiresByType text/plain "access plus 365 days"
ExpiresByType application/x-shockwave-flash "access plus 365 days"
ExpiresByType video/x-flv "access plus 365 days"
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>

Save the Settings and restart Apache to take effect.

Verify that the cache Settings take effect

In Chrome or Edge, access the Url of a. PNG file (the cache time has been set to one year) and press F12 to view the Headers information of the file.

You can see that the maximum cache time in cache-Control is 31536000 seconds (a year), which means that the setting is successful.

Leave a Comment