Question about Trellis + caching. 'Leverage browser caching' Google PageSpeed

wickedst · June 30, 2017, 12:39pm

Hi all,

I would like to turn on caching for my Trellis / Digital Ocean powered site and I am aiming to get the PageSpeed ‘Leverage browser caching’ point ticked off.

I did not set cache: true in production/wordpress_sites.yml when I provisioned / first launched the site.

I have since set cache: true and tried a deployment. I have also tried a deploy using the fastCGI settings.

–

Do I need to reprovision the server to activate the cache - or are both types of caching not recognised by PageSpeed?

Thanks for your help

strarsis · June 30, 2017, 3:08pm

ben · June 30, 2017, 5:40pm

Yes, you need to re-provision. Deploys are only for changes to your site’s codebase and not the server configuration

wickedst · July 1, 2017, 4:03pm

Thanks Ben - I tried re-provisioning using

ansible-playbook server.yml -e env=production

But it does not seem to have activated the cache. Looking in server.yml I can’t see any stage for the cache so I feel like I’ve taken the wrong step for re-provision. The link below says the server playbook is the right command for re-provision, feeling confused !

ben · July 1, 2017, 5:43pm

How are you checking to see if caching is enabled or not? Note Fastcgi-Cache: MISS and Fastcgi-Cache: HIT below:

☁  ~  curl -I https://roots-example-project.com
HTTP/1.1 200 OK
Server: nginx
Date: Sat, 01 Jul 2017 17:43:12 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Vary: Accept-Encoding
X-Pingback: https://roots-example-project.com/wp/xmlrpc.php
Link: <https://roots-example-project.com/wp-json/>; rel="https://api.w.org/"
Link: <https://roots-example-project.com/>; rel=shortlink
Fastcgi-Cache: MISS
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-UA-Compatible: IE=Edge
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block

☁  ~  curl -I https://roots-example-project.com
HTTP/1.1 200 OK
Server: nginx
Date: Sat, 01 Jul 2017 17:43:14 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Vary: Accept-Encoding
X-Pingback: https://roots-example-project.com/wp/xmlrpc.php
Link: <https://roots-example-project.com/wp-json/>; rel="https://api.w.org/"
Link: <https://roots-example-project.com/>; rel=shortlink
Fastcgi-Cache: HIT
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-UA-Compatible: IE=Edge
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block

nathobson · July 1, 2017, 6:34pm

I think I can see the confusion here. Page Speed’s Leverage browser caching warning is to do with caching of assets, not page caching. The FastCGI cache, as outlined in the Trellis docs here: https://roots.io/trellis/docs/fastcgi-caching, is in regards to page caching.

To solve the Page Speed warning, you’d want to add expiry headers to your assets. With Trellis, this can be done with an Nginx include. There may be a better way of doing this but it can be achieved by:

Add the following directory: trellis/nginx-includes/sitename.com. Sitename would obviously reflect your particular setup.

Within this directory, add a new file called cache.conf.j2

In this file, add the following:

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

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

Then reprovision. You can also add a flag to your provision command to speed things up: ansible-playbook server.yml -e env=production --tags nginx-includes.

swalkinshaw · July 2, 2017, 3:49pm

Here’s what we use on roots.io:

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  access_log off;
  add_header Cache-Control "public";
  gzip_vary on;
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "immutable";
  add_header Cache-Control "public";
  gzip_vary on;
}

strarsis · July 2, 2017, 3:54pm

How are you adding this configuration? Extend the existing jinja template?

swalkinshaw · July 2, 2017, 3:55pm

No, just using Nginx includes. We just create nginx-includes/roots.io/assets-expiry.conf.j2 with that contents and that’s it.

partounian · July 2, 2017, 5:46pm

Is there a reason you do not specify specify a max-age and instead specify public only?

Also something interested I just learned is that if you specify a max-age then public is implied.

Edit: Thoughts on adding open_file_cache to Trellis since it is already a part of h5bp?

github.com

h5bp/server-configs-nginx/blob/master/h5bp/directive-only/cache-file-descriptors.conf

# This tells Nginx to cache open file handles, "not found" errors, metadata about files and their permissions, etc.
#
# The upside of this is that Nginx can immediately begin sending data when a popular file is requested,
# and will also know to immediately send a 404 if a file is missing on disk, and so on.
#
# However, it also means that the server won't react immediately to changes on disk, which may be undesirable.
#
# In the below configuration, inactive files are released from the cache after 20 seconds, whereas
# active (recently requested) files are re-validated every 30 seconds.
#
# Descriptors will not be cached unless they are used at least 2 times within 20 seconds (the inactive time).
#
# A maximum of the 1000 most recently used file descriptors can be cached at any time.
#
# Production servers with stable file collections will definitely want to enable the cache.
open_file_cache          max=1000 inactive=20s;
open_file_cache_valid    30s;
open_file_cache_min_uses 2;
open_file_cache_errors   on;

wickedst · July 2, 2017, 7:28pm

Thanks for the replies all, Will test on Monday - I’ve updated the thread title to help anyone wanting from the future wanting to get the ‘Leverage browser caching’ tick on PageSpeed

strarsis · July 2, 2017, 7:47pm

@wickedst: How have you installed PageSpeed for nginx and keeping it up to date with nginx package?

swalkinshaw · July 3, 2017, 10:56pm

max-age is expires? So it’s in there.

Not really sure since it involves a trade-off. My first thought is we couldn’t enable that by default but feel free to open an issue about it.

DieGOs · October 24, 2017, 12:41pm

Hi everyone, who ever managed to solve the problem with ‘Leverage browser caching’ Google PageSpeed ???

I re-done everything that is written here, in addition to this many other options, but page speed vseravno says that the files are not cached …

At the moment I have trellis/nginx-includes/example.com/cache.conf.j2 with the contents

# cache.appcache, your document html and data
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
  expires off;
}

# PDF
  location ~*  \.(pdf)$ {
  expires 1d;
  add_header Cache-Control "public, max-age=86400";
}

# Feed
location ~* \.(?:rss|atom)$ {
  expires 1d;
  add_header Cache-Control "public, max-age=86400";
}

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|mp4|ogg|ogv|webm|htc)$ {
  expires 30d;
  access_log off;
  gzip_vary on;
  add_header Cache-Control "public, max-age=2629000";
}

# Media: svgz files are already compressed.
location ~* \.svgz$ {
  expires 30d;
  access_log off;
  gzip off;
  add_header Cache-Control "public, max-age=2629000";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "public, max-age=31536000";
}

# WebFonts
# If you are NOT using cross-domain-fonts.conf, uncomment the following directive
location ~* \.(?:ttf|ttc|otf|eot|woff|woff2)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "public, max-age=31536000";
}

and the command ansible-playbook server.yml -e env=production --tags nginx-includes

But there is no effect (…

Does anyone have any ideas how to fix this ???

Michael · August 13, 2018, 11:28pm

Did you try this…
Tip: Once you have set up your sites templates, append --tags nginx-sites to your command to run only the Nginx sites portions of the playbook.
Reference