Browser caching not enabled

For some reason browser caching is not enabled in V4.

How do I leverage browser caching in the NginX configuration?

Don’t know about the Nginx config. But if you use Cloudflare, go to Caching settings for your site, and set “Browser Cache Expiration” there. Anything a month or over will be recognised by GTmetrix etc as acceptable. That’s not exactly an answer to your question - but hope it may be helpful nonetheless!

Did you use the —cache flag when you created your site? Like is the cache enabled and all the components have been installed and you’re having trouble with it? It sounds like it’s not installed but just checking. If it isn’t, there’s no update feature yet so you’ll need to back up your site and re-create it with the cache flag then restore

I used Cloudflare several years ago when it first came out and the free version was fast. But now, the paid for version isn’t even as fast as the free version used to be, and the free version slows my sites down, so I don’t use it any more.

Yes I did use the --cache flag and Redis is running correctly, but caching is not the issue I am discussing here. The issue is the HTTP response header and the cache contol string NginX is sending, or rather not sending.

Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images.

Some pages might only consist of a few files and be small in size – maybe a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large. Twitter.com for example is 3 MB+.

The issue is two fold.

  1. These large files take longer to load and can be especially painful if you’re on a slow internet connection (or a mobile device).
  2. Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.

Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally.

This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.

So yes, it does speed up the page load times, just as caching static files on the server, but this is a question of sending the right commands to the browser so that it stores some of the files in the browser’s cache.

Hm in my case my browser caches every single file being loaded from the server. 44 out of 45 requests are served from the browser cache. I just checked all other websites I have on my server and they’re all working fine too. Never seen this issue with ee. Make sure you’re removing query strings from your css and js files otherwise they will not be cached. And those two file types are cached for 1d which you can increase to a longer period of time if you want to.

Yes – but it caches some files longer than others – and yes I am removing all the query strings.

If it were Apache I could use an .htaccess file with this to do the job like this…

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

So how are you increasing the time in cache for css and js files on NginX?

You should be able to add custom headers to /opt/easyengine/sites/example.com/config/nginx/custom/user.conf. I’m trying to add these headers that I use on my other servers:

add_header Strict-Transport-Security "max-age=31536000; includeSubdomains" always;
add_header Content-Security-Policy "default-src 'self' https: data: 'unsafe-inline' 'unsafe-eval';" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains' always;

… but I can’t seem to get it to work. On a normal setup, it would be a case of using nginx -t and service nginx reload… I’ve tried restarting both the local and global nginx services but it doen’t seem to be working.

Head to /opt/easyengine/sites/yourdomain.com/config/nginx/conf.d/

Open up main.conf and scroll all the way to the bottom. You’ll see the following lines. Copy them to your clipboard, and then add a # at the beginning of each of these lines

       location ~*  \.(css|js)$ {
               expires 1d;
               add_header Cache-Control "public, must-revalidate";
       }

Save the file, and next we’ll head up one directory, back to /nginx/. Now we want to go into the custom directory and edit user.conf – We’ll add the following code to set the js/css expiration date to max (or 30d, or whatever you wish.)

       location ~*  \.(css|js)$ {
               expires 30d;
               add_header Cache-Control "public, must-revalidate";
       }

Save the file, and sudo ee site restart yourdomain.com

3 Likes

This isn’t working for you because these headers are already defined in the global conf files, default.conf, nginx.conf and main.conf so you need to comment those lines out before you add them to your custom file otherwise they take priority over what’s in your user.conf. I’m not sure exactly which header is in which file but have a read through all the default conf files you’ll find them there

Ah. Okay. Thanks.

@msarhan That’s exactly what I needed. Many thanks, it immediately gave me an A (100%) PageSpeed Score.

Yes Terence, you are right. I see if I am testing from Sydney and for machine in Sydney, for example … faster without Cloudflare. Quite a lot faster in fact.

In the past I was often testing from Melbourne (pingdom Australia test server was there) and my servers in Singapore datacenter, and it was always faster with cloudflare, I supposed because they have endpoint in Syd/Melb, so it gives CND benefits i guess.

But now, with testing from Sydney and my machine in Syd … cloudflare is slower. Will keep that in mind and probably switching off their CDN function for a number of sites. THANKS FOR THE TIP!

I tested CF as well like a week ago, hadn’t used it in a few years but anyway my server is also in Sydney. I noticed it slows down my site a lot to other visitors from Australia. Like TTFB from ~25ms to ~1150, and an extra 3s minimum on load time. Is there a way to disable CF for visitors from certain countries? It would be ideal to have it there for visitors outside AU. For now I’ve removed it after that few minutes of testing anyway.

If you use the free version to gain speed benefits just about anywhere in the world I think you’ll be disappointed these days, however there are other security benefits which seem to be pretty good still

Yes funny I had always been getting fast loading speeds on free CF, as long as sites didn’t have a bunch of external js, like FB and Youtube, loading in 300~400ms no problem. Now it’s taking that long just for TTFB! Whereas with CF DNS only, TTFB is around 30ms. So I will stick with that for now. Strange.

I added this piece of code and it positively impacted the Pagespeed score, but the Yslow wasn’t impacted. I still get a pretty low score on "Add Expires headers (“There are 7 static components without a far-future expiration date”). Why wasn’t this impacted by this config update?

Good to hear! The 7 static files, are they coming from your domain or are they files from like Google or something? If they’re not from your domain then your cache rules don’t apply to them. If they are from your domain, are they from the exact same domain as all your other files? (eg if all your other files come from www.yourdomain.com, the 7 static files shouldn’t come from yourdomain.com) – can you share the file extension of these 7 files? Were they css? js?

The static files are all in my domain. They are even the same files that where shown at “Leverage browser caching” before I entered the piece of code. You can check it yourself at: https://gtmetrix.com and enter my website http://www.easyengine.tk/

I already solved the matter. I created the user.conf file in the wrong folder. I should be edited in the custom folder. But another question: why isn’t the default expiry setting for css/js 31 days?

2 Likes