PHANTOM DEV

PHANTOM DEV

Serve static assets with an efficient cache policy in a few minutes

Serve static assets with an efficient cache policy in a few minutes

Subscribe to my newsletter and never miss my upcoming articles

Serve static assets with an efficient cache policy in a few minutes

21 Jun 2021 | 2 min read

In this quick tutorial, we will explore how we can enable an efficient caching policy for your static assets (ie. images, javascript, CSS, fonts, etc). This allows these assets to be cached on your client browser and get them served off memory or disk.

Why does this matter?

SEO is a big deal for most websites. Apart from web apps that aren't after organic traffic ie. tools like Mailchimp, forestry.io, etc Most of the revenue generated can be directly attributed to organic traffic. Performance / PageSpeed analysis provided by tools like lighthouse, web.dev advocates that better-performing websites increase the user experience significantly, and search engines favor these websites over the slower counterparts.

How does the browser know?

Efficiently cached static assets reduce the number of network calls required. For an instance, if you browse site.xyz every day. And this site loads up 12 different assets ( js, CSS, images etc). An efficient cache policy would instruct the browser that it's fine to cache these locally for a period of time.

Below is a snippet from Nginx that tells the webserver to set caching headers when requesting assets with the given extensions.

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

According to the nginx documentation :

The contents of the “Cache-Control” field depends on the sign of the specified time:

  • time is negative — “Cache-Control: no-cache”.
  • time is positive or zero — “Cache-Control: max-age=t”, where t is a time specified in the directive, in seconds.

And modern browsers and CDN's respect the Cache-Control headers.

How to configure Nginx

Configuring this is pretty straightforward. You need to update the nginx.conf for your website and update the server block. Basically, lines 13-15 are what you would add.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name test.phantom6th.dev;
    server_tokens off;
    root /home/phantom/phantom6th/public;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # browser caching of static assets
    location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf|ttf|svg|otf|ico|js)$ {
      expires 365d;
    }  

    # ... everything else
}

Once you've updated these, you need to restart your webserver.

To locate your configuration files on a ubuntu/debian webserver you can cd into

/etc/nginx/sites-enabled/site-name

To restart the Nginx server you would run

systemctl restart nginx.service

How to configure apache2

For apache2 you need to first enable mod_expires module.

a2enmod expires

systemctl restart apache2

You can then use .htaccess to configure the rules.

<FilesMatch "\.(jpg|jpeg|png|gif|ico|css|js|pdf|ttf|svg|otf|ico|js)">
    ExpiresActive on
    ExpiresDefault "access plus 52 weeks"
</FilesMatch>

References

  1. Apache Documentation - https://httpd.apache.org/docs/2.4/mod/mod_expires.html
  2. Nginx Documentation - http://nginx.org/en/docs/http/ngx_http_headers_module.html
  3. Cache-Control header Documentation - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
  4. HTTP Caching RFC7234 - https://datatracker.ietf.org/doc/html/rfc7234

Conclusion

As explained, we summarize how to configure static asset caching for webservers so you can increase your website's page performance and overall speed. You should now be able to configure nginx or apache2 to enable static asset caching.

Hope this was helpful, feel free to get in touch with me if you run into any issues or if you have questions. I am reachable over Twitter @phantom6thdev

#static assets #apache2 #nginx #seo

← AWS ECS Service with One Task How to configure VPC Peering on AWS in 5 min →

 
Share this