Credit: The Hangover[/caption]
This Week I Learned about Expires Headers
This week I learned (TWIL) is a weekly installment containing tidbits our team has learned about search engine optimization, PPC / AdWords, social media marketing, and other aspects of Internet marketing. This week, Jake Bohall discovered the secrets of setting expires headers on font files in .htaccess. Check out what he has to say below in this week’s TWIL!Set Expires on font files with headers in .htaccess.
I was working to help speed up a client’s site this week, and was having issues “conquering” page speed insights. In order to fix the “leverage browser caching” issue with some lagging font files, I went to .htaccess to set some expires headers. Generally, I have plugins running like autoptimize, etc. but in this case, I was just looking for a simple solution to leverage browser caching for font files (ttf, svg, otf, eot, woff, etc.. ), so I did a little research through Stack Overflow and found a nice solution that seems to have done the trick! See the final code below, as well as some other htaccess code I typically put in place for speeding up a site!# Below is custom site speed items
# We need to set 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
# This sets up expire times
# First part covers typical images, etc.
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
# This part sets the expires for the 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"
</ifModule>
# END Expire headers
# This sets up browser cache control
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
# This is for gzip, which compresses files
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
JUMP TO A CATEGORY
WEB ANALYTICS | SEARCH OPTIMIZATION | PAID ADVERTISING | COMPANY NEWS
I’m using your .htaccess example and noting improvements, but I think the hosting is more responsible for speed or slowness.
Thanks for this helpI
what is the reason for “access plus 216000 seconds”?
I currently have “access 1 month” for most elements, wondering if this will make the load quicker?
@ditsa — I just put it in seconds.. I could have done “access plus 6 days” instead..
You can set the expires to whatever timing you like, just as long as you are being mindful of if/how content might change. E.g. if you set JS or CSS files to a month, and then change your site without modifying the filename, then your site could look pretty wonky to previous visitors if you’ve changed class names or something and don’t have them referenced in the cached css file.
How do I expire by type in .htaccess for remote loaded Google fonts?
i have searched a lot and wasted many days but i can’t success 🙁
any body can suggest me how to do this. Thanks
Hi Ghulma, You can’t control external resources via your htaccess. You’ll have to host them locally if you want to control an expires header for them.
Hi
I just want to use (for the fonts).
But when i am trying to add in httacces file.
My blog is showing 404 forbidden page.
@Çıplak — Make sure you are setting the correct content type for fonts. Also, please note that for Google Fonts or other external resources, this will not do anything. You can only control those on the server where the files are hosted. As an alternative, you could download the font locally, and then this should cover what you need.
So what is the solution for Nginx
I don’t have one prepared for you.. but DigitalOcean.com did a good write-up here to help with editing the header module for nginx – https://www.digitalocean.com/community/tutorials/how-to-implement-browser-caching-with-nginx-s-header-module-on-ubuntu-16-04
Perfect. Took away my Add Expires Headers at GTMetrix.com
Worked for me. Thanks for sharing!