Leverage Browser Caching

HTML & CSS
1

I have several images in some of my pages requesting me to Leverage browser caching for the cacheable resources. What is that exactly, I know it has to do with time? Recommendations are to use Cache Control and Etag. Is it something like this?: <meta http-equiv="Cache-control" content="public">

2

It means to let users cache certain assets that don’t change dynamically. Such as .css, .js, and images.

I’ve only ever done this at the server level. You need to set the max-age headers.

However, you can run into issues where if you set an age too far in the future, your assets won’t be updated on all your user’s computer when you update them. URL fingerprinting is a good way to get around this and keep large (1 week or more) max-age headers.

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating-and-updating-cached-responses

3

So it looks something like this? Not sure how you determine that max-age number? It says that it goes in the .htacess file but I dont have that file…

<IfModule mod_headers.c>
# WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
4

If you have Apache odds are you do have that file (at least one under the site root folder) but aren’t seeing it because it begins with a “dot”.

Check around in whatever you’re using for something like a “show hidden files” setting.

2 Likes
5

That’s a httpd.conf setting, not .htaccess (I don’t think anyway). Where your httpd.conf is dependent on your server setup, it will be somewhere in the Apache folder.

http://stackoverflow.com/questions/12202021/where-is-my-httpd-conf-file-located-apache

If you happen to be running a Windows server and using IIS, here’s how you set that:

6

I got this from some CSS-tricks article. This is what I use in my .htaccess file for caching.

# BEGIN EXPIRES
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
# END EXPIRES
4 Likes
7

Found it but its empty. All it says is: Options + Indexes
All I do is paste this there right?

<IfModule mod_headers.c>
# WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
8

I looked there previously, but did find anything. Apparently there is… :smile: Maybe I should use that as well…

9

That’s from an .htaccess? I didn’t know the syntax was like that. (We don’t use .htaccess)

It’s pretty much the same for httpd.conf, which is a global setting where .htaccess is directory based. There’s really no reason to have directory based settings for this, images especially.

stupid discourse error: Body is too similar to what you recently posted

10

Did you get an “Sorry, an error occured upon posting” and hten upon resubmit, it gave you taht error?

And yeah, that’s htaccess

1 Like
11

So it is ok to use in .htaccess file?

12

Hmmm. OK for yourself on localhost I guess, but if you go to a folder/ as opposed to folder/file Apache might - depending on DirectoryIndex setting - show something like

Probably not something you want on a live site.

You can add that to the htaccess file, although if you know the mod_headers module is there you should remove that “IfModule” as Apache parses the htaccess file every request and you can save on some resource use without it.

If you keep it, don’t forget to close it with
</IfModule>

13

But my .htaccess is empty and I dont have any other folder that has date like that… So I can use this on my .htaccess file?

# BEGIN EXPIRES
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
# END EXPIRES
15

Yes.

I suppose it’ll tell you when you try to create a file with that name, if the file is truly hidden or not. Go for it.

16

I meant to say *data not date.

17

With Windows, when I edit it I need to open my text editor with “right-click run as Admin” to be able to save the changes to the file.

18

im using CodePen.

19

hmm doesnt seem to be reading it from my server this is what the .htaccess file looks like:

1169Ă—548 61.2 KB

20

Is the mod_expires module there and enabled?

i.e. Do you see something like this in your httpd.conf file - but not - commented out?

#LoadModule expires_module modules/mod_expires.so

21

I dont have this file though