Since I have started my journey in developing websites within Statamic CMS, I've learned a lot of new things. Especially reading PHP code. It still feels like going back years in time, compared to a .NET C# application, but since Statamic runs on top of the Laravel framework, I become a little less hostile to PHP ;)

Nevertheless, Statamic is an awesome CMS to work with and I enjoy doing just that!

Last week I was testing one of my sites against Google Page Speed and I did want to make some performance adjustments. One of them was caching static files like stylesheets and scripts.

The .NET framework offers some helper classes that help you append some form of file versioning to resources like stylesheets and scripts. It looks something like this:

<link rel="stylesheet" href="/css/site.min.css?v=UdxKHVNJA5vb1EsG9O9uURFDfEE3j1E3DgwL6NiDGMc" />

The performance advantage of doing this is that we can tell the browser to cache these files indefinitely without worrying about the client not getting the latest version when the file changes. Since the name of the resource changes when the file contents change, the updated files are always downloaded.

So I wanted this functionality within Statamic also. I know there is the /site/themes/space/css/space.css tag, that gets the URL to a file in your theme. This tag also has a cache_bust parameter. Setting this to true will add the timestamp of the asset to the end of the URL in a ?v= query param. Great! But somehow I cannot point to a css or js file that is outside of the default css folder. Maybe there is a solution for that, I don't know. Anyway, I wanted to see if I was able to create my own 'Tag' that covers this functionality, so I started reading the documentation on how to develop a custom tag.

Develop a custom tag

So the first thing I did was to use the php please command to generate the files needed to create the tag:

php please make:tags ResourceTags

This generated a file within my Statamic site inside the Addon directory.
I created two functions. One for the styles, one for the scripts.

Inside these functions, I check if there is an src parameter and if so, I do a couple of checks. After that, I use the helper File::lastModified method that comes with Statamic to get an integer value of the file. This value will be appended to the URL of the file.

Inside my template, I use the new tag like this:

{{# resources:style src="/site/themes/front/dist/assets/css/theme.min.css" #}}

Which will render the following code: 

<link media="all" rel="stylesheet" href="/site/themes/front/dist/assets/css/theme.min.css?v=1559229731">

I know, probably not the most perfect solution, and perhaps this can be done better in PHP, but for now, this works great and it even got my Google Page Speed score up to 97%.