How to set up mod expires for fonts - apache

I'd like to set expiry date for fonts. Following definition isn't working on apache 2.2.15.
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"

First, add proper MIME types definitions:
AddType application/font-sfnt otf ttf
AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot
Next, change your configuration lines to:
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/font-sfnt "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

I find it easier to use file extensions rather than mine types, especially as the Woff mime type changed a few times.
# Set up caching on font files for 6 months (60 * 60 * 24 * 180 = 15724800)
<filesMatch ".([eE][oO][tT]|[tT][tT][fF]|[sS][vV][gG]|[Ww][Oo][Ff][Ff]|[Ww][Oo][Ff][Ff]2)$">
ExpiresDefault A15724800
Header append Cache-Control "public"
</filesMatch>

Related

How do I leverage browser caching of .woff fonts?

In PageSpeed Insights I keep seeing the message to leverage browser caching of a particular iconset/font I'm using: iconFont.woff (2 days)
I've set my .htaccess as so:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType font/ttf "access 1 week"
ExpiresByType font/woff "access 1 week"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
Despite this I'm still getting the same message in PageSpeed Insights. How do I cache this properly?
This is doing the job for me, as Google page speed is no longer asking to fix it. The AddType is essential.
# Fonts
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
# Compress compressible fonts
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
ExpiresActive on
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 year"
With the help of Seb's IT blog this worked for me:
<IfModule mod_expires.c>
# Activate mod
ExpiresActive on
# Declare fonts content-type
AddType application/x-font-woff2 .woff2
# Set cache duration
ExpiresByType application/x-font-woff2 "access plus 1 month"
# Append "public" to header "Cache-Control"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>

How to control file caching using apache's .htaccess

I have below block in my htaccess file. Now i realized that there are two config files which i dont want to catch by browsers but other can be cached.
files are lang.ja and config.js so i thought of using below block
# Dont catch below files
<FilesMatch "^(lang|config)\.js$">
ExpiresDefault A0
</FilesMatch>
does any body have any idea how i should add above code in below existing block. i already tried adding above block at starting and ending of below block but it does not work. (it always set js to 6 months expiry.)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/x-javascript "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType image/x-icon "access plus 2 years"
# Do not cache dynamically generated pages.
ExpiresByType text/html A1
# Cache all files for a month after access (A).
ExpiresDefault "access plus 21 days"
</IfModule>
Thank you in advance.
Regards,
Mona
Try FilesMatch directive without ^ and $:
<FilesMatch "(lang|config)\.js">
ExpiresDefault A0
</FilesMatch>
Place above code at the end of your .htaccess
Clear your browser cache or try in a new browser to test this out

.htaccess avoid only one file from browser catch

I have below in my htaccess file.
ExpiresActive on
ExpiresDefault A0
ExpiresByType image/gif A29030400
ExpiresByType image/jpeg A29030400
ExpiresByType image/png A29030400
ExpiresByType text/css A29030400
ExpiresByType text/javascript A29030400
ExpiresByType application/x-javascript A29030400
Everything works perfectly fine. Now i have one config file which is config.js which i dont want browser to catch.
Does anybody have idea how i can avoid catching only one file using htaccess.
I have blow situation i am using filesmatch..if file is lang.js/config.js then set expiry to 1 day otherwise whatever specified in above.. is below setting correct or something else i need to do.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/x-javascript "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType image/x-icon "access plus 2 years"
# Do not cache dynamically generated pages.
ExpiresByType text/html A1
# Cache all files for a month after access (A).
ExpiresDefault "access plus 21 days"
# Dont catch below files
<FilesMatch "^(lang|config)\.js$">
ExpiresDefault "access plus 1 day"
</FilesMatch>
</IfModule>
thank you in advance.
Regards,
Mona
Use the files directive
<Files "config.js">
#your desired config here
</Files>
For directory matching you can also use Directory directive
<Directory "/dir/with/different/config">
#your desired config here
</Directory>
EDIT AFTER QUESTION EDIT:
ExpiresDefault is used if there is not ExpiresByType for that content type. Assuming that config.js and lang.js are sent as application/javascript, you need to the change the last lines like this, to overwrite settings from the previous lines
<FilesMatch "^(lang|config)\.js$">
ExpiresByType application/javascript "access plus 1 day"
</FilesMatch>

Setting expire headers for fonts not working

I am using the below code in my .htaccess file to try and set the expire headers for some fonts, but upon checking my firefox cache and the expire header, the font is set to expire in about 12 hours from now; not the 1 year I am trying to set it to.
Here is my code:
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
What am I doing wrong?
Seems I had to include this bit as well:
ExpiresActive on
With the full code being:
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2
AddType image/svg+xml .svg
# Compress compressible fonts
AddOutputFilterByType DEFLATE font/ttf font/otf image/svg+xml
ExpiresActive on
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
I believe your issue is how you define the fonts, and there is no need to add their content-type
ExpiresByType font/truetype "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

Specifing Expiration Date For Static File's Caches

When i test my website for SpeedTest i'm seeing a lot of expiration not specified error.You can see at this page .
I added this code to my .htaccess file
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
But nothing changed . Can you give an advice me, for can i specify expiration date for my static files ?
Server : Linux - Apache
i like the html5boilerplate way :
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# your document html
ExpiresByType text/html "access plus 0 seconds"
# data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# rss feed
ExpiresByType application/rss+xml "access plus 1 hour"
# favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# htc files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# css and javascript
ExpiresByType text/css "access plus 2 months"
ExpiresByType application/javascript "access plus 2 months"
ExpiresByType text/javascript "access plus 2 months"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
Hope this can be useful to you.
Source:
https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
You can use mod_headers to do the trick:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>
Or you can use mod_expires:
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
I see you have PHP installed (reference wordpress), so we'll try to diagnose your problem:
restart your apache web server. If you own the apache server (command line access), you can do it like such.
create a phpinfo page. This will allow you to view the apache modules installed. Check for the mod_expires.c module your looking to use (should be able to do a CTL-F (find) request in your browser for mod_expires). If you find it - GOOD! If not, you need to install mod_expires in your apache server. If you own your apache server, you can search on for how to install modules for your specific operating system. If not, you can check with your hosting provider on how to get this module installed. Once installed, proceed.
modify your http.conf entry to include "plus" in your expression
restart Apache again
Test =)
You just need to add:
ExpiresByType application/javascript "access plus 1 year"
Maybe you didn't load mod_expires, so the entire stanza is a no-op. Or, AllowOverride is None and your .htaccess file is not processed.