Help setting expiry date for static resources (images) in Trellis?

I’ve got a new client site up with trellis/bedrock/sage :raised_hands:

greengallerylandscaping.com

It’s pretty image heavy and google page speed is complaining -

Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

I see people using this in their nginx server configs:

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
expires 30d;
add_header Pragma public;
add_header Cache-Control "public";
}

I tried to add to nginx.conf.j2 but no dice.

Where does this go? I think I have the fastcgi caching turned on? In wordpress_sites.yml I have:

    cache:
  enabled: true
  duration: 30s
  skip_cache_uri: /wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml
  skip_cache_cookie: comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in

Any help with this is mightily appreciated. Thanks!

I googled “pagespeed leverage browser caching nginx” and looked at the first result’s solution:

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

location ~*  \.(pdf)$ {
  expires 30d;
}

Added that to my site’s config block, restarted nginx and seemed to remove the Pagespeed warning although it didn’t improve my score much (from 94 -> 95).

You’d want to use Trellis’ Nginx includes feature to add a config like @cfx showed.

Keep in mind that by setting a 30d cache (for example) on images, clients may not see updated images (if you changed an existing image) for up to 30 days unless you had an automated system to append some version/hash to the filename.

2 Likes

Hi there,

I’m trying to achieve the same thing as @davidmichelruddy and improve my GT Metrix score by adding expiration date to static resources to my Nginx configuration in my Trellis 0.9.9 project.

So I tried the Nginx includes route and added a folder nginx-includes in my trellis root with a subfolder for each site key:

trellis/
    nginx-includes/
      site1/
        cache.conf.j2
      site2/
        cache.conf.j2

And in my cache.conf.j2 file the following rules:

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

location ~*  \.(pdf)$ {
  expires 30d;
}

I reprovisioned my remote server with the nginx-includes tag like this without any errors:
ansible-playbook server.yml -e env=production --tags nginx-includes

Supposedly this folder should have been created /etc/nginx/includes.d/ but that didn’t happen. A full reprovision didn’t create that folder either.

The Nginx includes documentation states the following:

Deprecated templates directory

The original implementation of Trellis Nginx includes required template files to be stored in roles/wordpress-setup/templates/includes.d. That directory is now deprecated and will no longer function beginning with Trellis 1.0. Please move your templates to a directory named nginx-includes in the root of this project. It is preferable to store user-created templates separate from Trellis core files.

But since there’s isn’t a Trellis version 1.0 tagged yet, I assume we should still create the file like this?

trellis/
  roles/
    wordpress-setup/
      templates/
        includes.d/
          cache.conf.j2

When I place my file there and reprovision the remote server, the folder /etc/nginx/includes.d/ is also not created and there is no effect in the Leverage browser caching score.

What am I doing wrong here?
Thanks!

I think you missed a folder name.

This worked for me (you may be missing domain.com folder):

trellis/
  roles/
    wordpress-setup/
      templates/
        includes.d/
            domain.com/
                browser_cache.conf.j2
2 Likes

Just tried @darjanpanic 's reply and that worked perfectly :slight_smile:

Super quick to enable by running ansible-playbook server.yml -e env=production --tags nginx-includes.

1 Like

Thanks for your reply!
domain.com being your site key from your wordpress_sites right?

I added the site_key subfolders inside includes.d and rerun ansible-playbook server.yml -e env=production --tags nginx-includes

But that outputs no changed files for me:

PLAY [Ensure necessary variables are defined] **********************************

PLAY [Determine Remote User] ***************************************************

TASK [remote-user : Require manual definition of remote-user] ******************
skipping: [my_production_hostname]

TASK [remote-user : Check whether Ansible can connect as root] *****************
ok: [my_production_hostname -> localhost]

TASK [remote-user : Set remote user for each host] *****************************
ok: [my_production_hostname]

TASK [remote-user : Announce which user was selected] **************************
Note: Ansible will attempt connections as user = admin
ok: [my_production_hostname]

TASK [remote-user : Load become password] **************************************
ok: [my_production_hostname]

PLAY [Install prerequisites] ***************************************************

PLAY [WordPress Server - Install LEMP Stack with PHP 7.1 and MariaDB MySQL] ****

TASK [setup] *******************************************************************
ok: [my_production_hostname]

TASK [users : include] *********************************************************
included: /path/to/project/trellis/roles/users/tasks/connection-warnings.yml for my_production_hostname

TASK [composer : include] ******************************************************
included: /path/to/project/trellis/vendor/roles/composer/tasks/global-require.yml for my_production_hostname

TASK [letsencrypt : include] ***************************************************
included: /path/to/project/trellis/roles/letsencrypt/tasks/setup.yml for my_production_hostname

TASK [letsencrypt : include] ***************************************************
included: /path/to/project/trellis/roles/letsencrypt/tasks/nginx.yml for my_production_hostname

TASK [letsencrypt : include] ***************************************************
included: /path/to/project/trellis/roles/common/tasks/reload_nginx.yml for my_production_hostname

TASK [letsencrypt : include] ***************************************************
included: /path/to/project/trellis/roles/letsencrypt/tasks/certificates.yml for my_production_hostname

TASK [wordpress-setup : include] ***********************************************
included: /path/to/project/trellis/roles/wordpress-setup/tasks/database.yml for my_production_hostname

TASK [wordpress-setup : include] ***********************************************
included: /path/to/project/trellis/roles/wordpress-setup/tasks/self-signed-certificate.yml for my_production_hostname

TASK [wordpress-setup : include] ***********************************************
included: /path/to/project/trellis/roles/wordpress-setup/tasks/nginx-includes.yml for my_production_hostname

TASK [wordpress-setup : include] ***********************************************
included: /path/to/project/trellis/roles/wordpress-setup/tasks/nginx.yml for my_production_hostname

PLAY RECAP *********************************************************************
my_production_hostname     : ok=15   changed=0    unreachable=0    failed=0   

Whoami:trellis Whoami$ 

On my remote server the /etc/nginx/includes.d/ still isn’t created…
Any ideas?

Yes, the site key/name from wordpress_sites has to match the folder names under nginx-includes.

For anyone else in this thread, please use the newer nginx-includes folder.

We will remove the the one under roles/wordpress-setup at some point and your template won’t be copied over :slight_smile:

@Twansparant I’m not really sure what’s going on for you. Have you been updating Trellis manually? My only guess so far is that something might have been missed in that process.

Assuming your folders are correct with the proper names.

2 Likes

So this folder should also already work in Trellis 0.9.9?[quote=“swalkinshaw, post:8, topic:7343”]

Have you been updating Trellis manually?
[/quote]

I have once from 0.9.8 to 0.9.9, but pretty sure I haven’t missed anything…

Yes, folders match my site_keys from wordpress_sites
Thanks!

Yes, that message says the old folder will go away in 1.0.0.

1 Like

For anyone else in this thread, please use the newer nginx-includes folder.

Ah, thanks for the heads up and clarification.

Yes, that message says the old folder will go away in 1.0.0.

Would help if I had read that part of the thread properly, so it does!

Thanks, it works now!
Had to manually pull in the latest commits though

1 Like