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
2 Likes
ben
June 30, 2017, 5:40pm
3
Yes, you need to re-provision. Deploys are only for changes to your site’s codebase and not the server configuration
3 Likes
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 !
How would you re run against vagrant instance ?
ansible-playbook -i hosts/development site.yml
or
PYTHONUNBUFFERED=1 ANSIBLE_FORCE_COLOR=true ANSIBLE_HOST_KEY_CHECKING=false ANSIBLE_SSH_ARGS='-o UserKnownHostsFile=/dev/null -o ControlMaster=auto -o ControlPersist=60s' ansible-playbook --private-key=/Users/user/repos/7x8_ansible/.vagrant/machines/default/virtualbox/private_key --user=vagrant --connection=ssh --limit='default' --inventory-file=/Users/user/repos/7x8_ansible/.vagrant/provisioners…
ben
July 1, 2017, 5:43pm
5
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
2 Likes
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
.
6 Likes
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;
}
17 Likes
How are you adding this configuration? Extend the existing jinja template?
No, just using Nginx includes. We just create nginx-includes/roots.io/assets-expiry.conf.j2
with that contents and that’s it.
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?
# 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;
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
@wickedst : How have you installed PageSpeed for nginx and keeping it up to date with nginx package?
max-age is expires
? So it’s in there.
partounian:
open_file_cache
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
14
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
15
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